Curt Long

There’s a lot of hype about WebAssembly in JavaScript circles today. People talk about how blazingly fast it is, and how it’s going to revolutionize web development. But most conversations don’t go into the details of why it’s fast. In this article, I want to help you understand what exactly it is about WebAssembly that makes it fast.

But first, what is it? WebAssembly is a way of taking code written in programming languages other than JavaScript and running that code in the browser.

¹

When you’re talking about WebAssembly, the apples to apples comparison is with JavaScript. Now, I don’t want to imply that it’s an either/or situation — that you’re either using WebAssembly or using JavaScript. In fact, we expect that developers will use WebAssembly and JavaScript hand-in-hand, in the same application. But it is useful to compare the two, so you can understand the potential impact that WebAssembly will have.

Further Reading on SmashingMag: Link

• Webpack: A Detailed Introduction³
• Beyond The Browser: From Web Apps To Desktop Apps⁴
• HTML APIs: What They Are And How To Design A Good One⁵
• Experimenting With speechSynthesis⁶

A Little Performance History Link

JavaScript was created in 1995. It wasn’t designed to be fast, and for the first decade, it wasn’t fast.

Then the browsers started getting more competitive.

In 2008, a period that people call the performance wars began. Multiple browsers added just-in-time compilers, also called JITs. As JavaScript was running, the JIT could see patterns and make the code run faster based on those patterns.

The introduction of these JITs led to an inflection point in the performance of code running in the browser. All of the sudden, JavaScript was running 10x faster.

⁷

With this improved performance, JavaScript started being used for things no one ever expected, like applications built with Node.js and Electron.

We may be at another one of those inflection points now with WebAssembly.

⁹

Before we can understand the differences in performance between JavaScript and WebAssembly, we need to understand the work that the JS engine does.

How JavaScript Is Run In The Browser Link

When you as a developer add JavaScript to the page, you have a goal and a problem.

• Goal: you want to tell the computer what to do.
• Problem: you and the computer speak different languages.

You speak a human language, and the computer speaks a machine language. Even if you don’t think about JavaScript or other high-level programming languages as human languages, they really are. They’ve been designed for human cognition, not for machine cognition.

So the job of the JavaScript engine is to take your human language and turn it into something the machine understands.

I think of this like the movie Arrival, where you have humans and aliens who are trying to talk to each other.

¹¹

In that movie, the humans and aliens can’t just translate from one language to the other, word-for-word. The two groups have different ways of thinking about the world, which is reflected in their language. And that’s true of humans and machines too.

So how does the translation happen?

In programming, there are generally two ways of translating to machine language. You can use an interpreter or a compiler.

With an interpreter, this translation happens pretty much line-by-line, on the fly.

¹³

A compiler on the other hand works ahead of time, writing down the translation.

¹⁵

There are pros and cons to each of these ways of handling the translation.

Interpreter Pros And Cons Link

Interpreters are quick to get code up and running. You don’t have to go through that whole compilation step before you can start running your code. Because of this, an interpreter seems like a natural fit for something like JavaScript. It’s important for a web developer to be able to have that immediate feedback loop.

And that’s part of why browsers used JavaScript interpreters in the beginning.

But the con of using an interpreter comes when you’re running the same code more than once. For example, if you’re in a loop. Then you have to do the same translation over and over and over again.

Compiler Pros And Cons Link

The compiler has the opposite trade-offs. It takes a little bit more time to start up because it has to go through that compilation step at the beginning. But then code in loops runs faster, because it doesn’t need to repeat the translation for each pass through that loop.

As a way of getting rid of the interpreter’s inefficiency — where the interpreter has to keep retranslating the code every time they go through the loop — browsers started mixing compilers in.

Different browsers do this in slightly different ways, but the basic idea is the same. They added a new part to the JavaScript engine, called a monitor (aka a profiler). That monitor watches the code as it runs, and makes a note of how many times it is run and what types are used.

If the same lines of code are run a few times, that segment of code is called warm. If it’s run a lot, then it’s called hot. Warm code is put through a baseline compiler, which speeds it up a bit. Hot code is put through an optimizing compiler, which speeds it up more.

¹⁷

To learn more, read the full article on just-in-time compiling¹⁹.

Let’s Compare: Where Time Is Spent When Running JavaScript Vs. WebAssembly Link

This diagram gives a rough picture of what the start-up performance of an application might look like today, now that JIT compilers are common in browsers.

This diagram shows where the JS engine spends its time for a hypothetical app. This isn’t showing an average. The time that the JS engine spends doing any one of these tasks depends on the kind of work the JavaScript on the page is doing. But we can use this diagram to build a mental model.

²⁰

Each bar shows the time spent doing a particular task.

• Parsing — the time it takes to process the source code into something that the interpreter can run.
• Compiling + optimizing — the time that is spent in the baseline compiler and optimizing compiler. Some of the optimizing compiler’s work is not on the main thread, so it is not included here.
• Re-optimizing — the time the JIT spends readjusting when its assumptions have failed, both re-optimizing code and bailing out of optimized code back to the baseline code.
• Execution — the time it takes to run the code.
• Garbage collection — the time spent cleaning up memory.

One important thing to note: these tasks don’t happen in discrete chunks or in a particular sequence. Instead, they will be interleaved. A little bit of parsing will happen, then some execution, then some compiling, then some more parsing, then some more execution, etc.

This performance breakdown is a big improvement from the early days of JavaScript, which would have looked more like this:

²²

In the beginning, when it was just an interpreter running the JavaScript, execution was pretty slow. When JITs were introduced, it drastically sped up execution time.

The tradeoff is the overhead of monitoring and compiling the code. If JavaScript developers kept writing JavaScript in the same way that they did then, the parse and compile times would be tiny. But the improved performance led developers to create larger JavaScript applications.

This means there’s still room for improvement.

Here’s an approximation of how WebAssembly would compare for a typical web application.

²⁴

There are slight variations between browsers’ JS engines. I’m basing this on SpiderMonkey.

Fetching Link

This isn’t shown in the diagram, but one thing that takes up time is simply fetching the file from the server.

It takes less time to download WebAssembly it does the equivalent JavaScript, because it’s more compact. WebAssembly was designed to be compact, and it can be expressed in a binary form.

Even though gzipped JavaScript is pretty small, the equivalent code in WebAssembly is still likely to be smaller.

This means it takes less time to transfer it between the server and the client. This is especially true over slow networks.

Parsing Link

Once it reaches the browser, JavaScript source gets parsed into an Abstract Syntax Tree.

Browsers often do this lazily, only parsing what they really need to at first and just creating stubs for functions which haven’t been called yet.

From there, the AST is converted to an intermediate representation (called bytecode) that is specific to that JS engine.

In contrast, WebAssembly doesn’t need to go through this transformation because it is already a bytecode. It just needs to be decoded and validated to make sure there aren’t any errors in it.

²⁶

Compiling + Optimizing Link

As I explained before, JavaScript is compiled during the execution of the code. Because types in JavaScript are dynamic, multiple versions of the same code may need to be compiled for different types. This takes time.

In contrast, WebAssembly starts off much closer to machine code. For example, the types are part of the program. This is faster for a few reasons:

• The compiler doesn’t have to spend time running the code to observe what types are being used before it starts compiling optimized code.
• The compiler doesn’t have to compile different versions of the same code based on those different types it observes.
• More optimizations have already been done ahead of time in LLVM. So less work is needed to compile and optimize it.

²⁸

Reoptimizing Link

Sometimes the JIT has to throw out an optimized version of the code and retry it.

This happens when assumptions that the JIT makes based on running code turn out to be incorrect. For example, deoptimization happens when the variables coming into a loop are different than they were in previous iterations, or when a new function is inserted in the prototype chain.

In WebAssembly, things like types are explicit, so the JIT doesn’t need to make assumptions about types based on data it gathers during runtime. This means it doesn’t have to go through reoptimization cycles.

³⁰

Executing Link

It is possible to write JavaScript that executes performantly. To do it, you need to know about the optimizations that the JIT makes.

However, most developers don’t know about JIT internals. Even for those developers who do know about JIT internals, it can be hard to hit the sweet spot. Many coding patterns that people use to make their code more readable (such as abstracting common tasks into functions that work across types) get in the way of the compiler when it’s trying to optimize the code.

Because of this, executing code in WebAssembly is generally faster. Many of the optimizations that JITs make to JavaScript just aren’t necessary with WebAssembly.

In addition, WebAssembly was designed as a compiler target. This means it was designed for compilers to generate, and not for human programmers to write.

Since human programmers don’t need to program it directly, WebAssembly can provide a set of instructions that are more ideal for machines. Depending on what kind of work your code is doing, these instructions run anywhere from 10% to 800% faster.

³²

Garbage Collection Link

In JavaScript, the developer doesn’t have to worry about clearing out old variables from memory when they aren’t needed anymore. Instead, the JS engine does that automatically using something called a garbage collector.

This can be a problem if you want predictable performance, though. You don’t control when the garbage collector does its work, so it may come at an inconvenient time.

For now, WebAssembly does not support garbage collection at all. Memory is managed manually (as it is in languages like C and C++). While this can make programming more difficult for the developer, it does also make performance more consistent.

³⁴

Taken together, these are all reasons why in many cases, WebAssembly will outperform JavaScript when doing the same task.

There are some cases where WebAssembly doesn’t perform as well as expected, and there are also some changes on the horizon that will make it faster. I have covered these future features in more depth³⁶ in another article.

How Does WebAssembly Work? Link

Now that you understand why developers are excited about WebAssembly, let’s look at how it works.

When I was talking about JITs above, I talked about how communicating with the machine is like communicating with an alien.

³⁷

I want to take a look now at how that alien brain works — how the machine’s brain parses and understands the communication coming in to it.

There’s a part of this brain that’s dedicated to the thinking , e.g. arithmetic and logic. There’s also a part of the brain near that which provides short-term memory, and another part that provides longer-term memory.

These different parts have names.

• The part that does the thinking is the Arithmetic-logic Unit (ALU).
• The short term memory is provided by registers.
• The longer term memory is the Random Access Memory (or RAM).

³⁹

The sentences in machine code are called instructions.

What happens when one of these instructions comes into the brain? It gets split up into different parts that mean different things.

The way that this instruction is split up is specific to the wiring of this brain.

For example, this brain might always take bits 4–10 and send them to the ALU. The ALU will figure out, based on the location of ones and zeros, that it needs to add two things together.

This chunk is called the “opcode”, or operation code, because it tells the ALU what operation to perform.

⁴¹

Then this brain would take the next two chunks to determine which two numbers it should add. These would be addresses of the registers.

⁴³

Note the annotations I’ve added above the machine code here, which make it easier for us to understand what’s going on. This is what assembly is. It’s called symbolic machine code. It’s a way for humans to make sense of the machine code.

You can see here there is a pretty direct relationship between the assembly and the machine code for this machine. When you have a different architecture inside of a machine, it is likely to require its own dialect of assembly.

So we don’t just have one target for our translation. Instead, we target many different kinds of machine code. Just as we speak different languages as people, machines speak different languages.

You want to be able to translate any one of these high-level programming languages down to any one of these assembly languages. One way to do this would be to create a whole bunch of different translators that can go from each language to each assembly.

⁴⁵

That’s going to be pretty inefficient. To solve this, most compilers put at least one layer in between. The compiler will take this high-level programming language and translate it into something that’s not quite as high level, but also isn’t working at the level of machine code. And that’s called an intermediate representation (IR).

⁴⁷

This means the compiler can take any one of these higher-level languages and translate it to the one IR language. From there, another part of the compiler can take that IR and compile it down to something specific to the target architecture.

The compiler’s front-end translates the higher-level programming language to the IR. The compiler’s backend goes from IR to the target architecture’s assembly code.

⁴⁹

Where Does WebAssembly Fit? Link

You might think of WebAssembly as just another one of the target assembly languages. That is kind of true, except that each one of those languages (x86, ARM, etc) corresponds to a particular machine architecture.

When you’re delivering code to be executed on the user’s machine across the web, you don’t know what target architecture the code will be running on.

So WebAssembly is a little bit different than other kinds of assembly. It’s a machine language for a conceptual machine, not an actual, physical machine.

Because of this, WebAssembly instructions are sometimes called virtual instructions. They have a much more direct mapping to machine code than JavaScript source code, but they don’t directly correspond to the particular machine code of one specific hardware.

The browser downloads the WebAssembly. Then, it can make the short hop from WebAssembly to that target machine’s assembly code.

⁵¹

To add WebAssembly to your web page, you need to compile it into a .wasm file.

Compiling To .wasm Link

The compiler tool chain that currently has the most support for WebAssembly is called LLVM. There are a number of different front-ends and back-ends that can be plugged into LLVM.

Note: Most WebAssembly module developers will code in languages like C and Rust and then compile to WebAssembly, but there are other ways to create a WebAssembly module. For example, there is an experimental tool that helps you build a WebAssembly module using TypeScript⁵³, or you can code in the text representation of WebAssembly directly⁵⁴.

Let’s say that we wanted to go from C to WebAssembly. We could use the clang front-end to go from C to the LLVM intermediate representation. Once it’s in LLVM’s IR, LLVM understands it, so LLVM can perform some optimizations.

To go from LLVM’s IR to WebAssembly, we need a back-end. There is one that’s currently in progress in the LLVM project. That back-end is most of the way there and should be finalized soon. However, it can be tricky to get it working today.

There’s another tool called Emscripten which is a bit easier to use. It also optionally provides helpful libraries, such as a filesystem backed by IndexDB.

⁵⁵

Regardless of the toolchain you’ve used, the end result is a file that ends in .wasm. Let’s look at how you can use it in your web page.

Loading A .wasm Module In JavaScript Link

The .wasm file is the WebAssembly module, and it can be loaded in JavaScript. As of this moment, the loading process is a little bit complicated.

function fetchAndInstantiate(url, importObject) { return fetch(url).then(response => response.arrayBuffer() ).then(bytes => WebAssembly.instantiate(bytes, importObject) ).then(results => results.instance ); } 

You can see this in more depth in our docs⁵⁷.

We’re working on making this process easier. We expect to make improvements to the toolchain and integrate with existing module bundlers like webpack or loaders like SystemJS. We believe that loading WebAssembly modules can be as easy as as loading JavaScript ones.

There is a major difference between WebAssembly modules and JS modules, though. Currently, functions in WebAssembly can only use WebAssembly types (integers or floating point numbers) as parameters or return values.

⁵⁸

For any data types that are more complex, like strings, you have to use the WebAssembly module’s memory.

If you’ve mostly worked with JavaScript, having direct access to memory is unfamiliar. More performant languages like C, C++, and Rust, tend to have manual memory management. The WebAssembly module’s memory simulates the heap that you would find in those languages.

To do this, it uses something in JavaScript called an ArrayBuffer. The array buffer is an array of bytes. So the indexes of the array serve as memory addresses.

If you want to pass a string between the JavaScript and the WebAssembly, you convert the characters to their character code equivalent. Then you write that into the memory array. Since indexes are integers, an index can be passed in to the WebAssembly function. Thus, the index of the first character of the string can be used as a pointer.

⁶⁰

It’s likely that anybody who’s developing a WebAssembly module to be used by web developers is going to create a wrapper around that module. That way, you as a consumer of the module don’t need to know about memory management.

I’ve explained more about working with WebAssembly modules⁶² in another article.

What’s The Status Of WebAssembly? Link

On February 28, the four major browsers announced their consensus that the MVP of WebAssembly is complete. Firefox turned WebAssembly support on-by-default about a week after that, and Chrome followed the next week. It is also available in preview versions of Edge and Safari.

This provides a stable initial version that browsers can start shipping.

⁶³

This core doesn’t contain all of the features that the community group is planning. Even in the initial release, WebAssembly will be fast. But it should get even faster in the future, through a combination of fixes and new features. I detail some of these features⁶⁵ in another article.

Conclusion Link

With WebAssembly, it is possible to run code on the web faster. There are a number of reasons why WebAssembly code runs faster than its JavaScript equivalent.

• Downloading — it is more compact, so can be faster to download
• Parsing — decoding WebAssembly is faster than parsing JavaScript
• Compiling & optimizing — it takes less time to compile and optimize because more optimizations have been done before the file is pushed to the server, and the code does need to be compiled multiple times for dynamic types
• Re-optimizing — code doesn’t need to be re-optimized because there’s enough information for the compiler to get it right on the first try
• Execution — execution can be faster because WebAssembly instructions are optimized for how the machine thinks
• Garbage Collection — garbage collection is not directly supported by WebAssembly currently, so there is no time spent on GC

What’s currently in browsers is the MVP, which is already fast. It will get even faster over the next few years, as the browsers improve their engines and new features are added to the spec. No one can say for sure what kinds of applications these performance improvements could enable. But if the past is any indication, we can expect to be surprised.

(rb, ms, cm, il)

This article has been republished from Medium⁶⁶.

Footnotes Link

1. 1 https://www.smashingmagazine.com/wp-content/uploads/2017/05/01-wasm_intro05-large-opt.png
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2017/05/01-wasm_intro05-large-opt.png
3. 3 https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
4. 4 https://www.smashingmagazine.com/2017/03/beyond-browser-web-desktop-apps/
5. 5 https://www.smashingmagazine.com/2017/02/designing-html-apis/
6. 6 https://www.smashingmagazine.com/2017/02/experimenting-with-speechsynthesis/
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/05/02-perf_graph05-large-opt.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/05/02-perf_graph05-large-opt.png
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/05/03-perf_graph10-large-opt.png
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/05/03-perf_graph10-large-opt.png
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/05/04-alien03-large-opt.png
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/05/04-alien03-large-opt.png
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/05/05-interp02-large-opt.png
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/05/05-interp02-large-opt.png
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/05/06-compile02-large-opt.png
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/05/06-compile02-large-opt.png
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/05/07-jit09-large-opt.png
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/05/07-jit09-large-opt.png
19. 19 https://hacks.mozilla.org/2017/02/a-crash-course-in-just-in-time-jit-compilers/
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/05/08-diagram_now01-large-opt.png
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/05/08-diagram_now01-large-opt.png
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/05/09-diagram_past01-large-opt.png
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/05/09-diagram_past01-large-opt.png
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/05/10-diagram_future01-large-opt.png
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/05/10-diagram_future01-large-opt.png
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/05/11-diagram_compare02-large-opt.png
27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/05/11-diagram_compare02-large-opt.png
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/05/12-diagram_compare03-large-opt.png
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/05/12-diagram_compare03-large-opt.png
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/05/13-diagram_compare04-large-opt.png
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/05/13-diagram_compare04-large-opt.png
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/05/14-diagram_compare05-large-opt.png
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/05/14-diagram_compare05-large-opt.png
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/05/15-diagram_compare06-large-opt.png
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/05/15-diagram_compare06-large-opt.png
36. 36 https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/05/16-human_alien-large-opt.png
38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/05/16-human_alien-large-opt.png
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/05/17-computer_architecture10-large-opt.png
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/05/17-computer_architecture10-large-opt.png
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/05/18-computer_architecture13-large-opt.png
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/05/18-computer_architecture13-large-opt.png
43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/05/19-computer_architecture17-large-opt.png
44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/05/19-computer_architecture17-large-opt.png
45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/05/20-langs05-large-opt.png
46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/05/20-langs05-large-opt.png
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/05/21-langs06-large-opt.png
48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/05/21-langs06-large-opt.png
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/05/22-langs10-large-opt.png
50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/05/22-langs10-large-opt.png
51. 51 https://www.smashingmagazine.com/wp-content/uploads/2017/05/23-langs08-large-opt.png
52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/05/23-langs08-large-opt.png
53. 53 https://github.com/rsms/wasm-util
54. 54 https://developer.mozilla.org/en-US/docs/WebAssembly/Understanding_the_text_format
55. 55 https://www.smashingmagazine.com/wp-content/uploads/2017/05/24-toolchain07-opt.png
56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/05/24-toolchain07-large-opt.png
57. 57 https://developer.mozilla.org/en-US/docs/WebAssembly
58. 58 https://www.smashingmagazine.com/wp-content/uploads/2017/05/25-memory04-large-opt.png
59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/05/25-memory04-large-opt.png
60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/05/26-memory12-large-opt.png
61. 61 https://www.smashingmagazine.com/wp-content/uploads/2017/05/26-memory12-large-opt.png
62. 62 https://hacks.mozilla.org/2017/02/creating-and-working-with-webassembly-modules/
63. 63 https://www.smashingmagazine.com/wp-content/uploads/2017/05/27-logo_party01-large-opt.png
64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/05/27-logo_party01-large-opt.png
65. 65 https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
66. 66 https://medium.com/@linclark/a9cee6e259ed

↑ Back to topTweet itShare on Facebook

In 2015, Google announced that mobile searches surpassed desktop searches in at least 10 countries. 56% of traffic¹ on major websites comes from mobile. In light of this, Google’s decision to improve the mobile user experience by various means, such as AMP pages² and a dedicated mobile index, comes across as a sound business move.

More than half of the 2 trillion searches³ Google processes each year come from mobile devices. Mobile devices have changed the way we approach search, ushering in new types of habits such as local search, voice search and more. These consumer habits have greatly affected the way search engine providers think about user search intent.

A new type of mobile improvement was rolled out by Google. The search giant has decided to launch a war against interstitials that ruin the user experience. As a result, any website found guilty of showing intrusive popups, banners or overlays (called interstitials) will see its content demoted in Google’s mobile search results. We’ll be looking at what’s being penalized, what’s allowed and some workarounds to help you cope with this new penalty.

Further Reading on SmashingMag: Link

• Is Your Responsive Design Working? Google Analytics Will Tell You⁴
• Everything You Need To Know About Google’s Accelerated Mobile Pages⁵
• World Wide Web, Not Wealthy Western Web⁶
• Google’s Mobilegeddon Aftermath: Eight Months Into A Better Mobile Web⁷

Mobile Reality Link

Two years ago, Google introduced a mobile-friendly label⁸ as it began prioritizing mobile websites. The aim was to push websites that offer a substandard user experience to improve their design, code and content. These guidelines are updated quite often as Google aims to keep the mobile user experience center stage:

• Mobile-Friendly Test⁹, Google Search Console
• AMP¹⁰
• “Guidelines for Mobile Web Development¹¹,” Smashing Magazine
• “Responsive Web Design Basics¹²,” Pete LePage, Web Fundamentals, Google Developers
• “Enabling Deep Links for App Content¹³,” Android Developers
• “Google Algorithm Change History¹⁴,” Moz

With a dramatically levelled playing field, various elements are fighting to be displayed on one small screen. Coupons, offers, newsletter registration, ads, text, photos, social sharing buttons, and live chat are all vying for some valuable mobile screen space. Often, the visitor pays the price as their mobile experience becomes a confusing mess. Google’s latest penalty aims to change how we think about mobile advertising.

Introducing The Intrusive Interstitial Penalty Link

One recent change made this year is the intrusive interstitial update¹⁵. This algorithm update has one mission: to penalize for intrusive popup ads that affect the mobile user experience. The update rolled out earlier this year. Certain websites saw their mobile rankings in Google lowered.

Decrypting The Intrusive Interstitial Update Link

First and foremost, it’s a mobile popup penalty. Secondly, it’s an intrusive popup penalty. Google wants to make sure that ads and popups do not interfere with the user experience on a mobile screen. The intent behind devaluing pages with popups and overlays that take up most of the screen is to help users access the content they’ve requested in the first place.

What Is The Impact Of This Latest Update? Link

Google will no longer consider pages with intrusive interstitials as being mobile-friendly. Bottom line: Obstructing content on mobile with ads or other popups is against Google’s guidelines. The main target of this update is overlays that gray out the content, making the content inaccessible for a few seconds or until the user miraculously manages to tap the minuscule “X” with their sausage fingers to dismiss the ads. Ads displayed over content are no longer acceptable¹⁶ on mobile. This includes popups that appear when you load the page from Google or when you scroll down. For many websites, playing according to Google’s rules means removing all barriers¹⁷ that could prevent the user from reading the content on the page at any time.

What Is An Interstitial? Link

Interstitial spaces can be defined as a type of “web page” that appears before or after the page (in a website or an app) expected by the user. Essentially, it is something that blocks out the website or app’s main content. These spaces have served as a promotional tool for many online marketers. They can contain advertisements, surveys, newsletter signup forms, coupons and other various calls to action.

What Constitutes An Intrusive Interstitial? Link

Intrusive interstitials tend to block most or all of a page, leading to a frustrating experience for desktop and mobile users alike. These ads hinder the experience because they are unexpected and block the content that users seek. On the desktop, they’re annoying at best, but on mobile, intrusive interstitials can ruin the entire experience. Ever had to deal with popups gone rogue on mobile? Google has been relatively straightforward in its definition of what constitutes an intrusive interstitial. A few types of interstitials are problematic, as defined by the new guidelines¹⁸:

¹⁹

• a popup or modal window that blocks most or all of the content on a page (this is basically a full-screen interstitial above the header);
• a standalone interstitial that’s not responsive and that blocks the content;
• a layout in which the content above the fold has the look and feel of an interstitial and requires dismissal or scrolling in order for the user to reach the main content beneath the fold.

If your popups cover the main content shown on the screen, pop up without user interaction or require a dismissal before disappearing, chances are that they will trigger an algorithmic penalty.

Popups that incite users to choose their country or their preferred language are also targets because they fit the description above of what constitutes an intrusive interstitial. They bother readers and are not a necessity.

What’s Not Intrusive? Link

Not all interstitials are targeted by this penalty. Some exceptions exist, such as interstitials that are in place for legal or ethical reasons. The following popups do not require a change of size, design or position within a page:

²¹

• age-verification blockers that act as a shield for certain content, such as alcohol-related or adult content;
• cookies that use popups that serve as consent notifications as required by the EU;
• any other type of legally required popup.

Gray Area Link

The official guidelines provided by Google are pretty vague at times. The company’s definition of what constitutes an intrusive interstitial is not clearcut. Many elements are not addressed, such as:

• sticky sidebars,
• related posts,
• share buttons,
• live chat boxes,
• coupon popups.

The jury is still out on whether these elements will be targeted by the algorithm update, even if they comply with the guidelines on interstitials. Navigating this gray area can be tricky. If you want to come out on top, we recommend designing these elements in a way that ensures they do not cover any of the page’s actual content. Making sure these notifications do not hinder the user experience can go a long way towards avoiding a penalty.

What Is Still Permitted (But Intrusive Nonetheless) Link

Make no mistake, as of 10 January 2017, interstitials are a new ranking signal for mobile SEO. It doesn’t necessarily mean that all types of popups should be banned.

Intrusive Popups Are Still OK on Desktop Link

This penalty targets mobile issues. Overlays, popups and other types of interstitials will live another day on desktop.

²³

Interstitials Triggered by Exit Intent Are Still Allowed Link

Here is Google’s John Mueller’s advice on interstitials triggered by exit intent:

At the moment, those wouldn’t count. What we’re looking for is, really, interstitials that show up on the interaction between the search click and going through the page and seeing the content. So, that’s kind of the place we’re looking for those interstitials. What you do afterwards, like if someone clicks on stuff within your website or closes the tab or something like that, then that’s kind of between you and the user.

Page-to-Page Interstitials Will Not Be Penalized Link

Google is not looking to penalize all pages with interstitials, only the ones that searchers could land on from search results. It’s still OK to display an interstitial when a user navigates from one of your pages to another. If a user can find a page by searching for something on Google, then you’ll need to ensure that this page has no intrusive interstitials. If after landing on this page, the user decides to navigate to another page on the website that is not listed by Google, then interstitials would be allowed on that page²⁵. Sounds a bit convoluted, but this has been confirmed by Google.

Will You Be Penalized? Link

Google’s main objective is to make the web more accessible, intuitive and usable, especially for mobile users. If your popups serve a real purpose that add value for the user, chances are you should be OK.

How The Penalty Works? Link

This mobile interstitial penalty is rolling out on a recrawling basis²⁶. Basically, the next time Google’s bot crawls your website after 10 January 2017, it will evaluate the interstitials present on mobile. The penalty could hurt, but so far the reported impact has been minimal²⁷.

How To Identify Intrusive Interstitials Link

Auditing your popups is a great way to determine whether your mobile website is compliant. Start by reviewing the mobile popups, because desktop popups are not going to be penalized. Prefer small messages such as banners, inlines and slide-ins for mobile pages.

²⁸

Testing Tool Link

Google has stated that it will not release an official tool to test websites. However, there is a tool out there, Interstitial Penalty Check²⁹, that uses image recognition to identify potential interstitials on your pages. It measures how much space popups take on the screen to flag the ones at risk.

Audit Your Popups Link

• Identify required interstitials, such as age-verification popups and cookie notifications.
• Identify all other popups, and evaluate them according to the amount of space they take up.
• Make note of any third-party scripts present on your website that might trigger popups. You will often find these if you use a CMS.
• For WordPress users, check your plugins. Some plugins used to display popup messages for coupons, membership offers, promotions and other types of ads need to be reviewed. You might have to adjust the sizes using the plugins’ settings.

Interstitial Design Guidelines Link

Any banners that take up a “reasonable amount of space” will not be targeted. That’s great news! However, no exact guidelines have been communicated by Google. The recommended size is 15% or less, even in landscape mode, because it still allows readers to access several lines of text.

Keep In Mind What Google Is Looking For In A Positive User Experience Link

Popups aren’t being banned, but marketing efforts will have to adapt to these new restrictions. Let’s rephrase that: Marketing efforts will have to respect the user’s screen space. Try to redesign any interstitials that were previously considered essential to marketing efforts. You can replace them with a link to a separate page or an inline ad, for example.

For instance, language-selection interstitials³⁰ can be phased out, in favor of a banner on the website. But first evaluate whether such an element is worth that much screen space: Users arrive with a linguistic context already if they’ve come from Google.

Workarounds Link

If your website suffers a significant drop-off in conversion following the removal of some interstitials, then you’ll have to work around the issue. Luckily for you, only pages listed in Google’s search results are being targeted. If a user navigates to another page on your website, then a popup placed there would not be a problem for Google. The entry page is the issue for the search engine. This isn’t particularly recommended, but if interstitials remain the best way to convert users for your website, then consider keeping them on the website (and away from Google by placing a no-index tag in your code). Keep in mind that this would mean cutting off organic traffic from Google to that page.

News From The War On Interstitials Link

False Positives Penalties Link

Some websites have been hit by Google’s mobile interstitial penalty even though they were adhering to the guidelines³¹. Other websites that should have been affected have not encountered any negative impact yet. So, what do you do if you’ve been hit unfairly? Head on over to the Google Webmaster Help forum to give feedback to the Google team.

How to Recover From a Penalty? Link

If your traffic has suffered because of this penalty, we recommend auditing your popups and removing the ones deemed intrusive. Once that’s done, you’ll have to wait until Google recrawls your pages. You can also submit your pages via the Google Search Console’s fetch and submit tool to kickstart the recrawling effort a bit. This should remove the demotion³² in mobile ranking inflicted on your website.

Google’s John Mueller confirms that the demotion would be removed in real time when the pages are recrawled and reindexed. This penalty is doled out in real time, meaning that recovery will depend on how frequently Google indexes those pages. For most websites, though, “real time” means waiting until each individual page is crawled by Google and the demotion is removed.

Adapt Or Die: Looking Into New Strategies Link

Yes, popups are frustrating, but companies use them because they are effective. SumoMe³³ shares recent findings that establish the interstitial’s track record: An average conversion rate is 3.09%, versus 9.28% on average for high-performing popups.

Removing revenue-generating interstitials could hurt websites at first, but losing organic search traffic could hurt their revenues even more. Designers, developers and marketers must work together to find new, non-intrusive ways to generate revenue. A sound strategy would be to leverage content marketing to educate audiences and guide them through the buying process.

This means moving away from interruption marketing towards permission marketing. The first can be defined as an annoying version of the traditional way of doing marketing via advertising, promotion and sales, whereas the latter is about promoting and selling a product to a potential client who explicitly agrees to receive marketing information. Google is aware that many websites are supported by ads.

Its AdSense is based in part on this revenue model. There are pros and cons to this new update. It could mean more time on website, more page views and a lower bounce rate, but it could still harm revenue in the short to medium term. Google representatives have stated publicly that they don’t want confusing ads — so, if there’s any question about what is an ad and what is the main content, you could have a problem. Therefore, label your ads as sponsored content, make them unobtrusive, and you should be fine.

In the meantime, audit your popups, cookie notifications, overlays and big banners to make sure they comply with Google’s new guidelines. Make sure they don’t take up more than 15% of the screen to avoid a penalty. If you do get penalized, don’t panic; fix the issues, and wait for Google’s bot to visit your website again. The bot should notice your efforts and remove the penalty.

(da, vf, yk, al, il)

Footnotes Link

1. 1 https://www.similarweb.com/corp/the-state-of-mobile-web-in-the-us-2015/
2. 2 https://www.smashingmagazine.com/2016/02/everything-about-google-accelerated-mobile-pages/
3. 3 http://searchengineland.com/google-now-handles-2-999-trillion-searches-per-year-250247
4. 4 https://www.smashingmagazine.com/2014/08/responsive-web-design-google-analytics/
5. 5 https://www.smashingmagazine.com/2016/02/everything-about-google-accelerated-mobile-pages/
6. 6 https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/
7. 7 https://www.smashingmagazine.com/2016/03/googles-mobilegeddon-aftermath-eight-months-better-mobile-web/
8. 8 http://searchengineland.com/google-drops-mobile-friendly-label-keeps-mobile-friendly-ranking-algorithm-257245
9. 9 https://search.google.com/search-console/mobile-friendly
10. 10 https://www.ampproject.org/
11. 11 https://www.smashingmagazine.com/guidelines-for-mobile-web-development/
12. 12 https://developers.google.com/web/fundamentals/design-and-ui/responsive/
13. 13 https://developer.android.com/training/app-indexing/deep-linking.html
14. 14 https://moz.com/google-algorithm-change
15. 15 https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html
16. 16 http://www.theverge.com/2016/8/23/12610890/google-search-punish-pop-ups-interstitial-ads
17. 17 https://www.searchenginejournal.com/counts-intrusive-interstitial/180023/
18. 18 https://www.searchenginejournal.com/counts-intrusive-interstitial/180023/
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/04/intrusive-interstitials-large-opt-1.png
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/04/intrusive-interstitials-large-opt-1.png
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/04/non-intrusive-interstitials-large-opt.png
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/04/non-intrusive-interstitials-large-opt.png
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/04/atlas-obscura-desktop-overlay-large-opt.png
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/04/atlas-obscura-desktop-overlay-large-opt.png
25. 25 https://www.searchenginejournal.com/google-mobile-interstitials-penalty/183216/
26. 26 https://www.seroundtable.com/february-2017-google-webmaster-report-23367.html
27. 27 https://www.searchenginejournal.com/51-havent-felt-effects-googles-mobile-interstitials-penalty-data/185008/
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/04/atlas-obscura-mobile-interstitial-preview-opt.png
29. 29 http://www.interstitialpenaltycheck.com
30. 30 http://www.thesempost.com/country-language-selector-popups-google/
31. 31 https://www.seroundtable.com/false-positive-google-intrusive-interstitials-mobile-penalty-23342.html
32. 32 http://www.thesempost.com/googles-mobile-interstitial-demotion-updates-page-recrawled/
33. 33 https://sumome.com/stories/pop-up-examples

↑ Back to topTweet itShare on Facebook

Why write requirements? Well, let’s imagine you want to produce a mobile app, but you don’t have the programming skills. So, you find a developer who can build the app for you, and you describe the idea to him. Surprisingly, when he showcases the app for the first time, you see that it is not exactly what you want. Why? Because you didn’t provide enough detail when describing the idea.

To prevent this from happening, you need to formalize the idea, shape it into something less vague. The best way to do that is to write a requirements document and share it with the developer. A requirements document describes how you see the result of the development process, thus making sure that you and the developer are on the same page.

In this article, we will outline the most common approaches to writing requirements documents. You will learn the basic steps of writing mobile application requirements and what a good requirements document looks like.

Further Reading on SmashingMag: Link

• What You Should Know About The App Design Process¹
• Creating Wireframes And Prototypes With InDesign²
• The Skeptic’s Guide To Low-Fidelity Prototyping³
• UX Sketching And Wireframing Templates For Mobile Projects (Free Download)⁴

How To Approach The Writing Link

A carefully crafted requirements document eliminates ambiguity, thus ensuring that the developer does exactly what needs to be done. In addition, the document gives a clear picture of the scope of the work, enabling the developer to better assess the time and effort required. But how do we create a good document? Below are some tips that our mobile team at Polecat⁵ follows when crafting requirements.

1. Describe the Idea in General Link

We believe that a proper description of the idea should fit in one sentence. The sentence may include a core feature of the application, so that the reader understands instantly what the app is about. For a calorie-tracking mobile application, it could be, “An app to track calorie consumption to help those who care about their weight.”

Hint: Gua Tabidze shares a few models that others use⁶ to describe an idea.

2. Consider the Sequence Link

Study basic navigation patterns⁷, and describe your application in the same sequence that users would experience while exploring it. Once the idea part is done, describe the first steps of the application, such as the onboarding screens and user registration.

Then, move on to what goes next, such as the application’s home screen. This approach will give the reader a sense of what the user’s journey would look like.

At the end, don’t forget about basic features and screens such as the privacy policy and the “forgot password” feature.

3. Review Existing Applications in the Stores Link

Review existing applications in Apple’s App Store and Google Play, and refer to them when describing your app. If you like how the “forgot password” feature works in applications A and B, put it in the requirements document.

4. Abstract Away From Detail Link

Focus on the features of the application, and skip details such as the color of a button. Most app users do not care about such details. What they do care about is whether your application helps to solve their problem. So, when writing requirements, concentrate on things that the user should be able to do in the app.

5. Prioritize Features Link

Convey which features are more important than others, so that the developer knows what to focus on first. We usually follow the MoSCoW method⁸, marking items with “Must,” “Should,” “Could” and “Won’t” levels of priority.

6. Complement Text With Wireframes Link

Create wireframes of the screens of the application to accompany your textual description of them. If you have more than four wireframe screens, then drawing a screen map makes sense. We’ll show a screen map later in this article.

Requirements Formats Link

Now that you know how to write the requirements, you’ll need to choose an appropriate format for the document. There are a few basic formats for writing the requirements for a mobile app, such as a functional specification document (FSD), user stories and wireframes.

Functional Specification Document Link

An FSD⁹ is probably the default format in the software development industry. It consists of a standard list of items that cover what the product should do and how it should do it.

Let’s take a simple calculator application and describe its features as an FSD:

• Application screen presents a digital keyboard with additional buttons for basic arithmetic operations (addition, subtraction, multiplication, division) and a result button (marked with “=”).
• Tapping on a digit button adds it to the display section of the screen. Each new digit is added to the right side of the number.
• Tapping on an operation button causes the current number shown in the display section to be added to the memory. It also clears the display section for the next number.
• Tapping on the display-result button combines the number in memory with the one in the display section according to the operation requested previously. The resulting number is shown in the display section of the screen.

As you can see, this format requires quite a detailed description of the product because the description will be used by both the business and the developers. It ensures that all participants are on the same page.

The person who composes the FSD should have strong experience in software development and should know the specifics of the mobile or other platform for which you are building. Also, because of the high level of detail required, creating and polishing such a document usually takes a decent amount of time.

User Stories Link

A user story¹⁰ is less formal than an FSD yet still very powerful. It lists the things that the user can do in the application and is described from the user’s perspective. The document could also briefly explain why the user would want to do it, if that’s not obvious.

Let’s take our calculator example and add a few other features, describing them as a user story:

• As a user, I want to be able to change the number notation from decimal to exponential (and vice versa), so that I can work with very small or very large numbers.
• As a user, I want to be able to export a calculation’s history as a PDF file to share with my colleagues.

Because of the explanation, such a format provides not only a technical overview of the requirements, but also a good business case for them. Thus, if a feature is identified that is not critical to the business, you could decide either to completely remove it from the scope or to postpone it to a future release.

Using this format, you can easily split one story into multiple sub-stories to provide more detail. For example, we could split the PDF-exporting story into the following sub-stories:

• As a user, I want to be able to tap on the sharing button (top right of the screen) to see my options (sharing as PDF, text, image).
• Once I select a sharing option, I want to select the calculation timeframe that will be shared, using iOS’ date picker¹¹.

Because of the simplicity and non-technical nature of user stories, in most cases, a manager cannot simply ask a developer to implement a particular user story. Turning a story into a task that can be added to a task tracker requires further discussion and detailing between the manager and technical leader.

User stories have become one of the most convenient and popular formats because of their simplicity and flexibility.

Sketches and Wireframes Link

Another way to outline an application’s requirements is to visualize them in sketches or wireframes. With iOS development, around 70% of development time is spent on interface implementation, so having all of the screens in front of you would give you a good sense of what needs to be done and the scope of the work.

¹²

Creating a relevant set of wireframes for a mobile application requires you to know the basics of the user experience: how screens can be linked with each other, which states each screen can have, and how the application will behave when it is opened from a push notification.

Mixing Formats Link

Don’t be afraid to mix formats. By doing this properly, you take advantage of the strengths of each format. In our experience, mixing user stories and wireframes makes the most sense. While the user stories describe the features of the application and provide a business case for them, the wireframes show how these features would appear on the screens of the app. In addition, putting together user stories and wireframes would take you less time than writing an FSD, with all of its accompanying detail and descriptions of the interactions.

Start by sketching out wireframes for the application. Once the wireframes are done, add two or more user stories for each screen, describing what the user can do on that screen. We’ve found this approach to be the most appropriate for mobile application development, so we use it a lot.

Let’s Practice Link

I’ll take our What I Eat application as an example. I’ll compose the requirements document as if we were developing the application from scratch.

First, let’s formalize the idea using Steve Blank’s XYZ pattern:¹⁴ “We help X do Y by doing Z.” The premise of the application is to enable users to take control of what they eat during the day and of their calorie intake. According to the XYZ method: “What I Eat helps those who care about their weight to track calorie consumption by providing functionality for a simple meal log.”

As mentioned, mixing user stories and wireframes works best for us, so why not use them here?

The next step is to describe the What I Eat app as user stories, screen by screen. We’ll begin with the application’s start and home screen:

• As a user, I want to open the app and instantly see today’s meal log and the calories consumed.
• I want to be able to quickly add new meals and calories that I’ve just consumed.
• I also want quick access to the in-app calendar to view my meal logs from previous days.

To avoid any ambiguity, we’ll create a wireframe for this screen.

¹⁵

As you can see, we weren’t able to put the “Add new meal” functionality on the home screen. Instead, we added a button to navigate to another screen that presents this feature. Now, we need to put together user stories for this new screen:

• I want to type in the name of the meal I’ve just had.
• Along with the name of the meal, I want to enter the number of calories.

¹⁶

The home screen has a button that opens the calendar. Because there are many other calendar apps, checking their designs first makes sense. We like the iPhone’s default calendar app, so we will use it as a reference.

• As a user, I want to be able to quickly select a date in the current month.
• When selecting a date, I want to see a list of meals for that date below, like in the iPhone’s calendar app.
• I want to be able to switch to the next or previous month.

We will also put a piece of the iPhone calendar’s user interface in the wireframe.

¹⁷

Finally, we need to add some settings to the app.

• I want to be able to enable and disable iCloud backups for my meal records.
• I want to be able to enable and disable daily push notifications that remind me to track my calorie intake.

¹⁸

Phew! Almost done. The final step is to put the wireframes and user stories together in one document, with each wireframe and its respective story on its own page.

¹⁹

In addition, we can draw a map to visualize how the screens are connected to each other. We’ll use RealtimeBoard²² for that.

²³

In doing the screen map, we realize that there is no button to go to the settings screen, so we’ll add that to the home screen.

Conclusion Link

We have created two documents: a PDF with user stories and wireframes, and a screen map that complements the PDF. Together, they describe in detail what features the application should have. We can go ahead and send that to our developer. This time, the application he delivers will correlate with your vision.

Generally speaking, writing a requirements document is mostly about conveying your vision to the rest of the team. Don’t limit yourself to the methodology described above. Feel free to experiment and find the solution that works best for you.

Resources Link

Delve deeper into the subject with the following resources:

• Story Splitting Cheat Sheet²⁵ (PDF, 0.25 MB)
• 10 Tips for Writing Good User Stories²⁶, Roman Pichler
• The Wireframe Perfectionist’s Guide²⁷, Edric Lapniramai, Smashing Magazine
• Designing Features Using Job Stories²⁸, Alan Klement, Intercom

We’d love to hear about your approach to creating requirements documents. Please share your thoughts in the comments.

(da, vf, yk, al, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/2016/11/what-everyone-should-know-about-the-process-behind-app-design/
2. 2 https://www.smashingmagazine.com/2013/03/creating-wireframes-and-prototypes-with-indesign/
3. 3 https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/
4. 4 https://www.smashingmagazine.com/2012/09/free-download-ux-sketching-wireframing-templates-mobile/
5. 5 https://www.ipolecat.com/
6. 6 https://medium.com/@gtabidze/describe-your-idea-framework-2bfca3dc6ec9#.71ds2q58r
7. 7 https://developer.apple.com/ios/human-interface-guidelines/interaction/navigation/
8. 8 https://en.wikipedia.org/wiki/MoSCoW_method
9. 9 https://en.wikipedia.org/wiki/Functional_specification
10. 10 https://en.wikipedia.org/wiki/User_story
11. 11 https://developer.apple.com/ios/human-interface-guidelines/ui-controls/pickers/
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/03/1_calculator-mockup_preview_opt.png
13. 13 https://balsamiq.com
14. 14 https://medium.com/@gtabidze/describe-your-idea-framework-2bfca3dc6ec9#.71ds2q58r
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/03/4_wie-home-screen_preview_opt.png
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/03/2_wie-add-meal_preview_opt.png
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/03/3_wie-calendar_preview_opt.png
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/03/6_wie-settings_preview_opt.png
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/03/7_wireframes-first-page_large_opt.png
20. 20 http://provide.smashingmagazine.com/what-i-eat-full.pdf
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/03/7_wireframes-first-page_large_opt.png
22. 22 https://realtimeboard.com/
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/03/5_wie-map_large_opt.png
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/03/5_wie-map_large_opt.png
25. 25 http://agileforall.com/wp-content/uploads/2009/10/Story-Splitting-Cheat-Sheet.pdf
26. 26 http://www.romanpichler.com/blog/10-tips-writing-good-user-stories/
27. 27 https://www.smashingmagazine.com/2016/11/wireframe-perfectionist-guide/
28. 28 https://blog.intercom.com/using-job-stories-design-features-ui-ux/

↑ Back to topTweet itShare on Facebook

In a world between building accessible interfaces, optimizing the experiences for users, and big businesses profiting from this, we need to find a way to use our knowledge meaningfully. When we read that even the engineers who built it don’t know how their autonomous car algorithm works or that the biggest library of books that mankind ever saw is in the hand of one single company and not accessible to anyone, we might lose our faith in what we do as developers.

But then, on the other hand, we stumble across stories about accessible smart cities or about companies that embrace full honesty in their culture. There are amazing examples of how we can pursue meaningful work and build a better future. Let’s not let negative news get us down, but let’s embrace them as a reason to change for the better instead.

Further Reading on SmashingMag: Link

• 30 Usability Issues To Be Aware Of¹
• Applications Of Machine Learning For Designers²
• A Simple Workflow From Development To Deployment³
• Assuming Leadership In Your Design Agency⁴

General Link

• Matt Reiferson shares the story of how Buzzfeed transformed its release process. Now they can easily deploy more than 150 times a day⁵.
• Matthias Ott reminds us of the web for everyone and how you can set an example by turning away from centralized silos⁶ that only serve business interests but not the users. The first step towards a more decentralized web.

Concept & Design Link

• Jessica Chen analyzed the Meetup app and now presents the usability issues she found and how they could be fixed⁷. A lot of them are common mistakes we often make when designing and coding our applications.

⁸

Tools & Workflows Link

• Ilya Pirozhenko wrote a nice tutorial on how you can search external document files (like PDF or Word) with Elastic Search¹¹.

Security Link

• TLS1.3 is a pretty huge rewrite of the specification and the draft for it is now available. Matt Caswell shares how you can use it already today with OpenSSL¹².

Privacy Link

• Lily Hay Newman shares some new insights into how a lot of apps listen to your phone’s microphone for marketing purposes¹³ by setting up ultrasonic beacons.

Accessibility Link

• The vision of smart cities isn’t new, but this article focuses on making them accessible¹⁴.

JavaScript Link

• Prepack¹⁷¹⁵ is a JavaScript source code optimizer that tries to simplify your code on the compile-time to make it faster on the run-time. By pre-resolving calculations and assignments where possible, for example.

¹⁶

Going Beyond… Link

• Maciej Ceglowski published a transcript of his new talk “Build a Better Monster¹⁹” in which he describes how the Internet’s economic basis is built upon surveillance. He shows who makes money with user data, how this influences people and politics, and why it’s so hard (but also so important) to face and change this practice of making money of other people.
• Nathan Kontny shares a nice story on why honesty is the best policy²⁰ you can establish, both as an individual and as a company.
• Will Knight questions the dark secret at the heart of Artificial Intelligence (AI)²¹: The algorithms fuelling AI-driven technologies are often uncontrolled, and even engineers don’t really know what they’ll do and how they’ll decide things.
• Google scanned millions of paper books, and hardly any of them are available to anyone. It’s the result of a project where Google ignored copyrights in an attempt to build a book search and snippet library. This article summarizes the whole story behind the project²² and shows interesting insights into what Google does in the background and how copyright protects authors of such unauthorized use of their material. Google Books — probably the biggest and most controversial book library on our planet.

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.smashingmagazine.com/2007/10/30-usability-issues-to-be-aware-of/
2. 2 https://www.smashingmagazine.com/2017/04/applications-machine-learning-designers/
3. 3 https://www.smashingmagazine.com/2015/07/development-to-deployment-workflow/
4. 4 https://www.smashingmagazine.com/2011/11/assuming-leadership-design-agency/
5. 5 https://tech.buzzfeed.com/deploy-with-haste-the-story-of-rig-ca9a58b5719a
6. 6 https://matthiasott.com/articles/going-indie-reclaiming-content
7. 7 https://uxdesign.cc/meetup-a-usability-case-study-e909c33f1e3e
8. 8 https://uxdesign.cc/meetup-a-usability-case-study-e909c33f1e3e
9. 9 https://uxdesign.cc/meetup-a-usability-case-study-e909c33f1e3e
10. 10 https://uxdesign.cc/meetup-a-usability-case-study-e909c33f1e3e
11. 11 https://blog.ambar.cloud/ingesting-documents-pdf-word-txt-etc-into-elasticsearch/
12. 12 https://www.openssl.org/blog/blog/2017/05/04/tlsv1.3/
13. 13 https://www.wired.com/2017/05/hundreds-apps-can-listen-beacons-cant-hear/
14. 14 http://blog.barrierbreak.com/2017/05/02/what-do-we-mean-by-accessible-smart-cities/
15. 15 https://prepack.io/
16. 16 https://prepack.io/
17. 17 https://prepack.io/
18. 18 https://prepack.io/
19. 19 http://idlewords.com/talks/build_a_better_monster.htm
20. 20 https://m.signalvnoise.com/honesty-is-the-best-policy-1e0fbfcd461b
21. 21 https://www.technologyreview.com/s/604087/the-dark-secret-at-the-heart-of-ai/
22. 22 https://www.theatlantic.com/technology/archive/2017/04/the-tragedy-of-google-books/523320/
23. 23 https://wdrl.info/donate
24. 24 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook

Can you believe it is May already? Time flies! Here in Belgium, spring has arrived and has brought along its bright colors, the delicate odours of blooming flowers, as well as the cheerful chirping of birds. I try to soak it all in as this is my favorite time of the year.

On a related note, if we only looked closer, we would find gems of inspiration in the things around us. For me, nature is my personal and biggest gem. What’s yours?

Further Reading on SmashingMag: Link

• Finding Inspiration In Uncommon Sources: 12 Places To Look¹
• The Story Of Scandinavian Design: Combining Function and Aesthetics²
• Showcase Of Web Design In Poland³
• Massive Collection of Nature Inspired Typography⁴

Sky Dining Link

Great color palette and love all the gradient mesh work in this illustration.

⁵

Spark Of Science Link

Still shot of short film. Beautiful perspective.

⁸

Perfect Morning — Dark Hedges Link

Perfect morning light at the Dark Hedges, Northern Ireland.

¹¹

Facebook Events Link

One part of a series of illustrations for the inaugural set of artwork launched for Facebook Event themes. Special color combination.

¹⁴

Canlis Matchbooks Link

Beautiful colours that are being used here. The eyes draw you in.

¹⁷

San Antonio Magazine Link

Lovely combination of type and illustrations. Beautiful extrude 3D effect too. It adds this perfect contrast.

²⁰

Anciados Link

Adoring the simplicity of all this. Just the basics so that your mind fills in the rest.

²³

Summer Is Crazy Link

The special style of Sami Viljanto is an eye-catcher.

²⁶

Packing For Mexico Link

Such a great vibe due to the way the fills are done with this particular pencil stroke effect.

²⁹

Neutron Camper Link

Magnificent reproduction of the 1940s advertisement vibe. The entire piece was handpainted using digital paint brushes on a Cintiq tablet, and then a texture was applied created by an old, scratched up sheet of metal and a grain filter.

³²

Smashmallow Link

Packaging illustration for 7 flavour designs for Smashmallow, all natural, organic sugar, gluten-free marshmallow snacks. The others are lovely too. Make sure to check them out!

³⁵

Can’t Hide, Kampina Link

Very nice capture! A scenery that I always hope to encounter too when I’m out on my bicycle.

³⁸

The Night Ocean Link

What a great book cover! Brilliant usage of lines that translate the title so well.

⁴¹

Ebola Crisis Link

A warm atmosphere in this illustration. Great patterns on the dresses and brilliant colors that suit the mood. The threat is hidden in the shape of the shadow. Very clever.

⁴⁴

Hearts In Atlantis Link

Inspired by the film of Stephen King’s best seller with the same name. Nice detail that the hat is found on the heart. Such perfect soft blue tones to create the shapes of the ice.

⁴⁷

Horse Vespa Link

Love this subtly absurd and boldly colored illustration.

⁵⁰

I See You Link

The little details that make this shine are the eyes that you see in the binoculars.

⁵³

Stanford Medical Wellness Link

Beautiful Pallet! Great textures too.

⁵⁶

Playa Game Link

All the plants are so nicely executed. Also loving the female running and how the waves are drawn.

⁵⁹

Banking Poster Link

So much greatness in this.

⁶²

Testing Crew Link

Nice editorial image. The line drawings in the back are clever. Love this combo of styles.

⁶⁵

Summer Night Link

Great job on the light effect by using (I assume?) the moon as the light source and the use of white and black for the shadows. This high contrast effect is just perfect.

⁶⁸

Cats Love Tables Link

Maria’s intricately patterned illustrations made with a blend of colour pencils, markers, acrylic and watercolour on paper is what made me pick this one. The remarkable part is that she goes straight to paper without sketches. “I usually draw pretty quickly, I never prepare sketches, I go straight to the paper. I like it to be intuitive, to feel that the hand is almost possessed and drawing by itself, not letting the head think about every movement.”

⁷¹

Taco Friday! Link

Great for studying the texture and patterns usage. Beautiful retro style too!

⁷⁴

Jennifer Loiselle Link

Great idea to fill the figure with a square grid. Fits perfectly with all the other ‘sharp’ elements.

⁷⁷

Logan Link

So much energy in this illustration. Great colors as well.

⁸⁰

Cycling Pinball Link

Wouldn’t mind having a go at this pinball machine created by Ellen Schofield. Such beautiful details!

⁸³

Tycho-Terje Link

Another lovely poster from Scott Hansen. Many would proudly hang this one on their wall I think.

⁸⁶

Panda Express Link

One morning you wake up and think, what if I draw a chubby panda bear riding a bike. I’m sure it would look funny. It does 🙂 This is so well executed.

⁸⁹

Byron Bay Link

Amazing sunset at Byron Bay. Such rich colors!

⁹²

Early Morning Ride Link

Away from all traffic congestion, just focusing on that magical moment when the sun comes up. Great times, especially with friends!

⁹⁵

The Trouble With TOO Much Tech Link

Illustration for the Wallstreet Journal in a piece about the trouble with too much tech. Great use of mid-century era’s furniture to create a wonderful composition.

⁹⁸

Coffeehood Brand Assets Link

Nice colors and great font pairings. Beautiful inspiring stuff!

¹⁰¹

Earth Day 22 April Link

Nice set of colors to celebrate our beautiful planet.

¹⁰⁴

United Stripes Of America Link

Great looking characters.

¹⁰⁷

Love Songs (Weekend Magazine) Link

Love the clean lines, forms and the smooth perspective.

¹¹⁰

Are Your Friends Making You Fat? Link

Inspiring usage of vivid colors without being too overwhelming.

¹¹³

Firenze Link

Very abstract and modern. Love the subtle gradients that create this subtle depth effect.

¹¹⁶

Sydney Word By Word Link

The colorful style of the Australian agency WBYK. Very eye-catching!

¹¹⁹

Northwest Airlines Fleet Link

I’ve always admired those vintage illustrated ads. This is one is from 1957 for the Northwest Airlines Fleet.

¹²²

164 WEST 136TH ST. Link

It has been a while since I last visited ‘The Windows of New York’. Here’s the one from 164 WEST 136TH ST. Harlem.

¹²⁵

Derwentwater Link

A dramatic sky over Derwentwater in the Lake District National Park in North West England. Thankfully Chris Upton was on hand with his camera.

¹²⁸

Type Man Link

Lovely combination of 2D and 3D. Beautiful composition.

¹³¹

Melt Link

Love the merge/melt effect.

¹³⁴

Phantom Manor Link

This photo of Phantom Manor, taken in Disneyland Paris, could be directly used for a horror movie poster.

¹³⁷

It’s Like A Jungle Sometimes Link

Wonderful set of colors being used in this one. Bonus points for those that think “hmmm, this title rings a bell”.

¹⁴⁰

Self-Employment Link

Editorial illustrations about self-employment. Two characters from white and blue collar jobs look at each other within a mirror. I can keep looking at this one for a while. Love all those little details, objects etc.

¹⁴³

Pelican Link

The colours and details are spectacular!

¹⁴⁶

Apatosaurus At Night Link

Illustration made just to practice working with a restricted color palette. Nicely done I would say.

¹⁴⁹

Greetings From Austin, Texas Link

Remember that I showed a sneak peek from this? Well here’s the finished version which is great as usual. Look at those details and how the (few) colors are applied. Just perfect!

¹⁵²

Footnotes Link

1. 1 https://www.smashingmagazine.com/2010/02/finding-inspiration-in-uncommon-sources-12-places-to-look/
2. 2 https://www.smashingmagazine.com/2011/06/the-story-of-scandinavian-design-combining-function-and-aesthetics/
3. 3 https://www.smashingmagazine.com/2010/07/showcase-of-web-design-in-poland/
4. 4 https://www.smashingmagazine.com/2009/11/massive-collection-of-nature-inspired-typography/
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Sky-Dining-large-opt.jpg
6. 6 http://jack-hughes.com/
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Sky-Dining-large-opt.jpg
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Spark-Of-Science-large-opt.jpg
9. 9 http://colinhesterly.com/#/nautilus/
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Spark-Of-Science-large-opt.jpg
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Perfect-Morning-Dark-Hedges-large-opt.jpg
12. 12
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Perfect-Morning-Dark-Hedges-large-opt.jpg
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Facebook-Events-ehd-large-opt.png
15. 15 http://eighthourday.com/work/facebook-events
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Facebook-Events-ehd-large-opt.png
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Canlis-Matchbooks-large-opt.jpg
18. 18 https://www.invisiblecreature.com/news/matchbooks-for-canlis-restaurant
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Canlis-Matchbooks-large-opt.jpg
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/05/San-Antonio-Magazine-large-opt.png
21. 21 http://theworkofalexperez.com/san-antonio-magazin
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/05/San-Antonio-Magazine-large-opt.png
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Anciados-large-opt.png
24. 24 http://victoriafernandez.me/anclaii
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Anciados-large-opt.png
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/05/summer-is-crazy-large-opt.png
27. 27 https://www.behance.net/gallery/27420507/Summer-is-crazy-an-illustrated-series
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/05/summer-is-crazy-large-opt.png
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/05/packing-for-mexico-large-opt.jpg
30. 30 http://www.alexandrabowman.com/california-vibes/clv7y6pocwm4jkc4efc8bqikwe1fg8
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/05/packing-for-mexico-large-opt.jpg
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Neutron-Camper-large-opt.jpg
33. 33 http://bravethewoods.com/work/neutron-camper-trailer/
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Neutron-Camper-large-opt.jpg
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Smashmallow-large-opt.jpg
36. 36 http://www.owendavey.com/Smashmallow
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Smashmallow-large-opt.jpg
38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Cant-Hide-Kampina-large-opt.jpg
39. 39 https://robertpauljansen.tumblr.com/post/157661512217/cant-hide-kampina
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Cant-Hide-Kampina-large-opt.jpg
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/05/the-night-ocean-large-opt.png
42. 42 http://www.publishersweekly.com/pw/by-topic/industry-news/publisher-news/article/72907-cover-story-the-night-ocean-by-paul-la-farge.html
43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/05/the-night-ocean-large-opt.png
44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/05/ebola-large-opt.jpg
45. 45 http://www.owendavey.com/Wellcome-Ebola-Crisis
46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/05/ebola-large-opt.jpg
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Hearts-in-Atlantis-large-opt.jpg
48. 48 https://www.behance.net/gallery/51208365/Hearts-in-Atlantis-Album-Cover
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Hearts-in-Atlantis-large-opt.jpg
50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/05/horse-vespa-large-opt.jpg
51. 51 http://www.itsnicethat.com/articles/sebastien-plassard-010816
52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/05/horse-vespa-large-opt.jpg
53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/05/I-see-you-large-opt.png
54. 54 http://mattblease.tumblr.com/
55. 55 https://www.smashingmagazine.com/wp-content/uploads/2017/05/I-see-you-large-opt.png
56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Stanford-Medical-Wellness-large-opt.jpg
57. 57 https://www.behance.net/gallery/48986601/Stanford-Medical-Wellness
58. 58 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Stanford-Medical-Wellness-large-opt.jpg
59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Playa-Game-large-opt.jpg
60. 60 http://www.xoanaherrera.com/#/playa/
61. 61 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Playa-Game-large-opt.jpg
62. 62 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Banking-poster-large-opt.png
63. 63 https://www.behance.net/gallery/51121103/Banking-poster-(-Unused-)
64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Banking-poster-large-opt.png
65. 65 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Testing-crew-large-opt.png
66. 66 https://www.behance.net/gallery/50616663/Dribbble-collection-v2
67. 67 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Testing-crew-large-opt.png
68. 68 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Summer-Night-large-opt.png
69. 69 https://dribbble.com/shots/3425080-Summer-Night
70. 70 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Summer-Night-large-opt.png
71. 71 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Cats-love-tables-large-opt.jpg
72. 72 http://www.itsnicethat.com/articles/maria-luque-220317
73. 73 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Cats-love-tables-large-opt.jpg
74. 74 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Taco-Friday-large-opt.jpg
75. 75 https://dribbble.com/shots/3248355-Taco-Friday
76. 76 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Taco-Friday-large-opt.jpg
77. 77 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Jennifer-Loiselle-large-opt.png
78. 78 http://lesleybarnes.co.uk/Jennifer-Loiselle
79. 79 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Jennifer-Loiselle-large-opt.png
80. 80 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Logan-large-opt.jpg
81. 81 https://dribbble.com/shots/3409569-Logan
82. 82 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Logan-large-opt.jpg
83. 83 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Cycling-Pinball-large-opt.jpg
84. 84 http://www.artcrank.com/home/es-cycling-pinball
85. 85 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Cycling-Pinball-large-opt.jpg
86. 86 https://www.smashingmagazine.com/wp-content/uploads/2017/05/ISO50-2017-Apr-19-large-opt.png
87. 87 https://twitter.com/ISO50/status/854747682169954306
88. 88 https://www.smashingmagazine.com/wp-content/uploads/2017/05/ISO50-2017-Apr-19-large-opt.png
89. 89 https://www.smashingmagazine.com/wp-content/uploads/2017/05/panda-express-large-opt.jpg
90. 90 http://www.artcrank.com/home/rz-polar-express
91. 91 https://www.smashingmagazine.com/wp-content/uploads/2017/05/panda-express-large-opt.jpg
92. 92 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Byron-Bay-large-opt.jpg
93. 93 https://twitter.com/paddydonnelly/status/850681670621700098
94. 94 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Byron-Bay-large-opt.jpg
95. 95 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Early-Morning-Ride-large-opt.jpg
96. 96 http://www.artcrank.com/home/mf-early-morning-ride
97. 97 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Early-Morning-Ride-large-opt.jpg
98. 98 https://www.smashingmagazine.com/wp-content/uploads/2017/05/too-much-tech-large-opt.png
99. 99 https://dribbble.com/shots/2182896-Wall-Street-Journal-The-Trouble-with-TOO-much-tech
100. 100 https://www.smashingmagazine.com/wp-content/uploads/2017/05/too-much-tech-large-opt.png
101. 101 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Coffeehood-large-opt.jpg
102. 102 https://dribbble.com/shots/3449882-Coffeehood-Brand-Assets
103. 103 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Coffeehood-large-opt.jpg
104. 104 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Earth-Day-22-April-large-opt.png
105. 105 https://dribbble.com/shots/3449999-Earth-Day-is-tomorrow
106. 106 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Earth-Day-22-April-large-opt.png
107. 107 https://www.smashingmagazine.com/wp-content/uploads/2017/05/United-Stripes-Of-America-large-opt.jpg
108. 108 http://www.giuliadifilippo.com/unitedstripes.html
109. 109 https://www.smashingmagazine.com/wp-content/uploads/2017/05/United-Stripes-Of-America-large-opt.jpg
110. 110 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Love-Songs-large-opt.jpg
111. 111 https://www.behance.net/gallery/50330445/Love-Songs-Weekend-Magazine
112. 112 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Love-Songs-large-opt.jpg
113. 113 https://www.smashingmagazine.com/wp-content/uploads/2017/05/are-friends-making-you-large-opt.jpg
114. 114 https://www.behance.net/gallery/45287007/Are-Your-Friends-Making-You-Fat-(STELLA-magazine)
115. 115 https://www.smashingmagazine.com/wp-content/uploads/2017/05/are-friends-making-you-large-opt.jpg
116. 116 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Firenze-ray-large-opt.jpg
117. 117 https://www.behance.net/gallery/50404939/Various-Illustration-2016-2017
118. 118 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Firenze-ray-large-opt.jpg
119. 119 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Sydney-Word-by-Word-large-opt.jpg
120. 120 http://www.wbyk.com.au/#/sydney-word-by-word/
121. 121 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Sydney-Word-by-Word-large-opt.jpg
122. 122 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Northwest-Airlines-Fleet-large-opt.jpg
123. 123 http://rogerwilkerson.tumblr.com/post/160057175736/northwest-airlines-fleet-1957
124. 124 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Northwest-Airlines-Fleet-large-opt.jpg
125. 125 https://www.smashingmagazine.com/wp-content/uploads/2017/05/164-WEST-136TH-ST-large-opt.jpg
126. 126 http://www.windowsofnewyork.com/
127. 127 https://www.smashingmagazine.com/wp-content/uploads/2017/05/164-WEST-136TH-ST-large-opt.jpg
128. 128 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Derwentwater-large-opt.jpg
129. 129 https://twitter.com/Fujifilm_UK/status/857125877666250753
130. 130 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Derwentwater-large-opt.jpg
131. 131 https://www.smashingmagazine.com/wp-content/uploads/2017/05/type-man-large-opt.jpg
132. 132 http://www.crayonfire.co.uk/type-man
133. 133 https://www.smashingmagazine.com/wp-content/uploads/2017/05/type-man-large-opt.jpg
134. 134 https://www.smashingmagazine.com/wp-content/uploads/2017/05/melt-large-opt.png
135. 135 https://dribbble.com/shots/3468355-Melt
136. 136 https://www.smashingmagazine.com/wp-content/uploads/2017/05/melt-large-opt.png
137. 137 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Phantom-Manor-large-opt.jpg
138. 138 https://twitter.com/maxvoltar/status/857719425277022208
139. 139 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Phantom-Manor-large-opt.jpg
140. 140 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Its-Like-A-Jungle-Sometimes-large-opt.jpg
141. 141 https://www.behance.net/gallery/20671155/New-prints
142. 142 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Its-Like-A-Jungle-Sometimes-large-opt.jpg
143. 143 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Self-Employment-large-opt.jpg
144. 144 http://www.crayonfire.co.uk/self-employment
145. 145 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Self-Employment-large-opt.jpg
146. 146 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Pelican-large-opt.jpg
147. 147 https://unsplash.com/?photo=SYzUF6XcWBY
148. 148 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Pelican-large-opt.jpg
149. 149 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Apatosaurus-at-Night-large-opt.jpg
150. 150 https://dribbble.com/shots/3466792-Apatosaurus-at-Night
151. 151 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Apatosaurus-at-Night-large-opt.jpg
152. 152 https://www.smashingmagazine.com/wp-content/uploads/2017/05/greetings-from-texas-large-opt.jpg
153. 153 https://www.dkngstudios.com/blog/2017/4/10/greetings-from-austin-art-print
154. 154 https://www.smashingmagazine.com/wp-content/uploads/2017/05/greetings-from-texas-large-opt.jpg

↑ Back to topTweet itShare on Facebook

Voice-based interfaces are becoming commonplace. Voice assistants such as Siri and Cortana have been around for a few years, but this past holiday season, voice-driven devices from Amazon and Google made their way into millions of homes.

Recent analysis from VoiceLabs¹ estimates that 24.5 million voice-driven devices will be shipped this year, almost four times as many as last year. As experience designers, we now have the opportunity to design voice experiences and interfaces!

A new interface does not mean that we have to disregard everything we have successfully applied to previous interfaces; we will need to adapt our process for the nuances of voice-driven interfaces, including conversational interactions and the lack of a screen. We will look at how a typical genie in a bottle works, discuss the steps involved in designing voice experiences, and illustrate these steps by designing a voice app for Alexa (or Skill, as Amazon calls it).

Further Reading on SmashingMag: Link

• Enhancing User Experience With The Web Speech API²
• Guidelines For Designing With Audio³
• Experimenting With speechSynthesis⁴
• What Is User Experience Design? Overview, Tools And Resources⁵

Understanding Voice Interfaces Link

Just as mobile apps run on an OS and a device, three layers have to work together to enable voice interactions:

⁶

1. voice app (Amazon Skills and Actions for Google);
2. artificial intelligence platform (Amazon Alexa, Google Assistant, Apple Siri, Microsoft Cortana);
3. device (Echo, Home, smartphones, computers).

Each layer uses the one below and supports the one above it. The voice interface lies in the upper two layers, both of which reside in the cloud, not on the device itself.

Let’s peek under the hood to see how these layers work together, using the Alexa Jeopardy! Skill as an example.

⁷

Voice-driven devices such as the Amazon Echo and Google Home are constantly listening, waiting for a wake word (“Alexa…” or “OK, Google…”) to jump into action. Once activated, the device sends the audio that follows to the AI platform in the cloud (“… play Jeopardy!”). The platform uses a combination of automatic speech recognition⁹ (ASR) and natural language understanding¹⁰ (NLU) to decipher the user’s intent (to start a trivia game) and send it to the supporting app (Jeopardy! J6 Skill on Alexa). The app processes the request and responds through text (and a visual if applicable). The platform converts the text to speech and plays it through the device (“Welcome to Jeopardy J6. Here are today’s clues…”). All this in matter of seconds.

Building Voice Experiences Link

Last year, Mark Zuckerberg took on a personal challenge to build a simple AI¹¹ to run his home. He did, called it Jarvis and gave it the voice of Morgan Freeman¹².

¹³

The rest of us who don’t have the ability or resources to do the same can get away with building voice apps that run on complex AI platforms that have already been built. This frees us to only have to worry about the design and development of the voice app, that too with a simplified development process. Amazon¹⁵ and Google¹⁶ have provided open access to templates, code, and detailed step-by-step instructions to build different types of voice apps, to the point that even non-developers could develop an app in around an hour!

Their investment in simplifying app development is paying off, with thousands of new voice apps being launched every month¹⁷. The growth in voice apps brings back memories of the ’90s web gold rush, as well as the explosion of mobile apps that followed the launch of app stores.

¹⁸

In a crowded voice marketplace, good design is what will differentiate your voice app from the hundreds of other similar apps.

Designing Voice Experiences Link

Designing a good voice user experience is a five-step process that should take place before starting development. Though jumping straight into development might be tempting, the time spent getting the design right is time well spent.

²⁰

We will discuss and apply each step to design a voice app, which could easily be developed using one of many Skill templates for Alexa²².

1. Discover Link

The design journey begins with the question, “How will this voice app provide value to my users?” This question applies whether you are developing a standalone voice app (like our example) or whether your voice app is just one of many touchpoints for your customers. Take into consideration why and where people use voice apps. People use voice interfaces because of the benefits of hands-free interaction, the speed of interaction and the ease of use, primarily using it at home or in the car, as shown in Mary Meeker’s 2016 Internet Trends Report²³.

²⁴

The key is to find consistent user needs that are easier or more convenient through a voice app rather than a phone or a computer. Some examples include banks providing account information or a moviegoer finding new movies playing nearby.

If you have competitors who already have voice apps, take into consideration what they are doing and the reviews and feedback their apps have received in the app marketplace (such as Amazon’s Alexa Skill Store²⁷). The aim is not to blindly imitate, but to be aware of the capabilities bar that has been set, as well as user expectations.

(At the time of writing this, there were over 1,500 “knowledge and trivia” Alexa Skills, making it the most crowded Skill categories on Amazon. However, there wasn’t a single trivia skill catering to the area of user experience. To illustrate the voice design process, we will create a UX design skill, for our readers to test their knowledge or maybe even to learn something new.)

2. Define Link

During this step, we will define the personality of our app and the capabilities it will have.

Personality Link

When designing voice interfaces, we don’t have access to many of the visual elements we use in web and mobile interfaces to show a personality. The personality has to come through the voice and tone of verbal interactions. And unlike Zuckerberg, who hears Freeman’s soothing voice, we are constrained to hearing the default voice of the device. That makes tone and wording crucial in conveying the personality we want to convey.

The good news is that most of the groundwork in this area should have already been completed and documented in a corporate brand guide or website style guide (hint: look for the “tone of voice” section). Leverage those guidelines for your voice app, as well to maintain a consistent personality across channels and touchpoints.

When I think of personality and tone, the Virgin Group immediately comes to mind. They clearly define who they are and how they convey that to users. For Virgin America, the ideal tone is “hip, easygoing, informal, playful and tongue in cheek,” and it comes across clearly in all their communication.

²⁸

If you’ve ever asked Alexa to sing or tried any of the numerous Alexa Easter Eggs³⁰, then you’ll know she has a personality of her own. Curious, I reached out to the team responsible for her personality, and here’s what they had to say:

When architecting Alexa’s voice, we tried to give her a personality that reflects the attributes we value most at Amazon. We wanted her to feel helpful, humble and smart, while still maintaining a sense of fun. This is an ongoing process, and we expect the voice of Alexa will evolve as more developers focus on making her smarter.

Personality can also be reflected in the app’s name, icon and description that are displayed to users in the app directory listing, as well as in the name used to invoke the app (the invocation name). So, make sure it shines through while publishing your app.

For our UX Design skill, we could take a straightforward or a funny approach, and that would be reflected in the wording of our quiz’ Q&A options.

An example of a normal tone would be:

Which UX design principle favors simplicity over complexity?

1. Occam’s Razor
2. Hick’s Law
3. Aesthetic-usability effect
4. Satisficing

And an example of a funny tone would be:

Apparently, there’s a UX design principle that favors simplicity over complexity. Really! Can you guess what it’s called?

1. Occam’s Razor: The best a UX guy can get.
2. Hick’s Law: Sounds like something a UX bumpkin would come up with.
3. Aesthetic-usability effect: That’s some fancy UX jargon.
4. Satisficing: I can’t get no satisficing… apologies to the Rolling Stones.

Yeah, let’s stick with normal.

Capabilities Link

This is where you carefully think of the functionality that will be valuable for your voice app’s users. Revisit your work from the first step to identify the capabilities that are core or related to your business. Sometimes offering core capabilities is a no-brainer — such as a bank offering information on balance, transactions and due dates. Others offer value in the form of related features, such as Tide’s stain-removal guide voice app, or Glad’s (makers of food storage and trash bags) voice apps, one of which helps users to remember where they stored their leftovers, or the other one that allows users to check which items should be recycled or disposed of in the trash.

If you did a similar exercise when going from web to mobile, that can serve as a starting point. For voice capabilities, consider what capabilities would benefit your users on a voice-driven device in a shared space. If a Skill has security or privacy implications, consider adding a level of protection (the Capital One Alexa Skill allows users to create a personal key for account access). While you may end up with a laundry list of functionality that would work over voice, start with one to five core capabilities, and use voice analytics to update and improve after launch.

The core capabilities of a UX design Skill could be:

1. provide a UX design principle on demand;
2. quiz the user (single player) on a random UX principle;
3. quiz the user (single player) on multiple UX principle, and keep score;
4. hold a UX quiz competition with multiple players.

Because we are building this UX design Skill using Amazon’s Skill templates, our choices are currently restricted to either the first (fact skill template) or third (trivia skill template) option above. Assuming that our research has shown that our users would find a quiz more valuable than just hearing a UX principle recited, our core capability will be to quiz the user on UX principles and to keep score.

3. Detail Conversation Flow Link

Now that you have shortlisted the capabilities of your voice app, start focusing on the detailed conversation flow that the app will have with its users. Human conversation is complex; it often has many twists and turns and may pivot anytime, with people often jumping from one topic to another. Voice AI platforms still have a long way to go to match that level of complexity, so you have to teach your Skill how to respond to users.

Your voice app can only support the capabilities you have defined in the previous step, but users always have the ability to ask the app anything and in any format. Detailing a conversation flow allows you to respond to the user, or to drive the conversation towards what the app can do for the user.

For each capability that the voice app will support, start creating conversational dialogues between the user and the app, similar to dialogues in a screenplay. As you write these dialogues, remember the personality as well as voice and tone characteristics. Start creating and curating the actual content for your voice app; for our quiz, this would mean building the list of quiz questions.

Begin with the “happy path” — a conversational flow in which the voice app can respond to the user’s request without any exceptions or errors. Then, move on to detailing the conversational flow for exceptions (in which the user does not provide complete information) and errors (in which the voice app does not understand or cannot do what the user is asking).

Because the conversation will be heard and not read, a good practice is to read it out loud to see if it sounds like a natural spoken conversation, and to check that it conveys the tone of voice you’ve intended.

If your voice app needs to supplement the conversation with content displayed on the phone app, design these interactions together, so that they appear seamless to the user. For instance, Tide’s stain-removal Skill informs the user that they could also refer to the stain-removal steps in the Alexa app, in addition to hearing the instructions. This may soon be required if the rumors of a touchscreen on the new Echo³¹ are true.

Here is a sample dialogue for the happy path our UX design Skill’s core capability:

User: “Alexa, start the UX design quiz.”

Alexa: “I will ask you five questions, with multiple choice answers. Try to get as many right as you can. Just say the number of the answer. Let’s begin. Question 1…”

User: [responds correctly]

Alexa: “That’s correct! Your score is 1. Here’s question 2…”

User: [responds incorrectly]

Alexa: “Oops, that’s the wrong answer. The correct answer is [correct answer]. Your score is 1. Here’s question 3…”

…

Alexa (at the end of five questions): “That’s correct! You got four out of five questions correct. Thank you for playing!”

4. Describe Alternate Phrases Link

People don’t always use the same words to say the same thing, and voice apps need to be taught that. Phrase-mapping is an exercise to teach voice apps to accommodate variation in the way users phrase their requests.

For each conversational path that you detailed in the previous step, think about the different ways users could word those requests. Then break down the wording of each request, and identify word variations and synonyms that they might use, taking into account any regional variations and dialects. You will have your hands full if your voice app deals with sweetened carbonated beverages (soda, pop, coke, tonic, soft drink, fizzy drink), long sandwiches (sub, grinder, hoagie, hero, poor boy, bomber, Italian sandwich, baguette) or athletic footwear (sneakers, shoes, gym shoes, sand shoes, jumpers, tennis shoes, running shoes, runners, trainers).

Make this list of variations as complete and exhaustive as possible, so that your voice app can understand user requests. Alexa needs these variations in the form of “utterances” and recommends providing “… as many representative phrases as possible³².” Depending on the capabilities of your voice app, the number of utterances could easily run into the hundreds, but there are ways to simplify the generation of utterances³³.

Here’s a sample phrase-mapping for a capability of our UX design quiz. Alexa’s AI platform does a good job of translating user intent for Skills based on their templates. However, if you make changes (like we changed “trivia game” to “quiz”), then these phrases will have to be added.

³⁴

5. Refine Link

The final step in the design process is to validate and refine the voice application before spending time and effort on development. During the “detail” step, reading the conversation flows aloud helped to make sure that they sounded natural and conversational. The current step involves testing the voice interface with users.

The simplest way to test is using the Wizard of Oz technique, with a person playing the role of the voice-driven device and responding to the user based on the voice interface script. Another option is to use prototyping software such as SaySpring⁶²³⁶ to create and test interactive prototypes.

If your voice app is being built using code templates (as our app is), then it might be easier to create the app and test it using testing tools provided by Amazon³⁷ and Google³⁸ within the Skill development area (as shown below), or in test mode on an actual device.

³⁹

This testing will give you a good feel for the voice experience in the real world, including handling of errors, repetitive responses, and unnatural, forced or machine-like replies.

Develop Link

Now that the voice experience has been designed, it is time to move to the build-test-submit phase. Each platform has detailed guides and tutorials to help anyone build and test skills, including Alexa Skills Kit⁴⁰, Develop Actions for Google⁴¹, and Cortana⁴², which offers to reuse your custom Alexa skill code!

Think about your feedback loop and the analytics that will help you to understand usage of your voice app. You can get Skill metrics (users, sessions, utterances, intents) within your developer account without any additional coding, but advanced analytics are available through free services such as VoiceLabs⁴³ (I could not get it to work, probably due to my lack of coding skills or the lack of a VoiceLabs for Dummies setup guide).

After you finish building and testing your voice app, the last step is a streamlined submission process⁴⁴. Because the Alexa Skill marketplace has rapidly grown, discovering new and useful apps is getting difficult. Until Amazon improves this, use visible elements of your voice app listing to help users find and try your Skill, including a catchy and relevant skill icon, name and description.

The companion skill that was built as an illustration can be taken for a test drive on the Amazon Alexa Skill store: UX Design Quiz⁴⁵

Guiding Principles Link

Here are a few guiding principles for designing voice experiences. More principles and detailed do’s and don’ts are offered by Amazon⁴⁶ and Google⁴⁷.

Onboard the User and Help Them Get Started Link

Introduce the app and the ways the user can engage with it.

Welcome to UX Design Quiz. I will ask you five questions about UX design and see how many you get right. You can ask me to repeat a question or pause if you need to. Would you like to start a new quiz?

Keep conversation exchanges brief to reduce cognitive load. Link

With a voice user interface, the user has to use their short-term memory while interacting with the voice app. So, keep it short and sweet.

Alexa: “This principle is attributed to a 14th-century logician and Franciscan friar and is named after the village in the English county of Surrey where he was born. In a nutshell, it states that simplicity is better than complexity. This problem-solving principle can easily be applied to user experience design, by going for the simpler design solution. What is this principle called?

1. Your first option is Occam’s Razor, sometimes known as Ockham’s razor, or the law of parsimony.
2. Your next option is Hick’s Law, also known as the Hick-Hyman Law.
3. Your next option is the aesthetic-usability effect.
4. Your last option is called “satisficing,” not to be confused with “satisfying” or “sacrificing.”

Please say A, B, C, or D to make your selection.”

User: “Huh?! Alexa, repeat. On second thought, end quiz!”

Examples Work Better Than Instructions Link

Instruction: “Please say your date of birth in the month/day/year format.”

Example: “Please say your date of birth, like April 15, 1990.”

Delight Without Interfering With the Task Link

This is a balancing act. Too much and it gets tiresome quickly.

Use Explicit Confirmations for Important Actions, and Implicit for Less Risky Link

If you ask Alexa to turn off the lights, you can see it happen and do not need a verbal confirmation, although she sometimes confirms with a short “OK.”

⁴⁸

Design for Failure Link

Things will go wrong: design for those situations. Examples include unintelligible questions or information, incomplete information, silence or requests that cannot be handled. Acknowledge, and give the user options to recover.

Respect the User’s Privacy and Security Link

⁴⁹

Conclusion Link

Anytime you’re dealing with trying to interact with a human, you have to think of humans as very advanced operating systems. Your highest goal is to try to emulate them.

– K.K Barrett, Her movie production designer, Wired, 2014

If you haven’t seen the movie Her, take a couple of hours to watch this futuristic movie about a lonely writer who develops a relationship with an operating system. While it is science fiction, in today’s world, voice experiences are increasing with the adoption of standalone voice-driven devices, such as the Amazon Echo family and Google Home. Developing a voice app is a relatively simple, template-driven process, with IKEA-like instructions provided by Amazon and Google in an attempt to establish their platforms. Though jumping into development may be tempting, a good voice user experience doesn’t just happen; it has to be designed, going through the steps described in this article.

Please use the comments area to share any other feedback, tips and resources with other readers.

Resources Link

AI Platform Tools Link

• Alexa Skills Kit⁵¹, Amazon
• Actions for Google⁵²
• “Alexa Skills Kit Voice Design Best Practices⁵³,” Amazon
• Actions for Google design resources⁵⁴

Tone of Voice Link

• “The Impact of Tone of Voice on Users’ Brand Perception⁵⁵,” Kate Meyer, Nielsen Norman Group
• “Finding Your Tone of Voice⁵⁶,” Robert Mills, Smashing Magazine
• “Finding Your Brand’s Voice⁵⁷,” Harriet Cummings, Distilled

Phrases and Dialects Link

• “How Y’all, Youse and You Guys Talk⁵⁸ (interactive quiz), New York Times
• Defining the Voice Interface⁵⁹ (and Alexa utterances), Amazon
• “Defining Utterances for the Alexa Skills Kit⁶⁰” (including the tool⁶¹), Maker Musings

Prototyping and Testing Link

• SaySpring⁶²³⁶
  “Free prototyping software for voice”
• Echosim.io⁶³
  “Alexa Skill Testing Tool”
• “Web Simulator⁶⁴,” Actions for Google

Report, Book and Movie Link

• “The 2017 Voice Report by VoiceLabs⁶⁵“
• Designing Voice User Interfaces: Principles of Conversational Experiences⁶⁶, Cathy Pearl, O’Reilly Media
• Her⁶⁷ (movie)

(da, vf, yk, al, il)

Footnotes Link

1. 1 http://voicelabs.co/2017/01/15/the-2017-voice-report/
2. 2 https://www.smashingmagazine.com/2014/12/enhancing-ux-with-the-web-speech-api/
3. 3 https://www.smashingmagazine.com/2012/09/guidelines-for-designing-with-audio/
4. 4 https://www.smashingmagazine.com/2017/02/experimenting-with-speechsynthesis/
5. 5 https://www.smashingmagazine.com/2010/10/what-is-user-experience-design-overview-tools-and-resources/
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/03/voice-interface-stack-500w-opt.png
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/03/voice-interface-stack-example-large-opt.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/03/voice-interface-stack-example-large-opt.png
9. 9 https://en.wikipedia.org/wiki/Speech_recognition
10. 10 https://en.wikipedia.org/wiki/Natural_language_understanding
11. 11 https://www.facebook.com/notes/mark-zuckerberg/building-jarvis/10154361492931634
12. 12 https://www.facebook.com/zuck/videos/10103353413344571/
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/03/zuckerberg-freeman-500w-opt.jpg
14. 14 https://www.facebook.com/photo.php?fbid=10103410869691591&set=pb.4.-2207520000.1486318705.&type=3&theater
15. 15 https://developer.amazon.com/alexa-skills-kit
16. 16 https://developers.google.com/actions/
17. 17 http://voicebot.ai/2017/02/28/amazon-alexa-now-has-10k-skills-including-europe/
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/04/alexa-skills-category-may-2017-large-opt.png
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/04/alexa-skills-category-may-2017-large-opt.png
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/03/designing-voice-experiences-steps-large-opt.png
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/03/designing-voice-experiences-steps-large-opt.png
22. 22 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/content/alexa-skills-developer-training#templates
23. 23 http://www.kpcb.com/blog/2016-internet-trends-report
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/03/voice-reasons-large-opt.png
25. 25 http://www.kpcb.com/blog/2016-internet-trends-report
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/03/voice-reasons-large-opt.png
27. 27 https://www.amazon.com/b?ie=UTF8&node=13727921011
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/03/virgin-brand-personality-730w-opt.png
29. 29 http://vxbrandguidelines.com/
30. 30 https://turbofuture.com/consumer-electronics/200-Amusing-Amazon-Echo-Easter-Eggs
31. 31 https://www.engadget.com/2016/11/29/amazon-touchscreen-speaker-leak/
32. 32 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/defining-the-voice-interface#h2_sample_utterances
33. 33 http://www.makermusings.com/2015/07/21/defining-utterances-for-the-alexa-skills-kit/
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/03/phrase-mapping-large-opt.png
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/03/phrase-mapping-large-opt.png
36. 36 https://www.sayspring.com/
37. 37 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/testing-an-alexa-skill#h2_servicesim
38. 38 https://developers.google.com/actions/tools/web-simulator
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/03/alexa-simulator-500w-opt.png
40. 40 https://developer.amazon.com/alexa-skills-kit#Ready%20to%20start%3F
41. 41 https://developers.google.com/actions/develop/conversation
42. 42 https://developer.microsoft.com/en-us/cortana
43. 43 http://voicelabs.co/
44. 44 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/publishing-an-alexa-skill
45. 45 https://www.amazon.com/dp/B06X6FHKSL
46. 46 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/alexa-skills-kit-voice-design-best-practices
47. 47 https://developers.google.com/actions/design
48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/03/leftover-skill-feedback-570w-opt.png
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/03/bank-skill-feedback-500w-opt.png
50. 50 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/alexa-skills-kit-security-testing
51. 51 https://developer.amazon.com/alexa-skills-kit
52. 52 https://developers.google.com/actions/
53. 53 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/alexa-skills-kit-voice-design-best-practices
54. 54 https://developers.google.com/actions/design
55. 55 https://www.nngroup.com/articles/tone-voice-users/
56. 56 https://www.smashingmagazine.com/2012/08/finding-tone-voice/
57. 57 https://www.distilled.net/tone-of-voice/
58. 58 http://www.nytimes.com/interactive/2013/12/20/sunday-review/dialect-quiz-map.html
59. 59 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/defining-the-voice-interface
60. 60 http://www.makermusings.com/2015/07/21/defining-utterances-for-the-alexa-skills-kit/
61. 61 http://www.makermusings.com/amazon-echo-utterance-expander/
62. 62 https://www.sayspring.com/
63. 63 https://echosim.io/
64. 64 https://developers.google.com/actions/tools/web-simulator
65. 65 http://voicelabs.co/2017/01/15/the-2017-voice-report/
66. 66 http://shop.oreilly.com/product/0636920050056.do
67. 67 http://www.imdb.com/title/tt1798709/

↑ Back to topTweet itShare on Facebook

In case you’re wondering what OAuth2 is, it’s the protocol that enables anyone to log in with their Facebook account. It powers the “Log in with Facebook” button in apps and on websites everywhere.

This article shows you how “Log in with Facebook” works and explains the protocol behind it all. You’ll learn why you’d want to log in with Facebook, Google, Microsoft or one of the many other companies that support OAuth2.

We’ll look at two examples: why Spotify uses Facebook to let you log into the Spotify mobile app, and why Quora uses Google and Facebook to let you log into its website.

Further Reading on SmashingMag: Link

• Four Ways To Build A Mobile Application¹
• How To Build Honest UIs And Help Users Make Better Decisions²
• Keeping Your Android App Popular After Launch³
• Spotify Playlists To Fuel Your Coding And Design Sessions⁴

Before OAuth2 Link

OAuth2 won a standards battle a few years ago. It’s the only authentication protocol supported by the major vendors. Google recommends OAuth2 for all of its APIs, and Facebook’s Graph API only supports OAuth2.

The best way to understand OAuth2 is to look at what came before it and why we needed something different. It all started with Basic Auth.

Basic Auth Link

Authentication schemes focus on two key questions: Who are you? And can you prove it?

The most common way to ask these two questions is with a username and password. The username says who you are, and the password proves it.

Basic Auth was the first web authentication scheme. It sounds funny but “Basic authentication” was its actual name in the specification first published in 1999.

Basic Auth allows web servers to ask for these credentials in a way that browsers understand. The server returns an HTTP response code of 401 (which means that authentication is required) and adds a special header to the response, named WWW-Authenticate, with a special value of Basic.

When the browser sees this response code and this header, it shows a popup log-in dialog:

⁵

The great part about Basic Auth is its simplicity. You don’t have to write a log-in screen. The browser handles all of that and just sends the username and password to the server. It also gives the browser a chance to specially handle the password, whether by remembering it for the user, getting it from a third-party plugin or taking the user’s credentials from their operating system.

The downside is that you don’t get any control over the look and feel of the log-in screen. That means you can’t style it or add new functionality, such as a “Forgot password?” link or an option to create a new account. If you want more customization, you’d have to write a custom log-in form.

Custom Log-In Forms Link

Custom log-in forms give you all the control you could want. You write an HTML form and prompt for the credentials. You then submit the form and handle the log-in any way you want. You get total control: You can style it, ask for more details or add more links.

Some websites, such as WordPress, use a simple form for the log-in screen:

⁶

LinkedIn lets users log in or create an account on the same page, without having to go to another part of the website:

⁷

Form-based log-in is very popular, but it has a major fundamental problem: Users have to tell the website their password.

Keeping Secrets Secret Link

In security circles, we call a password a secret. It’s a piece of information that only you have and proves that you’re you. The secret can also be more than just a password; we’ll talk more about that a little later.

A website can take all the security measures in the world, but if the user shares their password, then that security is gone. Hackers breached the Gawker website in 2010, exposing many users’ passwords. While this was a problem for Gawker, the problem didn’t stop there. Most people reuse passwords, so hackers took the leaked data from Gawker and tried to log into more critical websites, such as Gmail, Facebook and eBay. Anyone who used a Gawker password for more important things lost a lot more than the latest gossip about Hulk Hogan’s sex tape.

Making sure your users don’t reuse a password for multiple accounts is the first half of the problem — and it’s impossible. As long as people have to create different accounts all over the Internet, they will reuse their passwords.

The second half of the problem is storing the passwords securely.

When someone logs into your app, you need to verify their password, and that means you need a copy to verify it against. You could store all usernames and passwords in a database somewhere, but now you risk losing those passwords or getting hacked. The best practice is to use a hash function⁹, such as one of the SHA-2¹⁰ functions. This function encrypts data in a way that you can never get it back, but you can replicate the encryption: “my password” will hash to something like bb14292d91c6d0920a5536bb41f3a50f66351b7b9d94c804dfce8a96ca1051f2 every time.

And now we’re off in the tall grass: I’m telling you how to implement cryptographic protocols. Next, I’ll have to explain how to add a salt¹¹ to your data and which textbooks to read on man-in-the-middle attacks. All you wanted to do is write an app, and now you have to become a security expert. We need to step back.

OAuth2 Link

You probably aren’t a security expert. Even if you are, I still wouldn’t trust you with my password. OAuth2 gives you a better way.

As an example, I use Spotify on my iPad. I pay the company $10 a month to listen to music. Spotify gives me access on only three devices, so I need a password to make sure that nobody else uses my account. My Spotify account isn’t a big security concern. Getting hacked wouldn’t be the end of the world, but the company does have my credit card, so I want to make sure that I’m secure.

I hardly ever log into Spotify, so I don’t want to create another account and have to remember another password. Spotify gives me a better option:

¹²

I can use my Facebook account to log in. When I tap that button, Spotify sends me over to facebook.com, and I log in there. This might seem like a small detail, but it’s the most important step of the whole process.

¹⁴

Spotify’s programmers could have written a log-in form themselves and then sent my username and password to Facebook with a back-end API, but there are two big reasons why I don’t want them to do that:

• I don’t trust Spotify with my Facebook password.
  
  I use Facebook to connect with friends and I don’t want to get hacked. I don’t trust that Spotify will handle the password correctly. I also don’t trust that it’ll avoid the temptation to do something funny with it. Maybe it would try to store it so that it can use it later. Maybe it has a bug that writes it to a file somewhere before sending it off to Facebook, so a hacker could grab it. I’m sorry, Spotify; I’m just not the trusting sort.
• I don’t want to let Spotify do everything.
  
  I want Spotify to play music. I don’t want it to post to my friends’ walls when I listen to the Spice Girls. I also don’t want to let it download my list of friends and bug them to join Spotify. If I gave Spotify my Facebook password, then it could log in as me on Facebook; it could do anything I could do.

There are also two big reasons why Spotify doesn’t want to do that:

• Facebook has multiple options for me to log in.
  
  I can either log in with my username and password or I can log in with the Facebook app. I can also retrieve my password from Facebook or get help that Spotify can’t give me. If I just gave Spotify my password, I wouldn’t get any of those options.
• My secret might not be a password.
  
  A password is enough security for my $10-per-month Spotify account, but it might not be enough for my bank or something even more important. There are a lot of other secrets I could provide: I might have a smart card, or I might be living in a Mission Impossible movie and use a retinal scanner.

I’m not in a Mission Impossible movie, but in the real world, many companies use two-factor authentication, such as a password plus something else. The most common method is to use your phone. When you want to log in, the company sends you a text with a special code that lasts for a few minutes; you then type in the code or use an app to input it.

Now the company is sure that nobody can log into your account without your phone. If someone steals your password, they still can’t log in. As long as you don’t lose your phone, everything is secure.

Facebook isn’t the only OAuth2 provider. When I log into Quora with my Google account, Google tells me what Quora would like to do and asks if that’s OK:

¹⁶

I might be fine with allowing Quora to view my email address and my basic profile data, but I don’t want it to manage my contacts. OAuth2 shows me all of the access that Quora wants, allowing me to pick and choose what I grant access to.

So, those are the advantages of OAuth2. Let’s see how it works.

How OAuth2 Works Link

Facebook, Google and most of the other OAuth2 providers treat native clients differently from web clients. Native clients are considered more secure, and they get tokens and refresh tokens that can last for months. Web clients get much shorter tokens, which typically time out when the user closes the browser or hasn’t clicked on the website for a while.

In both cases, the log-in process is the same. The difference is in how often the user needs to go through it.

OAuth2 log-in follows these general steps:

1. The user tries to do something that requires authentication.
   
   This could be as simple as opening an app or clicking a “Log in” button.
2. The app or website determines that the user hasn’t logged in yet and starts the log-in process.
   
   It does this by opening a web page and sending it to a special URL at Facebook, Google or whatever other website is providing your OAuth2.

Opening a new browser window for the OAuth2 provider is a crucial step. That’s what allows providers to show their own log-in forms and to ask each user for whatever log-in information they need. Most apps do this with an embedded web view.

Along with the provider’s log-in URL, you need to send some URL parameters that tell the provider who you are and what you want to do:

• client_id
  
  This tells the OAuth2 provider what your app is. You’ll need to register your app ahead of time to get a client ID.
• redirect_uri
  
  This tells the provider where you want to go when you’re done. For a website, this could be back to the main page; a native app could go to a page that closes the web view.
• response_type
  
  This tells the provider what you want back. Normally, this value is either token, to indicate that you want an access token, or code, to indicate that you want an access code. Providers may also extend this value to provide other types of data.
• scope
  
  This tells the provider what your app wants to access. This is how Google knows that Quora is asking for access to manage your contacts. Each provider has a different set of scopes.

There are additional fields that can add more security or help with caching. Certain providers also get to add more fields, but these four are the important ones.

Once your app opens the web view, the provider takes over. They might just ask for a simple username and password, or they might present multiple screens requesting anything from the name of your favorite teacher to your mother’s maiden name. That’s all up to them. The important part is that, when the provider is done, they will redirect back to you and give you a token.

It’s All About The Tokens Link

When the process completes, the provider will give you a token and a token type. There are two types of tokens: access tokens and refresh tokens. The type of client you have will determine which types of tokens you’re allowed to ask for.

When I log into my Spotify app, I can stay logged in for months, because the assumption is that my phone is used only by me. Facebook trusts the Spotify app to manage the tokens, and I trust the Spotify app not to lose the tokens.

When the access token times out (typically, in one to two hours), Spotify can use the refresh token to get a new one.

The refresh token lasts for months. That way, I only have to log in on my phone a few times a year. The downside is that if I lose that refresh token, someone else could use my account for months. The refresh token is so important that iOS provides a keychain for tokens, where it makes sure to encrypt and store them safely.

Using OAuth2 in a web application works the same way. Instead of using a web view, you can open up the OAuth2 log-in request in a frame, an iframe or a separate window. You can also open it on the current page, but this would cause you to lose all JavaScript application state whenever someone needs to log in.

When I log into Quora with my web browser, I don’t get a refresh token. They want the token to time out and prompt me to log in again when I quit my browser or even just go away for lunch. Untrusted clients can’t refresh the token because they can’t be trusted to hold on to the important refresh token. It’s more secure but less convenient, because they will prompt you to log in again much more frequently.

Using OAuth2 In Your App Link

Now you know how OAuth2 works, but you probably don’t want to implement your own OAuth2 client. You could go read the whole 75-page OAuth 2.0 specification¹⁷ if you’re having trouble sleeping, but you don’t need to. Some great libraries are out there for you to use.

iOS has built-in support for OAuth2. Corrina Krych has a very helpful tutorial on using OAuth 2.0 with Swift¹⁸. It walks you through how to get a token, how to integrate the views in your app and where to store your tokens.

Android also has built-in support for OAuth2. I must admit that I’m not as familiar with it because I focus on iOS, but there are some good sections in the documentation¹⁹ to show you examples and some open-source libraries to make it even easier.

JavaScript doesn’t have built-in support for OAuth2, but there are clients for all of the major JavaScript libraries. React fully supports OAuth2. AngularJS has third-party support for OAuth2.0 for many projects. I even wrote one of them²⁰.

Once you have an OAuth2 client, you’ll need to choose a provider.

Who Do You Trust? Link

The big assumption here is that I trust Facebook more than Spotify. I have no good reason for that. Facebook doesn’t make its internal security public, and there’s no good way for me to audit it. Neither does Spotify. There’s no Consumer Reports for OAuth2 security. I’m basically trusting Facebook because it’s bigger. I trust Facebook because other people do.

I’m also trusting Facebook more every time I click the “Log in with Facebook” button. If Facebook loses my password, then hackers will get access not just to my Facebook account, but also to my Spotify account and to any other service I’ve logged into with my Facebook account. The upside is that there is only one place I have to reset my password in order to fix the problem.

I don’t have to trust Facebook, but I have to trust someone. Somebody has to authenticate me. I need to choose the provider I trust.

Choosing an OAuth2 Provider Link

Wikipedia maintains a list of OAuth providers²¹, but you wouldn’t care about most of them. The big ones are Facebook and Google. You might also want to look at Amazon or Microsoft.

All four of them are big and easy to integrate with. Facebook provides instructions for registering an app²². Google has similar steps²³. The basic idea is that you create a developer account and then create an app ID. The provider then gives you a client ID that you can use to make requests.

You can also choose multiple providers. Quora allows you to log in with Facebook or Google; because they both use OAuth2, you may use the same code for both.

What’s Missing From OAuth2 Link

OAuth2 does a very good job of solving a complex problem, but it is missing a couple of things:

• The standard isn’t completely standard.
  
  I’ve never been able to write a single OAuth2 client that can log into both Facebook and Google without a few if statements. Each interprets the specification differently, and there are little dissimilar details for each one. They also always have different ideas on what scopes to provide. Using a library to integrate with OAuth2 helps a lot with this problem, but it will never be 100% transparent in your app’s code.
• Logging out is tricky.
  
  Every app or website that uses OAuth2 has a log-out button, but most will just forget the tokens without invalidating them. The app will forget about all of your current tokens and allow someone else to log in, but your tokens are still valid. If a hacker stole your token, they could still use it and log in as you.

There is a separate specification for invalidating OAuth2 tokens²⁴, but it wasn’t picked up by many of the major providers. OAuth2 doesn’t provide a way to recover if a hacker gets your refresh token; even though you can delete your local copy of the token, the hacker will still have it. Many providers give you a way to suspend your account, but there’s no standard way to do it.

In defence of OAuth2, this is a difficult problem, because many providers use public-key cryptography²⁵ to create stateless tokens. This means that the server doesn’t remember the tokens it has created, so it can’t forget them later.

The other major problem with OAuth2 is that you are dependent on your provider. When Facebook goes down, so does the “Log in with Facebook” button in your app. If Google decides to start charging you to support OAuth2 or demands that you share your profit with it, there’s nothing you can do. This is the double-edged sword of trusting a provider: They are doing a lot for you, but they have control over your users.

OAuth2 Runs The World Link

Even with a couple of missing features and a big dependency, OAuth2 is still an excellent choice. It makes it easy for users to log into your app, to not have to remember a password for every website, and to trust your security. OAuth2 is a very popular choice. It dominates the industry. No other security protocol comes close to the adoption of OAuth2.

Now you know where OAuth2 comes from and how it works. Go make smart choices about who to trust, stop reading articles about safely storing encrypted passwords, and spend more of your time writing your amazing app.

(da, il, al)

Footnotes Link

1. 1 https://www.smashingmagazine.com/2013/11/four-ways-to-build-a-mobile-app-part1-native-ios/
2. 2 https://www.smashingmagazine.com/2016/10/how-to-build-honest-uis-and-help-users-make-better-decisions/
3. 3 https://www.smashingmagazine.com/2015/10/keep-your-android-app-popular-after-launch/
4. 4 https://www.smashingmagazine.com/2016/11/playlists-fuel-coding-design-sessions/
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/03/1-basic_auth-preview-opt.png
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/03/7-wordpress_login-preview-opt.png
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/03/2-linkedin_login-large-opt.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/03/2-linkedin_login-large-opt.png
9. 9 https://en.wikipedia.org/wiki/Cryptographic_hash_function
10. 10 https://en.wikipedia.org/wiki/SHA-2
11. 11 https://en.wikipedia.org/wiki/Salt_(cryptography)
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/03/3-login1-large-opt.png
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/03/3-login1-large-opt.png
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/03/4-login2-large-opt.png
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/03/4-login2-large-opt.png
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/03/6-quora_auth-preview-opt.png
17. 17 https://tools.ietf.org/html/rfc6749
18. 18 https://www.raywenderlich.com/99431/oauth-2-with-swift-tutorial
19. 19 https://developer.android.com/training/id-auth/authenticate.html
20. 20 https://github.com/gromit-soft
21. 21 https://en.wikipedia.org/wiki/List_of_OAuth_providers
22. 22 https://developers.facebook.com/docs/apps/register
23. 23 https://developers.google.com/identity/protocols/OAuth2
24. 24 https://tools.ietf.org/html/rfc7009
25. 25 https://www.smashingmagazine.com/2012/05/backpack-algorithms-and-public-key-cryptography-made-easy/

↑ Back to topTweet itShare on Facebook

We always try our best to challenge your creativity and get you out of your comfort zone. A great occasion to do so is our monthly wallpapers challenge which has been going on for eight years¹ already.

It’s an opportunity to let your ideas run wild and try something new, to indulge in a little project just for fun. Whatever technique you fancy, whatever story you want to tell with your wallpaper, the submissions to this challenge make a beautiful, unique bouquet of community artworks each month anew. Artworks that adorn desktops and, who knows, maybe even spark new ideas.

This post features desktop wallpapers for May 2017, created by designers and artists from all across the globe. Each wallpaper comes in versions with and without a calendar and can be downloaded for free. 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?

All Is Possible In May

“Edwin Way Teale once said that ‘[t]he world’s favorite season is the spring. All things seem possible in May.’ Now that the entire nature is clothed with grass and branches full of blossoms that will grow into fruit, we cannot help going out and enjoying every scent, every sound, every joyful movement of nature’s creatures. Make this May the best so far!” — Designed by PopArt Studio³ from Serbia.

⁴

• 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¹⁷, 1440×900¹⁸, 1440×1050¹⁹, 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×800³⁵, 1280×960³⁶, 1280×1024³⁷, 1366×768³⁸, 1440×900³⁹, 1440×1050⁴⁰, 1600×1200⁴¹, 1680×1050⁴², 1680×1200⁴³, 1920×1080⁴⁴, 1920×1200⁴⁵, 1920×1440⁴⁶, 2560×1440⁴⁷

Who Is Your Mother?

“Someone who wakes up early morning, cooks you healthy and tasty meals, does your dishes, washes your clothes, sees you off to school, sits by your side and cuddles you when you are down with fever and cold, and hugs you when you have lost all hopes to cheer you up. Have you ever asked your mother to promise you never to leave you? No. We never did that because we are never insecure and our relationship with our mothers is never uncertain. We have sketched out this beautiful design to cherish the awesomeness of motherhood. Wishing all a happy Mothers Day!” — Designed by Acodez IT Solutions⁴⁸ 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⁹⁰

Spring Gracefulness

“We don’t usually count the breaths we take, but observing nature in May, we can’t count our breaths being taken away.” — Designed by Ana Masnikosa⁹¹ from Belgrade, Serbia.

⁹²

• 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¹⁰⁴, 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×800¹²², 1280×960¹²³, 1280×1024¹²⁴, 1400×1050¹²⁵, 1440×900¹²⁶, 1600×1200¹²⁷, 1680×1050¹²⁸, 1680×1200¹²⁹, 1920×1080¹³⁰, 1920×1200¹³¹, 1920×1440¹³², 2560×1440¹³³

Follow Your Dreams

“May your wishes come true.” — Designed by Dan Di¹³⁴ from Italy.

¹³⁵

• 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×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×800¹⁶⁷, 1280×960¹⁶⁸, 1280×1024¹⁶⁹, 1366×768¹⁷⁰, 1400×1050¹⁷¹, 1440×900¹⁷², 1600×900¹⁷³, 1600×1200¹⁷⁴, 1680×1050¹⁷⁵, 1680×1200¹⁷⁶, 1920×1080¹⁷⁷, 1920×1200¹⁷⁸, 1920×1440¹⁷⁹, 2560×1440¹⁸⁰

Be On Your Bike!

“May is National Bike Month! So, instead of hopping in your car, grab your bike and go. Our whole family loves that we live in our bike-friendly community. So, bike to work, to school, to the store, or to the park – sometimes it is faster. Not only is it good for the environment, but it is great exercise!” — Designed by Karen Frolo¹⁸¹ from the United States.

¹⁸²

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

Retro May

“A maypole is a tall wooden pole erected as a part of various European folk festivals, around which a maypole dance often takes place. P.S. I love Super Mario.” — Designed by Jonny Jordan²¹² from Northern Ireland.

²¹³

• preview²¹⁴
• with calendar: 320×480²¹⁵, 640×480²¹⁶, 800×480²¹⁷, 800×600²¹⁸, 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×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²⁵²

Hello May

“In May nature is always beautiful, so I designed a wallpaper with flowers and leaves to celebrate the month of May. I always feel so happy in Spring so I wanted to give everyone a good feeling with this joyful wallpaper.” — Designed by Melissa Bogemans²⁵³ from Belgium.

²⁵⁴

• 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²⁶⁶, 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×800²⁸⁴, 1280×960²⁸⁵, 1280×1024²⁸⁶, 1400×1050²⁸⁷, 1440×900²⁸⁸, 1600×1200²⁸⁹, 1680×1050²⁹⁰, 1680×1200²⁹¹, 1920×1080²⁹², 1920×1200²⁹³, 1920×1440²⁹⁴, 2560×1440²⁹⁵

Under The Sea

“Spring is here! Flowers, grass… All of this is greener. But the sea is prepared for spring, too. Do you want to discover it with me?” — Designed by Verónica 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³¹⁶

Beat The Heat

“Summer means happy times and good sunshine. It means going to the beach, having fun.” — Designed by Suman Sil³¹⁷ from India.

³¹⁸

• preview³¹⁹
• with calendar: 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³³³
• without calendar: 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³⁴⁷

Happy Birthday Frank!

“Wizard of Oz is a classic! May 15th marks Lyman Frank Baum’s Birthday. To honour this legendary author’s birthday, I created this wallpaper with some of the characters from Wizard of Oz.” — Designed by Safia Begum³⁴⁸ from the United Kingdom.

³⁴⁹

• preview³⁵⁰
• with calendar: 800×450³⁵¹, 1280×720³⁵², 1366×768³⁵³, 1440×810³⁵⁴, 1600×900³⁵⁵, 1680×945³⁵⁶, 1920×1080³⁵⁷, 2560×1440³⁵⁸
• without calendar: 800×450³⁵⁹, 1280×720³⁶⁰, 1366×768³⁶¹, 1440×810³⁶², 1600×900³⁶³, 1680×945³⁶⁴, 1920×1080³⁶⁵, 2560×1440³⁶⁶

The Gentleman

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³⁸⁷

Rainy Days

“Winter is nearly here in my part of the world and I think rainy days should be spent at home with a good book!” — Designed by Tazi Design³⁸⁸ 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⁴¹²

Master Crow

Designed by Doud⁴¹³ from Belgium.

⁴¹⁴

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

May Is For Biking

“Biking is truly the best way to get around Washington D.C. in spring. Every day, I ride past the U.S. Capitol building, the national mall with its Smithsonian Museums (free for all!), gardens and people, and I smile that I get to live in this beautiful city. I want to tell all the people trapped in cars and trains to get out and enjoy the weather! Ride a bike!” — Designed by The Hannon Group⁴³⁶ from Washington D.C.

⁴³⁷

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

May-n-go

“It’s May and it’s mango season! I belong to the coastal part of Western India which produces the finest Alphanso mangoes in the world. As May arrives, everyone eagerly waits for the first batch of ripe mangoes in India. It’s not fruit, it’s an obsession! I wish everyone happy may-n-go season!” — Designed by Hemangi Rane⁴⁶³ from Gainesville, Florida.

⁴⁶⁴

• preview⁴⁶⁵
• with calendar: 1280×720⁴⁶⁶, 1920×1080⁴⁶⁷, 2560×1440⁴⁶⁸
• without calendar: 1280×720⁴⁶⁹, 1920×1080⁴⁷⁰, 2560×1440⁴⁷¹

Celestial Longitude Of 45°

“Lixia is the 7th solar term according to the traditional East Asian calendars, which divide a year into 24 solar terms. It signifies the beginning of summer in East Asian cultures. Usually begins around May 5 and ends around May 21.” — Designed by Hong, Zi-Cing⁴⁷² from Taiwan.

⁴⁷³

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

May Echeveria

“In May I think of flowers and I especially think of my favorite flowering plant Echeveria. I created ‘May’ using a vibrant Echeveria pattern.” — Designed by Cheryl Ferrell⁴⁹⁷ from San Francisco.

⁴⁹⁸

• preview⁴⁹⁹
• with calendar: 320×480⁵⁰⁰, 800×600⁵⁰¹, 960×560⁵⁰², 1024×1024⁵⁰³, 1280×800⁵⁰⁴, 1280×1024⁵⁰⁵, 1440×900⁵⁰⁶, 1920×1080⁵⁰⁷, 1920×1200⁵⁰⁸, 1920×1440⁵⁰⁹
• without calendar: 320×480⁵¹⁰, 800×600⁵¹¹, 960×560⁵¹², 1024×1024⁵¹³, 1280×800⁵¹⁴, 1280×1024⁵¹⁵, 1440×900⁵¹⁶, 1920×1080⁵¹⁷, 1920×1200⁵¹⁸, 1920×1440⁵¹⁹

Labour Day

“Labourers are the cogs in the wheel of Society. They are the ones who are keeping this kafkaesque machine going. Do we recognize that as a fact?” — Designed by Dipanjan Karmakar⁵²⁰ from India.

⁵²¹

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

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.

Footnotes Link

1. 1 https://www.smashingmagazine.com/tag/wallpapers/
2. 2 https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/
3. 3 https://www.popwebdesign.net/index_eng.html
4. 4 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/may-17-all-is-possible-in-may-full.jpg
5. 5 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/may-17-all-is-possible-in-may-preview.jpg
6. 6 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-320×480.jpg
7. 7 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-640×480.jpg
8. 8 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-800×480.jpg
9. 9 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-800×600.jpg
10. 10 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1024×768.jpg
11. 11 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1024×1024.jpg
12. 12 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1152×864.jpg
13. 13 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1280×720.jpg
14. 14 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1280×800.jpg
15. 15 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1280×960.jpg
16. 16 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1280×1024.jpg
17. 17 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1366×768.jpg
18. 18 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1440×900.jpg
19. 19 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1440×1050.jpg
20. 20 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1600×1200.jpg
21. 21 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1680×1050.jpg
22. 22 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1680×1200.jpg
23. 23 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1920×1080.jpg
24. 24 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1920×1200.jpg
25. 25 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1920×1440.jpg
26. 26 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-2560×1440.jpg
27. 27 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-320×480.jpg
28. 28 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-640×480.jpg
29. 29 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-800×480.jpg
30. 30 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-800×600.jpg
31. 31 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1024×768.jpg
32. 32 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1024×1024.jpg
33. 33 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1152×864.jpg
34. 34 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1280×720.jpg
35. 35 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1280×800.jpg
36. 36 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1280×960.jpg
37. 37 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1280×1024.jpg
38. 38 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1366×768.jpg
39. 39 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1440×900.jpg
40. 40 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1440×1050.jpg
41. 41 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1600×1200.jpg
42. 42 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1680×1050.jpg
43. 43 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1680×1200.jpg
44. 44 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1920×1080.jpg
45. 45 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1920×1200.jpg
46. 46 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1920×1440.jpg
47. 47 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-2560×1440.jpg
48. 48 http://acodez.in/
49. 49 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/may-17-who-is-your-mother-full.png
50. 50 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/may-17-who-is-your-mother-preview.png
51. 51 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-320×480.png
52. 52 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-640×480.png
53. 53 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-800×480.png
54. 54 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-800×600.png
55. 55 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1024×768.png
56. 56 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1024×1024.png
57. 57 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1152×864.png
58. 58 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1280×720.png
59. 59 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1280×960.png
60. 60 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1280×1024.png
61. 61 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1366×768.png
62. 62 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1400×1050.png
63. 63 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1440×900.png
64. 64 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1600×1200.png
65. 65 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1680×1050.png
66. 66 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1680×1200.png
67. 67 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1920×1080.png
68. 68 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1920×1200.png
69. 69 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1920×1440.png
70. 70 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-2560×1440.png
71. 71 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-320×480.png
72. 72 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-640×480.png
73. 73 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-800×480.png
74. 74 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-800×600.png
75. 75 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1024×768.png
76. 76 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1024×1024.png
77. 77 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1152×864.png
78. 78 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1280×720.png
79. 79 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1280×960.png
80. 80 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1280×1024.png
81. 81 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1366×768.png
82. 82 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1400×1050.png
83. 83 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1440×900.png
84. 84 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1600×1200.png
85. 85 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1680×1050.png
86. 86 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1680×1200.png
87. 87 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1920×1080.png
88. 88 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1920×1200.png
89. 89 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1920×1440.png
90. 90 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-2560×1440.png
91. 91 https://www.creitive.com/
92. 92 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/may-17-spring-gracefulness-full.png
93. 93 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/may-17-spring-gracefulness-preview.png
94. 94 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-320×480.png
95. 95 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-640×480.png
96. 96 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-800×480.png
97. 97 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-800×600.png
98. 98 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1024×768.png
99. 99 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1024×1024.png
100. 100 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1152×864.png
101. 101 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1280×720.png
102. 102 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1280×800.png
103. 103 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1280×960.png
104. 104 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1280×1024.png
105. 105 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1400×1050.png
106. 106 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1440×900.png
107. 107 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1600×1200.png
108. 108 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1680×1050.png
109. 109 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1680×1200.png
110. 110 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1920×1080.png
111. 111 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1920×1200.png
112. 112 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1920×1440.png
113. 113 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-2560×1440.png
114. 114 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-320×480.png
115. 115 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-640×480.png
116. 116 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-800×480.png
117. 117 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-800×600.png
118. 118 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1024×768.png
119. 119 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1024×1024.png
120. 120 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1152×864.png
121. 121 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280×720.png
122. 122 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280×800.png
123. 123 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280×960.png
124. 124 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280×1024.png
125. 125 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1400×1050.png
126. 126 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1440×900.png
127. 127 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1600×1200.png
128. 128 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1680×1050.png
129. 129 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1680×1200.png
130. 130 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1920×1080.png
131. 131 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1920×1200.png
132. 132 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1920×1440.png
133. 133 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-2560×1440.png
134. 134 https://www.behance.net/diuno07
135. 135 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/may-17-follow-your-dreams-full.jpg
136. 136 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/may-17-follow-your-dreams-preview.jpg
137. 137 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-320×480.jpg
138. 138 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-640×480.jpg
139. 139 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-800×480.jpg
140. 140 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-800×600.jpg
141. 141 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1024×768.jpg
142. 142 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1024×1024.jpg
143. 143 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1152×864.jpg
144. 144 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1280×720.jpg
145. 145 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1280×800.jpg
146. 146 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1280×960.jpg
147. 147 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1280×1024.jpg
148. 148 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1366×768.jpg
149. 149 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1400×1050.jpg
150. 150 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1440×900.jpg
151. 151 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1600×900.jpg
152. 152 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1600×1200.jpg
153. 153 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1680×1050.jpg
154. 154 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1680×1200.jpg
155. 155 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1920×1080.jpg
156. 156 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1920×1200.jpg
157. 157 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1920×1440.jpg
158. 158 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-2560×1440.jpg
159. 159 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-320×480.jpg
160. 160 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-640×480.jpg
161. 161 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-800×480.jpg
162. 162 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-800×600.jpg
163. 163 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1024×768.jpg
164. 164 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1024×1024.jpg
165. 165 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1152×864.jpg
166. 166 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1280×720.jpg
167. 167 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1280×800.jpg
168. 168 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1280×960.jpg
169. 169 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1280×1024.jpg
170. 170 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1366×768.jpg
171. 171 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1400×1050.jpg
172. 172 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1440×900.jpg
173. 173 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1600×900.jpg
174. 174 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1600×1200.jpg
175. 175 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1680×1050.jpg
176. 176 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1680×1200.jpg
177. 177 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1920×1080.jpg
178. 178 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1920×1200.jpg
179. 179 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1920×1440.jpg
180. 180 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-2560×1440.jpg
181. 181 https://www.codesign.cc/
182. 182 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/may-17-be-on-your-bike-full.jpg
183. 183 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/may-17-be-on-your-bike-preview.jpg
184. 184 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1024×768.jpg
185. 185 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1024×1024.jpg
186. 186 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1280×800.jpg
187. 187 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1280×960.jpg
188. 188 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1280×1024.jpg
189. 189 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1366×768.jpg
190. 190 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1440×900.jpg
191. 191 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1600×1200.jpg
192. 192 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1680×1050.jpg
193. 193 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1680×1200.jpg
194. 194 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1920×1080.jpg
195. 195 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1920×1200.jpg
196. 196 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1920×1440.jpg
197. 197 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-2560×1440.jpg
198. 198 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1024×768.jpg
199. 199 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1024×1024.jpg
200. 200 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1280×800.jpg
201. 201 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1280×960.jpg
202. 202 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1280×1024.jpg
203. 203 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1366×768.jpg
204. 204 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1440×900.jpg
205. 205 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1600×1200.jpg
206. 206 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1680×1050.jpg
207. 207 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1680×1200.jpg
208. 208 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1920×1080.jpg
209. 209 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1920×1200.jpg
210. 210 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1920×1440.jpg
211. 211 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-2560×1440.jpg
212. 212 https://jonnyjordan.com
213. 213 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/may-17-retro-may-full.png
214. 214 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/may-17-retro-may-preview.png
215. 215 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-320×480.png
216. 216 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-640×480.png
217. 217 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-800×480.png
218. 218 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-800×600.png
219. 219 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1024×1024.png
220. 220 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1152×864.png
221. 221 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1280×720.png
222. 222 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1280×960.png
223. 223 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1280×1024.png
224. 224 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1366×768.png
225. 225 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1400×1050.png
226. 226 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1440×900.png
227. 227 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1600×1200.png
228. 228 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1680×1050.png
229. 229 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1680×1200.png
230. 230 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1920×1080.png
231. 231 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1920×1200.png
232. 232 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1920×1440.png
233. 233 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-2560×1440.png
234. 234 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-320×480.png
235. 235 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-640×480.png
236. 236 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-800×480.png
237. 237 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-800×600.png
238. 238 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1024×1024.png
239. 239 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1152×864.png
240. 240 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1280×720.png
241. 241 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1280×960.png
242. 242 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1280×1024.png
243. 243 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1366×768.png
244. 244 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1400×1050.png
245. 245 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1440×900.png
246. 246 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1600×1200.png
247. 247 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1680×1050.png
248. 248 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1680×1200.png
249. 249 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1920×1080.png
250. 250 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1920×1200.png
251. 251 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1920×1440.png
252. 252 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-2560×1440.png
253. 253 http://melissa.bogemans.com
254. 254 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/may-17-hello-may-full.png
255. 255 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/may-17-hello-may-preview.png
256. 256 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-320×480.png
257. 257 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-640×480.png
258. 258 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-800×480.png
259. 259 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-800×600.png
260. 260 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1024×768.png
261. 261 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1024×1024.png
262. 262 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1152×864.png
263. 263 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1280×720.png
264. 264 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1280×800.png
265. 265 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1280×960.png
266. 266 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1280×1024.png
267. 267 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1400×1050.png
268. 268 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1440×900.png
269. 269 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1600×1200.png
270. 270 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1680×1050.png
271. 271 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1680×1200.png
272. 272 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1920×1080.png
273. 273 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1920×1200.png
274. 274 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1920×1440.png
275. 275 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-2560×1440.png
276. 276 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-320×480.png
277. 277 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-640×480.png
278. 278 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-800×480.png
279. 279 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-800×600.png
280. 280 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1024×768.png
281. 281 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1024×1024.png
282. 282 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1152×864.png
283. 283 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1280×720.png
284. 284 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1280×800.png
285. 285 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1280×960.png
286. 286 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1280×1024.png
287. 287 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1400×1050.png
288. 288 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1440×900.png
289. 289 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1600×1200.png
290. 290 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1680×1050.png
291. 291 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1680×1200.png
292. 292 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1920×1080.png
293. 293 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1920×1200.png
294. 294 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1920×1440.png
295. 295 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-2560×1440.png
296. 296 https://www.silocreativo.com/en/
297. 297 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/may-17-under-the-sea-full.png
298. 298 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/may-17-under-the-sea-preview.png
299. 299 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-800×480.png
300. 300 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-1024×768.png
301. 301 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-1152×864.png
302. 302 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-1280×800.png
303. 303 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-1280×960.png
304. 304 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-1440×900.png
305. 305 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-1680×1200.png
306. 306 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-1920×1080.png
307. 307 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-2560×1440.png
308. 308 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-800×480.png
309. 309 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-1024×768.png
310. 310 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-1152×864.png
311. 311 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-1280×800.png
312. 312 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-1280×960.png
313. 313 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-1440×900.png
314. 314 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-1680×1200.png
315. 315 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-1920×1080.png
316. 316 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-2560×1440.png
317. 317 http://www.itobuz.com/
318. 318 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/may-17-beat-the-heat-full.jpg
319. 319 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/may-17-beat-the-heat-preview.jpg
320. 320 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1280×720.jpg
321. 321 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1280×800.jpg
322. 322 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1280×960.jpg
323. 323 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1280×1024.jpg
324. 324 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1366×768.jpg
325. 325 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1400×1050.jpg
326. 326 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1440×900.jpg
327. 327 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1600×1200.jpg
328. 328 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1680×1050.jpg
329. 329 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1680×1200.jpg
330. 330 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1920×1080.jpg
331. 331 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1920×1200.jpg
332. 332 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1920×1440.jpg
333. 333 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-2560×1440.jpg
334. 334 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1280×720.jpg
335. 335 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1280×800.jpg
336. 336 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1280×960.jpg
337. 337 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1280×1024.jpg
338. 338 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1366×768.jpg
339. 339 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1400×1050.jpg
340. 340 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1440×900.jpg
341. 341 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1600×1200.jpg
342. 342 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1680×1050.jpg
343. 343 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1680×1200.jpg
344. 344 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1920×1080.jpg
345. 345 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1920×1200.jpg
346. 346 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1920×1440.jpg
347. 347 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-2560×1440.jpg
348. 348 https://www.safiabegum.com/
349. 349 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/may-17-happy-birthday-frank-full.png
350. 350 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/may-17-happy-birthday-frank-preview.png
351. 351 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-800×450.png
352. 352 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-1280×720.png
353. 353 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-1366×768.png
354. 354 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-1440×810.png
355. 355 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-1600×900.png
356. 356 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-1680×945.png
357. 357 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-1920×1080.png
358. 358 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-2560×1440.png
359. 359 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-800×450.png
360. 360 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-1280×720.png
361. 361 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-1366×768.png
362. 362 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-1440×810.png
363. 363 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-1600×900.png
364. 364 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-1680×945.png
365. 365 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-1920×1080.png
366. 366 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-2560×1440.png
367. 367 https://www.behance.net/jamesmitchell23
368. 368 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/may-17-the-gentleman-full.png
369. 369 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/may-17-the-gentleman-preview.png
370. 370 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-1280×720.png
371. 371 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-1280×800.png
372. 372 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-1366×768.png
373. 373 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-1440×900.png
374. 374 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-1680×1050.png
375. 375 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-1920×1080.png
376. 376 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-1920×1200.png
377. 377 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-2560×1440.png
378. 378 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-2880×1800.png
379. 379 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-1280×720.png
380. 380 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-1280×800.png
381. 381 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-1366×768.png
382. 382 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-1440×900.png
383. 383 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-1680×1050.png
384. 384 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-1920×1080.png
385. 385 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-1920×1200.png
386. 386 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-2560×1440.png
387. 387 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-2880×1800.png
388. 388 http://www.tazi.com.au
389. 389 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/may-17-rainy-days-full.png
390. 390 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/may-17-rainy-days-preview.png
391. 391 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-320×480.png
392. 392 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-640×480.png
393. 393 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-800×600.png
394. 394 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-1024×768.png
395. 395 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-1152×864.png
396. 396 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-1280×720.png
397. 397 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-1280×960.png
398. 398 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-1600×1200.png
399. 399 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-1920×1080.png
400. 400 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-1920×1440.png
401. 401 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-2560×1440.png
402. 402 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-320×480.png
403. 403 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-640×480.png
404. 404 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-800×600.png
405. 405 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-1024×768.png
406. 406 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-1152×864.png
407. 407 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-1280×720.png
408. 408 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-1280×960.png
409. 409 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-1600×1200.png
410. 410 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-1920×1080.png
411. 411 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-1920×1440.png
412. 412 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-2560×1440.png
413. 413 http://www.facebook.com/doud.design
414. 414 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/may-17-master-crow-full.jpg
415. 415 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/may-17-master-crow-preview.jpg
416. 416 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1366×768.jpg
417. 417 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1400×1050.jpg
418. 418 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1440×900.jpg
419. 419 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1600×1200.jpg
420. 420 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1680×1050.jpg
421. 421 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1680×1200.jpg
422. 422 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1920×1080.jpg
423. 423 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1920×1200.jpg
424. 424 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1920×1440.jpg
425. 425 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-2560×1440.jpg
426. 426 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1366×768.jpg
427. 427 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1400×1050.jpg
428. 428 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1440×900.jpg
429. 429 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1600×1200.jpg
430. 430 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1680×1050.jpg
431. 431 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1680×1200.jpg
432. 432 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1920×1080.jpg
433. 433 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1920×1200.jpg
434. 434 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1920×1440.jpg
435. 435 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-2560×1440.jpg
436. 436 http://bit.ly/TheHannonGroup
437. 437 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/may-17-may-is-for-biking-full.png
438. 438 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/may-17-may-is-for-biking-preview.png
439. 439 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-320×480.png
440. 440 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-640×480.png
441. 441 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-800×600.png
442. 442 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1024×768.png
443. 443 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1280×960.png
444. 444 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1440×900.png
445. 445 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1600×1200.png
446. 446 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1680×1050.png
447. 447 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1680×1200.png
448. 448 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1920×1080.png
449. 449 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1920×1400.png
450. 450 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-2560×1440.png
451. 451 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-320×480.png
452. 452 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-640×480.png
453. 453 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-800×600.png
454. 454 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1024×768.png
455. 455 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1280×960.png
456. 456 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1440×900.png
457. 457 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1600×1200.png
458. 458 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1680×1050.png
459. 459 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1680×1200.png
460. 460 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1920×1080.png
461. 461 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1920×1400.png
462. 462 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-2560×1440.png
463. 463 https://www.facebook.com/kilmouskiscraftbox/
464. 464 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/may-17-may-n-go-full.png
465. 465 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/may-17-may-n-go-preview.png
466. 466 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/cal/may-17-may-n-go-cal-1280×720.png
467. 467 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/cal/may-17-may-n-go-cal-1920×1080.png
468. 468 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/cal/may-17-may-n-go-cal-2560×1440.png
469. 469 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/nocal/may-17-may-n-go-nocal-1280×720.png
470. 470 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/nocal/may-17-may-n-go-nocal-1920×1080.png
471. 471 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/nocal/may-17-may-n-go-nocal-2560×1440.png
472. 472 https://sunday1216.tumblr.com/
473. 473 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/may-17-celestial-longitude-of-45-full.png
474. 474 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/may-17-celestial-longitude-of-45-preview.png
475. 475 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1024×768.png
476. 476 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1080×1920.png
477. 477 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1280×720.png
478. 478 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1280×800.png
479. 479 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1280×960.png
480. 480 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1366×768.png
481. 481 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1400×1050.png
482. 482 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1680×1050.png
483. 483 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1920×1080.png
484. 484 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1920×1200.png
485. 485 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-2560×1440.png
486. 486 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1024×768.png
487. 487 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1080×1920.png
488. 488 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1280×720.png
489. 489 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1280×800.png
490. 490 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1280×960.png
491. 491 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1366×768.png
492. 492 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1400×1050.png
493. 493 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1680×1050.png
494. 494 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1920×1080.png
495. 495 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1920×1200.png
496. 496 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-2560×1440.png
497. 497 https://cherylferrell.myportfolio.com/
498. 498 http://files.smashingmagazine.com/wallpapers/may-17/may/may-17-may-full.png
499. 499 http://files.smashingmagazine.com/wallpapers/may-17/may/may-17-may-preview.png
500. 500 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-320×480.png
501. 501 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-800×600.png
502. 502 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-960×560.png
503. 503 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-1024×1024.png
504. 504 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-1280×800.png
505. 505 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-1280×1024.png
506. 506 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-1440×900.png
507. 507 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-1920×1080.png
508. 508 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-1920×1200.png
509. 509 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-1920×1440.png
510. 510 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-320×480.png
511. 511 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-800×600.png
512. 512 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-960×560.png
513. 513 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-1024×1024.png
514. 514 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-1280×800.png
515. 515 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-1280×1024.png
516. 516 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-1440×900.png
517. 517 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-1920×1080.png
518. 518 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-1920×1200.png
519. 519 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-1920×1440.png
520. 520 http://0effortthemes.com/
521. 521 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/may-17-labour-day-full.jpg
522. 522 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/may-17-labour-day-preview.jpg
523. 523 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/cal/may-17-labour-day-cal-1280×720.jpg
524. 524 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/cal/may-17-labour-day-cal-1280×800.jpg
525. 525 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/cal/may-17-labour-day-cal-1280×960.jpg
526. 526 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/cal/may-17-labour-day-cal-1366×768.jpg
527. 527 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/cal/may-17-labour-day-cal-1400×1050.jpg
528. 528 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/cal/may-17-labour-day-cal-1440×900.jpg
529. 529 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/cal/may-17-labour-day-cal-1920×1080.jpg
530. 530 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/nocal/may-17-labour-day-nocal-1280×720.jpg
531. 531 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/nocal/may-17-labour-day-nocal-1280×800.jpg
532. 532 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/nocal/may-17-labour-day-nocal-1280×960.jpg
533. 533 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/nocal/may-17-labour-day-nocal-1366×768.jpg
534. 534 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/nocal/may-17-labour-day-nocal-1400×1050.jpg
535. 535 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/nocal/may-17-labour-day-nocal-1440×900.jpg
536. 536 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/nocal/may-17-labour-day-nocal-1920×1080.jpg
537. 537 https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/

↑ Back to topTweet itShare on Facebook

We all have fears and doubts. It’s not different for you than for me. Over the last weeks, “well-known” people on Twitter started to share mistakes they made in life or their careers. I think it’s very helpful to read that we all make mistakes.

We all have to learn and improve, and people who are on a stage at an event for the 100th time are still known to be extremely nervous. Let’s realign our views, our expectations and, instead of being afraid of making mistakes, try to improve our knowledge and let others learn from the things that didn’t go as expected.

Further Reading on SmashingMag: Link

• Why You Should Consider React Native For Your Mobile App¹
• How To Choose The Right Face For A Beautiful Body²
• Algorithm-Driven Design: How Artificial Intelligence Is Changing Design³
• Moving From Photoshop And Illustrator To Sketch: A Few Tips For UI Designers⁴

Concept & Design Link

• The Airbnb Design team published a new tool called react-sketchapp⁵. It’s a library that allows you to write React components that render to Sketch documents⁶, providing a super useful data exchange between developers and designers.

⁷

Tools & Workflows Link

• Caddy, an HTTP/2 server that has automatic HTTPS built in, was released in version 0.10¹⁰ and brings man-in-the-middle (MITM) attack detection and HTTP/2 Server Push.
• Kenneth Auchenberg published a new tool called “Remote Debug iOS WebKit Adapter¹¹.” It lets you debug Safari and other WebViews remotely¹² on iOS via Developer Tools in Chrome, Firefox, and even in Microsoft’s VS Code.
• secureoperator¹³ is a proxy for DNS that uses Google’s DNS over HTTPS¹⁴ technology. A nice experiment that brings security to a still weak bridge. And while technologies to add security to the DNS do already exist (DANE and DNSSEC, for example), they’re not as widespread and not free of weak points. However, using DNS via Google also means trusting a third party that could intercept the requests at any time. One thing is for certain, according to their privacy policy¹⁵, they do store logs with your IP address and other information.
• Due to its improvements over MySQL and independence from Oracle, MariaDB is getting lots of traction at the moment. However, there are certain differences in how MariaDB/MySQL and PostgreSQL handle data¹⁶. If you take a closer look, you’ll notice that running into weird miscalculations or errors is much more likely with MariaDB/MySQL while PostgreSQL will return a strict fail if a value doesn’t match a field type.

Security Link

• Clémentine Maurice and other researchers found a way to steal data from the CPU cache shared by two Virtual Machines¹⁷. This was demonstrated on Amazon Web Services but affects all Virtual Machine-based environments. Clear evidence that we still have little idea of how secure or insecure cloud environments actually are.

Privacy Link

• Amazon announced “Echo Look”, an improved Alexa device that does not only listen to a room’s activity but also has a camera¹⁸ to see what’s happening. The purpose? To give you a style check. And as you would expect from Amazon, they say they store the captured data for an indefinite amount of time in their cloud. I bet that a lot of people will buy this device despite of this, even those who claim to care about their privacy.

Web Performance Link

• Sachin Malhotra shares how they fine tuned HAProxy to achieve 2 million concurrent SSL connections¹⁹ at ‘Hike’.

HTML & SVG Link

• Stuart Frisby from Booking.com shares what they learned from using system fonts²⁰ and the improvements they made to a default stack which many of us are using.

²¹

JavaScript Link

• J. Renée Beach shares how to manage focus and blur in a composite widget made in React²⁴.

Going Beyond… Link

• Jonathan Taplin wrote an essay about the tech moguls dominating the free market today²⁵ and why it’s important that we as consumers are aware of the huge influence monopolies have not only on our lives but on politics, too.
• The outdoor clothing manufacturer Patagonia started to sell used clothing for little money²⁶. An unusual move for such a company as it undermines its traditional business model of selling new clothes.
• Iterating on their already existing, centralized AI technology, Google researchers shared their vision of federated machine learning²⁷. This basically means that every Google device will contribute to the training data by locally processing the information — a much more efficient and less costly approach for Google. The technology is already being tested on Android via Google’s software keyboard. Let’s see how this will work out when it comes to dealing with fake news, spam content or violence promotion in Google’s search results.
• Mastodon is a relatively new social microblogging network, aiming to replace Twitter. It uses a federated approach, which means everyone can create an instance that shares data with other instances. But it’s not as easy as one would initially think. By providing an instance, you suddenly become responsible for the content of other people, which can be a pretty nasty experience as this story shows²⁸.

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.smashingmagazine.com/2016/04/consider-react-native-mobile-app/
2. 2 https://www.smashingmagazine.com/2012/05/how-to-choose-the-right-face-for-a-beautiful-body/
3. 3 https://www.smashingmagazine.com/2017/01/algorithm-driven-design-how-artificial-intelligence-changing-design/
4. 4 https://www.smashingmagazine.com/2017/04/photoshop-illustrator-sketch-ui/
5. 5 https://github.com/airbnb/react-sketchapp
6. 6 http://airbnb.design/painting-with-code/
7. 7 https://github.com/airbnb/react-sketchapp
8. 8 https://github.com/airbnb/react-sketchapp
9. 9 https://github.com/airbnb/react-sketchapp
10. 10 https://caddyserver.com/blog/caddy-0_10-released
11. 11 https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter
12. 12 https://medium.com/@auchenberg/hello-remotedebug-ios-webkit-adapter-debug-safari-and-ios-webviews-from-anywhere-2a8553df7465
13. 13 https://github.com/fardog/secureoperator
14. 14 https://developers.google.com/speed/public-dns/docs/dns-over-https
15. 15 https://developers.google.com/speed/public-dns/privacy
16. 16 http://www.cybertec.at/why-favor-postgresql-over-mariadb-mysql/
17. 17 https://www.theregister.co.uk/2017/03/31/researchers_steal_data_from_shared_cache_of_two_cloud_vms/
18. 18 https://motherboard.vice.com/en_us/article/amazon-echo-look-bedroom-camera
19. 19 https://medium.freecodecamp.com/how-we-fine-tuned-haproxy-to-achieve-2-000-000-concurrent-ssl-connections-d017e61a4d27
20. 20 https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f
21. 21 https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f
22. 22 https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f
23. 23 https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f
24. 24 https://medium.com/@jessebeach/dealing-with-focus-and-blur-in-a-composite-widget-in-react-90d3c3b49a9b
25. 25 https://www.nytimes.com/2017/04/22/opinion/sunday/is-it-time-to-break-up-google.html?_r=0
26. 26 https://python.sh/2017/4/patagonia-begins-selling-used-clothing
27. 27 https://research.googleblog.com/2017/04/federated-learning-collaborative.html
28. 28 https://cherubini.casa/why-i-shut-down-wizards-town-and-left-mastodon-6d4e631346b3
29. 29 https://wdrl.info/donate
30. 30 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook

I’ve been a long time Photoshop and Illustrator user. Both programs are really useful and powerful, and they’ll remain a key part of any digital artist’s or designer’s toolset, including mine. However, for all user interface, web and icon design workflows, I recently converted to Sketch¹. Here is why.

While Photoshop is awesome at what it does, defining what it is might not be so easy anymore. I remember watching a storyboarding tutorial² by Massive Black³’s El Coro⁴ (unfortunately, it doesn’t seem to be available for sale anymore). In it, he says that 17 or so years ago, Adobe had no idea that digital artists were using Photoshop to digitally paint pictures! So, it had to catch up with its own user base by adding more — you guessed it — painting features.

I feel that the same kind of thing happened a bit later with Photoshop and user interface design. It was the only robust graphics tool that people knew or had access to some years ago, so they started using it for UI design, as well as for illustration and photo editing⁵.

⁶

Then, as a result, Adobe started adding more and more features targeted at interface designers, even though the program was initially intended and designed for a completely different purpose.

Switching To Illustrator: The Annoyances Link

From Photoshop to Illustrator Link

Because using Photoshop for user interface design is, in my view, a needlessly painful experience (and I am not alone¹⁰ in this view), I first tried switching to Illustrator. Illustrator made things much better for me for a few reasons: Dealing with a lot of artboards is easier; I can select any object on any layer or any artboard with a single click, without ever having to hunt down layer names in the Layers panel; also, exporting assets in the latest Creative Cloud versions has been greatly improved; and so on.

Illustrator’s vector nature has a lot of advantages for designing icons and scalable interfaces, and using it I find it much easier and quicker to draw, modify and expand shapes. It can export my assets to SVG, and it gives me control over the SVG output code. Illustrator also feels more appropriate for this type of work because the paradigm of working with vector graphics is very similar to working with web technologies (containers, CSS styles, document structure, vector fonts). After all, web browsers are essentially vector-rendering engines.

Problems With Illustrator Link

However, I hit some silly problems every now and again. For example, previewing a design on a mobile device — there is simply no software that allows me to do this directly. Photoshop has Device Preview¹¹, but it’s for iOS only, and there is no such tool for Illustrator. So, I had to use a third-party tool named The Preview¹². And every time I wanted to device-preview a screen, I had to copy my Illustrator artboard into Photoshop, scale it up (I always work in mdpi¹³, and my devices are xhdpi or xxhdpi), and then run The Preview on my device — which sometimes refused to work and which doesn’t support scrolling.

Also, even with the addition of CC libraries¹⁴ and with Illustrator’s dynamic symbols feature, some tasks remained kind of annoying or tedious, like using a large set of icons. In Illustrator, there is no simple and straightforward way to quickly add a premade icon and to quickly override its size or color (without creating a bunch of duplicates).

Specifying My Files Link

Specifying my files¹⁵ was a problem for me, too. It is, of course, my job to provide developers with a well-specified design. This helps to prevent questions such as “What is the distance between this element and that element?” and “What font size is this text object?”

Photoshop has a whole bunch of specification tools, but I’ve never used them. There aren’t that many for Illustrator, and all have their drawbacks. Arguably, the most feature-full is Specctr¹⁶, but I had technical difficulties running it (also, it has no dp as a measuring unit). So, I ended up using a slightly modified version of the Illustrator Specify script¹⁷ to measure the sizes of and distances between objects for design specifications. However, as great as that script is, specifying my designs with it was still rather tedious and time-consuming.

My Deal-Breaker Link

While these problems are arguably annoying and slow down my work, they aren’t things that I couldn’t get used to and overcome. However, the two Android projects I’m currently working on are a file manager and an email client — which means that a lot of my high-fidelity mockups are full of lists, avatars, file icons, file sizes and other types of data.

To further complicate the situation, both projects come with a light and a dark UI theme. Also, a lot of my designs need to be tailored to both phones and tablets in both landscape and portrait modes. This means a lot of copying and pasting, symbol-editing, typing, selecting and deselecting, and so on.

Illustrator’s Dynamic Symbols Link

Admittedly, Illustrator’s symbols and libraries features can be handy and save me some manual labor. But they can be quite limited — for example, one can’t have multiple iterations of the same symbol or of the same library graphic. For me, this meant that I couldn’t use the same symbol (say, an icon or a button) in both my dark and light theme mockups because I couldn’t change its color without modifying the symbol graphic itself. The same goes for the library feature.

Problems With Data-Driven Design in Illustrator Link

Now, the most efficient way for me to avoid having to copy and paste is to have all text entries — see “Subject,” “From,” “Content Preview” and “Time” in the example below — as variables and to dynamically load predefined strings of data for each entry.

¹⁸

This is, in fact, possible in Illustrator¹⁹. I could create my spreadsheet with data, import it in Illustrator with the help of a plugin²⁰ and be ready… with one huge caveat, however: There can be only one variable entry per iteration of the file!

This makes the feature perfect for something like a business-card project, where you’d want to keep the design the same and only change some text (such as the name and phone number). When you export the final PDF files, you’d simply iterate a hundred times through a spreadsheet of data to get a hundred different names and phone numbers. This would produce a hundred nice, corporate business cards for a hundred happy employees.

However, this behavior renders Illustrator’s data features pretty much useless to me, because I need to populate a lot of of text entries simultaneously, each with a different string, on multiple artboards, and so on.

A Potential Creative Cloud Solution? Link

If you must stay in the Adobe Creative Cloud realm, or if switching to a Mac is not an option, there still might be a solution. Adobe’s new tool, Adobe XD²¹, handles working with dynamic data²² fairly well. However, because it’s a new tool, it can feel limited in other ways. Also, Adobe XD’s Windows version currently lags behind the Mac one.

The Solution: Switching To Mac And Sketch Link

Because of all of the little (and big) issues mentioned, I started to search for a better solution. So, I thought about the Sketch app.

I hadn’t had a Mac for the previous three years, and when I did have one I’d never used Sketch on it. However, I missed the operating system, and it always bothered me that Mac users always get the best software gadgets! I did plenty of research on Sketch and on other tools such as Origami, and I got tired of hacking my way through Framer⁶²²³ on Windows.

So, a couple of months ago, I decided to switch back to a Mac — both at home and at work.

Enter Sketch! Link

Sketch cures a lot of my pains — and not just by itself, but also with the help of its vast plugin ecosystem. Compared to Illustrator and Photoshop, Sketch is focused on the needs of the UI and icon designer. And, unlike Photoshop, Sketch was made for UI design²⁴ right from the start; UI wasn’t an afterthought.

Of course, it’s not perfect. I miss things, such as Illustrator’s Knife tool when I draw illustrations; it lacks some handy filters; there is no basic Photoshop Layer Styles alternative; and so on. But that’s kind of beside the point. Sketch doesn’t seem to be aimed at artists doing complex vector illustrations, and it only covers the very basics of raster editing.

At first, if you’ve been using Photoshop for all of your design tasks so far, you’ll be in awe when you see how you’re able to directly select any piece of graphic on any layer with just a couple of clicks or less. And if you (like me) have been also using Illustrator, then you’ll be impressed by Sketch’s more powerful Symbols feature, better artboard organization and more intuitive interface.

Measuring distances and objects is so much fun in Sketch! I just hold the Alt key, mouse over the objects on the canvas, and I’m able to see all margins, paddings and sizes. I can adjust them on the fly and just have fun, while keeping my designs really neat.

²⁵

The little things are also important! One example is the ability to do simple math in an object property’s input field in the Inspector panel²⁶. I can scale a rectangle object by typing something like 12 / 3 or 2 + 2. Very helpful sometimes.

InVision’s Craft Plugins Link

I’ve already mentioned Sketch’s plugins. And InVision’s Craft plugins²⁷ are probably among the most powerful and useful.

Craft actually solved my aforementioned problem of loading data into my designs. For the email app I’m working on, I can now create a list of (actual or fictitious) email addresses, subjects, content strings and more in a spreadsheet. I only need to make sure that every spreadsheet column’s first entry serves as the title (for example, “Content”).

²⁸

Unfortunately, the Craft plugin doesn’t support importing data in XLS, CSV or ODS format. It only supports JSON (a file format specifically for exchanging data). I use Google Spreadsheets, and because it doesn’t support direct exporting to JSON, I have to first save to a CSV file, then use an online CSV-to-JSON converter to get the format I need.

³⁰

³²

Now, I only have to save the JSON file on my computer and drag it into Craft’s Data panel.

³⁴

The entire conversion process might sound complicated, but it only takes a couple of minutes.

Now, I only need to tell Craft which Sketch text field corresponds to which JSON string. Then, I use the duplicate functionality to make as many duplicate entries as I want:

³⁵

As for those avatars with letters inside, I don’t need to bother with a spreadsheet. Here’s what I did instead: I used a nested symbol³⁶ to tint each avatar with a different color. And Sketch’s overrides feature does the job of dynamically replacing each letter!

³⁷

This approach works well for expanding phone designs into tablet designs because I only need to adjust Sketch’s text fields.

³⁹

My Other Favorite Sketch Plugins Link

It’s not only about the Craft plugin, of course. I rely on quite a few plugins in my daily work, and all of them help me to be more efficient.

Sketch Style Inventory Plugin Link

As mentioned, the projects I’m currently involved in come with a light and a dark theme. Having to provide designs for both themes and for each screen can be tedious and time-consuming. However, using Sketch’s Style Inventory⁴⁰ plugin, I can select all items in all of my artboards by name or by current color or by another property, and then batch-adjust them as I like.

⁴¹

⁴³

Thus, I can recreate my designs for different themes in just a minute!

Sketch Icon Font Plugin Link

Adding a Material icon (or an icon from another font icon set) is a no-brainer with the Sketch Icon Font plugin⁴⁴. It takes only seconds! I don’t have to leave Sketch, and the icon can be scaled, colored and edited in any way I like.

⁴⁵

Skala Preview Plugin Link

Sketch includes previewing functionality called Mirror⁴⁷. However, it works only with iOS devices and web browsers (for web design mockups). Skala Preview⁴⁸, on the other hand, provides excellent device-previewing functionality and (what is most important to me at the moment) support for Android devices.

Skala by itself does not support Sketch directly, but there is the Sketch Preview⁴⁹ plugin to help with that. It’s reliable and has never crashed for me, but every now and again I have connection issues. What I love about it is the simple scrolling functionality that The Preview and Photoshop combination lacks.

Swatches Plugin Link

Sketch has functionality similar to Photoshop’s and Illustrator’s swatches. It’s called global and document colors, but it has some minor limitations. For example, the palette colors can’t have names; they can’t be organized in subfolders; and no commonly used palettes come preloaded in Sketch. Also, I think the margins around the color squares are a bit too wide, so a large palette might not fit comfortably in there.

⁵⁰

The Swatches⁵¹ plugin improves the situation. It comes preloaded with plenty of standard palettes, such as the Material palette, Pantone and others. I can mouse over a color to see its name, and I can apply it as a fill or stroke color or copy its HEX value with just a click.

⁵²

Zeplin Plugin Link

Last, but not least, I need plugins to create design specifications. One of them is Zeplin.

Zeplin⁵³ is a cloud-based toolset for creating automated design specifications and for designer-developer collaboration. Its main feature is that it reads and parses all of your Sketch artboards in a file, uploads them to a web server, and provides a web interface for other collaborators to view them. Once your artboards have been crunched and uploaded, anyone who checks them out on a computer can click and hover about and see all margins, paddings, fonts, HEX codes and other properties of all objects in the design.

⁵⁴

This approach to design specifications is quite helpful because it saves the designer from the time-consuming task of doing specifications manually. It could also reduce confusion and misunderstanding with the development team.

Other features of Zeplin that I find quite helpful are: organization for multiple projects, screen versioning (kind of like Git⁵⁵ but designed for screen mockups), project style guidelines, and optimized asset exporting.

A potential downside of Zeplin is that some companies may have concerns over its cloud-based nature.

Sketch Measure Plugin Link

Zeplin is good for managing and working on entire projects that contain many screens. However, if you’re looking for a simpler (and free) solution, you may want to choose something else: Sketch Measure⁵⁶.

Using this plugin, you can specify your own design document or let the plugin do the dirty work. Like Zeplin, it will export a web page with your design on it, together with an interactive specification overlay! Unlike Zeplin, everything is done locally, but you won’t have the extra project-management tools at your disposal.

⁵⁷

Compress the generated files to ZIP, give them to your developer, and you might save yourself quite a few hours of work!

Managing My Sketch Plugins Link

With so many plugins, one needs a reliable way to find, install, manage and update them. Sketch’s built-in manager only lists the plugins that are already available, allowing the user to enable and disable each one. This can be useful when you want to debug a plugin that’s acting up, but having to manually search for and install new plugins can be a hassle.

The best solution to this problem is probably the Sketch Toolbox⁵⁸ app, a simple yet very useful tool. It allows you to install (and uninstall) almost any Sketch plugin out there with a single click. Highly recommended!

⁵⁹

Prototyping And Framer Integration Link

Sometimes, static mockups don’t quite cut it if you need to communicate a more complex idea to developers, particularly for motion design and microinteractions. Some very good tools for interactive prototyping⁶¹ are out there, and each takes a different approach to the task.

My prototyping tool of choice is Framer⁶²²³.

Framer Link

Framer takes the programming approach: The designer is required to program their prototype in CoffeeScript⁶³. The prototype is immediately previewable in Framer Studio and can also be viewed on actual devices or in the browser.

I personally like the coding approach to creating prototypes, despite the steep learning curve. It will pay off eventually, because programming gives me a lot of control, and it also forces me to think a bit like a developer, which can be an advantage.

⁶⁴

Using Framer and Sketch Link

Including Framer in my Sketch workflow was fairly easy because it integrates by default. I only need to import the Sketch design file I’m working on, and I can immediately start to animate or otherwise manipulate any group of layers. The Framer-Sketch integration supports multiple artboards, but you can only import a single page at a time.

I’m still figuring out the most efficient way to work with Sketch and Framer. Currently, I think it’s best to have large per-project Sketch files, with separate pages for each screen of the app (or website) I’m working on. This enables me to easily reuse and organize all project assets, such as icons and buttons, into dynamic symbols. However, this approach produces larger files and slows down the Framer importing process. So, usually I’ll copy and paste the elements or screens that I want to prototype into a new file and then import them from there.

How Photoshop And Illustrator Fit My Workflow Now Link

I’ve moved to Sketch, but Photoshop and Illustrator are still part of my toolbox.

Because Sketch is a tool for UI design, it’s not the best-suited for creating very complex illustrations, and it doesn’t easily replace a solid vector application for illustration (nor does it attempt to).

⁶⁶

I currently use Illustrator when I want to use my Wacom tablet for freehand drawing work, or if I’m doing something that requires complex artistic brushes and filters, or if I need to trace a raster image and convert it vectors. And, though nowadays I rarely do vector work for print (posters, leaflets, etc.), if I have to, I would again choose to use Illustrator.

Now I exclusively use Sketch for all interface and icon design tasks, but I continue to use Photoshop when I need to edit or refine product imagery, when I’m in the mood for some digital painting or drawing, or when I want to enhance a few photos. It has also happened a few times that I’ve opened Photoshop to quickly stitch together a few UI design mockups, so that I could send design previews for approval.

Conclusion Link

Sketch has solved many of my problems and has made my day-to-day life as a user interface designer a lot better. Mundane little things such as measuring distances and sizes are now much easier and quicker for me. I can now automate parts of my workflow and use real data in my Sketch designs. I can also organize my files more optimally (with the help of pages, artboards, states and symbols); I can reuse assets (through the dynamic symbols feature); and more.

Sketch also has a vibrant community. All of the open-source (and mostly free) plugins that completely transform the app and add some excellent functionality make Sketch a very versatile tool for UI design!

I really like Sketch’s focused approach, and hopefully I’ll continue to discover tiny features, tricks and plugins that make me go, “Whoa, that is so cool!”

If you’re a UI designer and are still using mostly Photoshop or Illustrator, I highly recommend you try Sketch. You might never want to look back!

(mb, al)

Footnotes Link

1. 1 https://www.smashingmagazine.com/tag/sketch/
2. 2 https://www.youtube.com/watch?v=uXg2reSswpA
3. 3 https://massiveblack.com/
4. 4 http://coro36ink.com/
5. 5 https://www.google.com/search?q=photoshop+tutorials+for+editing+photos
6. 6 https://twitter.com/smashingmag/status/839750650233749505
7. 7 https://twitter.com/smashingmag/status/839750650233749505
8. 8 https://twitter.com/smashingmag/status/839750650233749505
9. 9 https://twitter.com/smashingmag
10. 10 http://hackingui.com/sketch-design/a-year-using-sketch/
11. 11 https://helpx.adobe.com/photoshop/how-to/live-preview-mobile-device.html
12. 12 https://play.google.com/store/apps/details?id=com.spreadsong.pspreview&hl=en
13. 13 http://sebastien-gabriel.com/designers-guide-to-dpi/
14. 14 https://helpx.adobe.com/creative-cloud/how-to/creative-cloud-libraries.html
15. 15 https://www.smashingmagazine.com/2014/10/front-end-development-ode-to-specifications/
16. 16 https://www.smashingmagazine.com/2013/11/specctr-an-adobe-illustrator-plugin-freebie/
17. 17 https://github.com/adamdehaven/Specify
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/03/strings-preview-opt.png
19. 19 https://www.youtube.com/watch?v=eCBrK8tZAXQ&feature=youtu.be
20. 20 https://github.com/Silly-V/Adobe-Illustrator/blob/master/Variable%20Importer/VariableImporter.jsx
21. 21 https://www.adobe.com/products/experience-design.html
22. 22 https://medium.com/@anirudhs/project-comet-designing-with-real-data-959beccb5c1a
23. 23 https://framer.com/
24. 24 http://blog.mengto.com/sketch-vs-photoshop/
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/03/hovering-animated.gif
26. 26 https://sketchapp.com/learn/documentation/the-interface/inspector/
27. 27 https://www.smashingmagazine.com/2017/02/design-with-real-data-sketch-using-craft-plugin/
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/03/spreadsheet_titles-large-opt.png
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/03/spreadsheet_titles-large-opt.png
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/03/spreadsheet_save_as-large-opt.png
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/03/spreadsheet_save_as-large-opt.png
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/03/csv_json-large-opt.png
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/03/csv_json-large-opt.png
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/03/import_json-animated.gif
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/03/populate-animated.gif
36. 36 https://www.youtube.com/watch?v=uXg2reSswpA
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/03/overrides-animated.gif
38. 38 https://medium.com/ux-power-tools/designing-a-top-nav-in-one-symbol-295b8b0a05a5
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/03/resizing-animated.gif
40. 40 https://github.com/getflourish/Sketch-Style-Inventory
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_inventory_menu-large-opt.png
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_inventory_menu-large-opt.png
43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/03/dark_theme-preview-opt.png
44. 44 https://github.com/keremciu/sketch-iconfont
45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_icon_plugin-large-opt.png
46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_icon_plugin-large-opt.png
47. 47 https://www.sketchapp.com/learn/documentation/mirror/mirror/
48. 48 https://bjango.com/mac/skalapreview/
49. 49 https://github.com/marcisme/sketch-preview
50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_palette-preview-opt.png
51. 51 https://github.com/Ashung/Sketch_Swatches
52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/03/swatches_plugin-preview-opt.png
53. 53 https://zeplin.io/
54. 54 https://www.smashingmagazine.com/wp-content/uploads/2017/03/zeplin-animated.gif
55. 55 https://www.atlassian.com/git/tutorials/what-is-git
56. 56 https://github.com/utom/sketch-measure
57. 57 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_measure-animated.gif
58. 58 http://sketchtoolbox.com/
59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_toolbox-large-opt.png
60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_toolbox-large-opt.png
61. 61 https://www.smashingmagazine.com/2016/09/choosing-the-right-prototyping-tool/
62. 62 https://framer.com/
63. 63 http://coffeescript.org/
64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/03/framer-large-opt.png
65. 65 https://www.smashingmagazine.com/wp-content/uploads/2017/03/framer-large-opt.png
66. 66 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_app_dream_car_by_mirko_santangelo-large-opt.jpg
67. 67 https://dribbble.com/shots/1303723–Sketch-app-Dream-Car
68. 68 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_app_dream_car_by_mirko_santangelo-large-opt.jpg

↑ Back to topTweet itShare on Facebook

This content is sponsored via Syndicate Ads

Sometimes you have to step back and ask why a tradition exists. In mobile-first design¹, serving an image in three sizes — one for smartphones, one for tablets and one for desktops — using media queries and responsive images has become a tradition. But is it the best solution?

It’s most likely better than doing nothing, but how well does it actually work? And is there room for improvement? In this article, we’ll look closely at how well the one-size-per-form-factor approach really works and how we can use smart content delivery networks to improve image performance.

Further Reading on SmashingMag: Link

• Don’t Get Crushed By The Load: Optimization Techniques And Strategies²
• Turn Your AMP Up To 11: Everything You Need To Know About Google’s Accelerated Mobile Pages³
• Why Static Site Generators Are The Next Big Thing⁴
• Automate Your Responsive Images With Mobify.js⁵

Images Drive Payload And Performance Link

Performance is a complex aspect of making a website. Here, we’ll focus on images because it’s low-hanging fruit on the tree of performance. The effort you spend on optimizing image delivery will most likely have visible and measurable results — especially if you have a website with many images, such as an e-commerce website or an online news website.

Over time, websites have become more image-heavy. Research by Radware⁶ indicates that the average e-commerce web page is over 1.3 MB; 64%⁷ of that payload comes from images. More than half of your users (and potential customers) will abandon your website if it takes longer than three seconds⁸ to load. Literally millions of dollars are at stake in this question of how images affect web performance.

Picking The Right Sizes: Breakpoints Link

The three image sizes referred to above are usually implemented with responsive images (and a polyfill) or with JavaScript that hijacks image-loading.

The latter was the way to go⁹ until responsive images came around. The idea was that the browser shouldn’t load the images by reading the HTML, but instead should load and execute JavaScript to figure out which images to download. Usually, it would query the viewport’s width, compare that width to the static breakpoints and then select the best fit out of a few predefined image sizes. As we now know, this approach has two major problems. First, it breaks browser preloading¹⁰; the browser can’t start loading images referenced in the markup right away, rather having to wait for the JavaScript to execute. Secondly, there is a significant risk of an oversized version of an image being downloaded because you have only a few predefined image sizes to pick from.

Replacing this JavaScript-based image-loading with the new responsive images¹¹ specification addresses the preloading issue. However, the risk of an oversized version of an image being downloaded is just as significant if you have breakpoints for only three image sizes.

Picking the right, and right number of, breakpoints is not an easy task. Even if tools¹² exist to help you in the process, breakpoints tend to be a moving target. The ideal breakpoints today could change tomorrow due to new screen sizes and form factors.

How Many Breakpoints Do You Need? Link

How serious is the problem of breakpoints for images? Asked differently, how many versions do you need to save more? Over time, the number of image requests will increase the variety of devices and screen sizes visiting your website.

An experiment done by ScientiaMobile¹³ found that it takes on average only eight requests for a given image to surpass three breakpoints. The experiment collected data over four months and compared the size of the image actually served to the optimal size for the particular device and screen size. Due to the wide diversity of devices of different forms and shapes accessing the web over time, statistically, the ninth image request will require a size that does not exist and most likely will get the performance penalty of downloading a larger and heavier image than necessary. The more requests you get for a given image’s URL, the more fragmented will be the devices making the requests: At 180 requests, you will surpass 11 breakpoints. At 1,000 image requests, you will surpass 20 breakpoints.

¹⁴

Note that this experiment only covers image sizes. Especially with responsive images, you should also consider alternative image formats (such as GIF, JPG, PNG and WebP) for more efficient file compression. For example, you could send WebP to devices supporting it and PNG to others. This means you would need to render a few formats for each image size. You can see how this quickly multiplies image versions and requires additional logic to serve the appropriate version.

The experiment further explains¹⁷ that the strategy of using media queries and breakpoints to serve three different images to different device sizes reduces the payload served down to 63% of the original scenario in which only one size is served to all devices. But we can go further: Introducing content negotiation and server-side image optimization and resizing would reduce the payload to 16%!

¹⁸

Dynamically optimizing images for any device and screen size will, according to the experiment above, reduce the payload by about 75% compared to using the three static breakpoints.

Smart Content Delivery Networks Link

As we’ve seen, displaying an image on a web page might not be as easy as it sounds if your performance budget is tight. There are many factors to account for. Picking the best breakpoints, image formats, image sizes, compression rate and implementation is challenging enough, but the solution should also be future-friendly. As new devices and form factors are launched into an already diverse landscape, supporting legacy devices becomes just as important as supporting the latest fashion. Automating this process seems to be worthy of serious consideration.

We are starting to see several turnkey solutions that optimize images in this manner. These solutions are smart content delivery networks (CDNs), and they have intelligence built in at the edge of the network. These CDNs offer device-aware image optimization by combining three elements: device detection, real-time image optimization and a classic CDN cache geographically close to the end user. Unlike regular CDNs that do not have an interest in minimizing your payload, smart CDNs seek to improve web performance by tailoring your payload to the capabilities of the device and even network conditions.

What options do you have if you want to implement a dynamic image-optimization CDN on your website? Be aware that there are a lot of image-manipulation services for performing static operations such as resizing, cropping and filtering. This is not what we’re looking for. Nor are we looking for a service that uses JavaScript to determine the best size and format of an image.

We’re looking for a CDN that implements server-side logic, or “edge logic,” using client hints²² or device detection to determine the best image size and format. This is known as content negotiation²³. This makes the list significantly shorter. Let’s compare the most prominent contenders:

	Client hints	Device detection	Push or pull
Cloudinary24	yes	no	push/pull
imgix25	yes	no	push
ImageEngine26	yes	yes	pull

All of the above use client hints to determine the best size. Client hints is a fairly new initiative, currently implemented only in Blink-based browsers, and it includes some additional information about preferred image sizes in the HTTP request. The server can use this information to generate a properly sized image. Even though support and adoption of client hints are growing, only about 3% of image requests²⁷ come with client hints. This number is expected to grow. In the near future, however, it would be a good idea to pick a CDN with device detection built in, so that all images are optimized. If you want to play around with the concept a bit, look for a pull-based CDN (which requires less configuration) with a trial option or a free tier.

All of the CDNs mentioned above require registration. Cloudinary have a free tier. ImageEngine a and Imgix has a trial concept, which is convenient if you want to try before you buy. Let’s have a closer look at ImageEngine. ImageEngine is pull-based, which means you don’t have to upload your images anywhere before you start. With ImageEngine, you simply keep images on your server, and ImageEngine will pull images from there on demand.

Once registered for ImageEngine²⁸, you will get a dedicated hostname, which is your CDN’s URL. The only thing left to do is prefix all of your image sources with that hostname.

Say your original image tag is like this:

 <img src="https://mysite.xyz/dog.png" alt="My dog"> 

Your new image tag with ImageEngine would look like this:

 <img src="//{personal-token}.imgeng.in/https://mysite.xyz/dog.png" alt="My dog"> 

In this example, ImageEngine makes use of client hints and device detection to determine the optimal pixel size, compression ratio and image format for each device requesting the image. If you want to be more specific, all services listed above support explicit “commands” to override any automatically detected parameters. For ImageEngine, requesting a 360-pixel-wide image in WebP format would look like this:

 <img src="//{personal-token}.imgeng.in/w_360/f_webp/https://mysite.xyz/dog.png" alt="My dog"> 

Of course, to make use of client hints, remember to enable it in your markup. Put this in your <head> tag:

 <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width"> 

ImageEngine even has a WordPress plugin²⁹, which handles all of this automatically for you.

The process for imgix and Cloudinary is similar, aside from some additional setup.

All of the services can, of course, be combined with responsive images. With any CDN that supports client hints or device detection, the sometimes verbose markup for responsive images becomes much more maintainable. Responsive images with client hints is covered in greater detail in the article “Leaner Responsive Images With Client Hints³⁰” here on Smashing Magazine.

Conclusion Link

Moving from one image for all kinds of devices to the common one-size-per-form-factor approach is definitely a step in the right direction. The downside is that, from a performance perspective, the approach is too general. There is more juice to be squeezed. However, from a development and maintenance perspective, it might make sense because three image sizes, or breakpoints, are manageable. The logistics are still fairly easy to maintain. But we must not forget why we do this. We’re not doing this for ourselves as developers, but for our end users. Hence, automating this process if we can makes sense. This is not a job for humans. Offloading this task is a win-win: easier maintenance and less data transfer.

Smart CDNs give you core CDN functionality, as well as dynamic and automatic image optimization for any size and form factor by using client hints and device detection at the edge of the network. Experiments suggest that payload savings can run as high as 84% compared to serving one static image, and run around 75% compared to the common one-size-per-form-factor approach.

Luckily, a few smart CDNs are out there already. It’s fairly easy to get started and measure the difference. Once you’ve created an account, you can put up a simple page and run it through WebPagetest³¹ to see the difference.

(da, vf, al, il)

Footnotes Link

1. 1 http://www.lukew.com/resources/mobile_first.asp
2. 2 https://www.smashingmagazine.com/2013/08/dont-get-crushed-load-optimization-performance-techniques-strategies/
3. 3 https://www.smashingmagazine.com/2016/02/everything-about-google-accelerated-mobile-pages/
4. 4 https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/
5. 5 https://www.smashingmagazine.com/2013/10/automate-your-responsive-images-with-mobify-js/
6. 6 http://www.slideshare.net/Radware/radware-sotu-spring2014infographic
7. 7 http://httparchive.org/interesting.php
8. 8 https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
9. 9 https://www.smashingmagazine.com/2013/07/choosing-a-responsive-image-solution/
10. 10 http://www.stevesouders.com/blog/2013/04/26/i/
11. 11 https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/
12. 12 http://www.responsivebreakpoints.com/
13. 13 https://www.scientiamobile.com/page/three-image-sizes-enough-rwd-sites
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/01/content-delivery-network-image-1-large-opt.png
15. 15 https://www.scientiamobile.com/page/three-image-sizes-enough-rwd-sites
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/01/content-delivery-network-image-1-large-opt.png
17. 17 https://www.scientiamobile.com/page/three-image-sizes-enough-rwd-sites
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/01/content-delivery-network-image-2-large-opt.png
19. 19 http://imgeng.in
20. 20 https://www.scientiamobile.com/page/three-image-sizes-enough-rwd-sites
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/01/content-delivery-network-image-2-large-opt.png
22. 22 https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/
23. 23 https://en.wikipedia.org/wiki/Content_negotiation
24. 24 http://cloudinary.com/
25. 25 http://imgix.com/
26. 26 https://web.wurfl.io/#image-engine
27. 27 https://www.scientiamobile.com/page/client-hints-wild
28. 28 https://web.wurfl.io/#image-engine
29. 29 https://wordpress.org/plugins/wp-imageengine/
30. 30 https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/
31. 31 https://www.webpagetest.org/

↑ Back to topTweet itShare on Facebook