The Changing Web: April 2019

Ollie's Photo by Ollie Jackson


The Changing Web is a series of articles noting discoveries or announcements from across the web.

We consider what the changes could mean; how will they affect how we interact online? What influence might they have on design trends? What opportunities do they present? And how can you prepare for them to stay ahead of the curve?

We keep our ear to the ground so we can call out the fads, report on the good stuff and celebrate the awesome.

Aside from the man who failed a breathalyser from eating too much fruit, the UK government leak over Huawei’s involvement in the rollout of 5G, and Scott getting a haircut, we read a lot of headlines and saw some exciting changes throughout April.

Here’s a summary of those we feel have the potential to change the web as we know it:

  • Lazy-loading is being added to Google Chrome
  • Progressive Web Apps gaining native support in Google Chrome
  • The launch of Product Tours by Intercom

Lazy-loading is being added to Google Chrome

This month, Google announced that Chrome 75 (set to be released in May) will support lazy-loading by default. At present, implementing lazy-loading often requires the use of javascript libraries, so the news of a native implementation will be welcomed by developers.

Lazy-loading won’t be enforced by Google Chrome. It will be at the discretion of the developer. Through the use of a ‘loading’ attribute, you are able to specify if you want Chrome to use lazy-loading.

The attribute supports the following values:

    • lazy: is a good candidate for lazy-loading.
    • eager: is not a good candidate for lazy-loading, loads all assets immediately
    • auto: this is the default setting if no attribute is defined and means the browser will determine whether or not to lazy-load.

    By deferring the loading of images and other resource-hungry assets until the user scrolls to them, we can speed up the initial load time of the page.

    Wait, what’s lazy-loading?

    Typically, when you visit a website, the entire contents of that page will be downloaded and rendered by the browser. But this presumes that the user will want to view the entire page. This assumption means that the website could be downloading assets (such as images), which often drastically slows down load time, only to find that the visitor never sees them.

    Lazy-loading is a technique that defers the loading of assets that are not immediately needed or seen. Instead, resources are made available only when the visitor requires them.

    A common practice is to lazy-load any resources that appear ‘below the fold’. (Below the fold being the portion of the page that the visitor must scroll in order to see. The term originated from the world of print and references how newspapers are folded meaning only the top part of the front page is visible but is now synonymous with websites too.)

    By deferring the loading of images and other resource-hungry assets until the visitor scrolls to them, we can speed up the initial load time of the page. Which, when you consider that Google’s page speed research found that on mobile 47% of visitors expect a web page to load in 2 seconds or less, speed plays a huge part in visitor perception of your brand and the effectiveness of your website.

    Lazy-loading, especially when coupled with subtle animations and transitions, can enrich the user experience whilst also delivering a performance boost under the hood. Win win!

    Lazy Load Images
    One common way to use lazy-loading is to only display images as and when they become visible to the user

    Progressive web apps gaining native support in Google Chrome

    Lazy-loading isn’t the only significant addition coming to a future release of Google Chrome. In Chrome 75, Google is planning on raising awareness of Progressive Web Apps (PWAs for short) by notifying users if the website that they are viewing is available as a PWA.

    Progressive web apps? Enlighten me.

    Progressive Web Apps have been around for a number of years. They are essentially a hybrid of websites and native mobile or desktop applications. Both of which have their advantages and drawbacks.

    Websites are easy to access. Whereas applications require installation.

    Websites live in the browser. Whereas apps live in an operating system.

    Users can treat websites rather fleetingly, whereas apps generally receive more engagement - not least because installing an app is more of commitment and therefore requires more ‘buy in.’

    What if there was a solution that took the best aspects of a website and combined the best aspects of a web application? Meet Progressive Web Applications.

    PWAs are essentially a website that functions like an application. They are accessed via the browser, but can be saved to the desktop (or the homescreen on mobile) in much the same way as apps are from Apple’s App Store or the Google Play Store.

    Changing Web Pinterest
    How Pinterest appears as a desktop application when installed as a PWA with Google Chrome

    The advantage of a PWA is that they are generally easier to maintain (and update) than native applications because they are not at the mercy of an app store or reliant on a particular operating system. You can build, update and deploy your application whenever and however you want without worrying about third-party platforms.

    If you’re thinking about whether a progressive web app is right for your business, there are a few prerequisites that you need to bear in mind to ensure that your PWA is delivering the best possible experience.

    Google have assembled a comprehensive list of what they believe to be the basic requirements of a PWA:

    1. Should be secure and served over HTTPS
    2. All pages should be responsive across tablet and mobile
    3. Should be available in offline mode
    4. Works across all browsers
    5. Fast to load (even on 3G)
    6. Metadata is provided to allow it to be added to the home screen or desktop

    When creating a PWA, you’ll also need a .webmanifest file, which is responsible for providing key information about the application - including the icon that should be used when the app is added to the homescreen or desktop.

    It is still early days for Progressive Web Apps and there remains some confusion over precisely what qualifies as a PWA. But the theory behind them is a solid one. To deliver a more accessible and engaging web for all.

    Product tours launched by Intercom

    Intercom is an all-in-one solution that combines sales, marketing and customer support software. In their words, they help you to ‘acquire, engage and retain customers.’

    As part of their commitment to fulfilling that mission, Intercom have just released Product Tours, a service that allows you to introduce customers to your product via ‘guided experiences that drive adoption.’

    Intercom Changing Web
    Product Tours is one of a number of Intercom services that also include Enquire, Engage and Support

    Upon logging in to your application for the first time, users will be prompted to complete the guided tour. This means you are able to introduce them to the interface, walk them through certain processes, draw attention to key features, and prompt them to complete specific actions to familiarise themselves. All of which helps to drive adoption and increase retention rates.

    Guided product tours have grown in popularity in recent years and are now considered one of the most effective methods for onboarding new customers.

    Putting together product tours requires a great deal of thought and understanding to make sure you're guiding potential customers through functionality in ways that resonate with them. Which actions should be highlighted? Do users already understand this feature? Is the number of steps in the tour a frustration?

    Guided product tours have grown in popularity in recent years and are now considered one of the most effective methods for onboarding new customers.

    What’s notable about this release is that it is claiming to be code-free requiring much less technical input, which is a huge departure from existing JavaScript-driven solutions that are complex to implement.

    Harnessing Intercom’s existing understanding might be a good way to test out product tours inside your application without committing to a potentially costly bespoke solution.

    We imagine that product tours will continue to grow in popularity. Recognising this trend and the benefits the tours bring, it might soon become 'the norm' for new users to expect an initial walkthrough to ease them in.

    Summary

    So there’s a look at three notable announcements from the month of April; support for lazy-loading, progressive web apps in Google Chrome and Intercom’s release of Product Tours to help create in-app walkthroughs.

    It’ll be interesting to see how the upcoming changes to Google Chrome will influence the popularity of PWA’s and what impact native support for lazy-loading might have on user expectations.

    Performance, or perceived performance often has a huge impact on the success of a website or application. Going forward, we’d expect more websites and applications to be built inline with the requirements of progressive web apps so that, if the need arises, you are better placed to be able to transition to a PWA.

    And native lazy-loading within browsers presents a good opportunity to quickly and easily highlight the value of spending the time on a robust and considered approach to how all resources are loaded on a website and inside an application.

    In the world of web, things move at such a fast pace. Tech giants like Google and SaaS apps like Intercom constantly push boundaries and redefine the ways in which we interact online. They drive change, influence user behaviour and set new expectations - we’ll bring you the latest so you can keep up to date and make sure your online presence stays ahead of the curve.


    Ready to get started on that new web project?
    Let's get to work! →