Progressive Web Apps On Hype. Why RWD Is Not Enough?

PWA and RWD

At Chop-Chop, we work with the latest trends in web development and the latest available solutions for online projects. Thus, I have quickly discovered, that responsive websites based on Responsive Web Design are not everything that business has to think about these days. After you get familiar with the principles of Progressive Web Apps, you will understand that RWD is only the beginning.

Web development, tightly connected with web design is one of the fastest-growing industries. With the range of tools used today to create and evolve online content, web creation process has become completely different than 10 years ago.

The world goes mobile

The “mobile web” was becoming available in the early 2000s. We were all excited that we could finally go online with our mobile devices (which were then a little clumsy). In order to reach the new audience, the owners of the pages provided additional, mobile versions of their websites. I remember the first mobile sites I visited as rather simple pages with basic information. They were not, in any way, interactive.

Growing mobile market meant every business wanted a mobile version of their website. Developers spent hours on designing and developing solutions for both: mobile and desktop devices. Separate websites for each were in common — and they still are quite popular on the web. Having two websites to keep and update is simply costly.

Responsive Web Design takes over  

Ethan Marcotte first described the RWD standard. He combined three concepts in his definition: flexible widths, flexible images and media queries. Marcotte simply put these, previously known, concepts together, as the direction for the websites. The rise of RWD connects with the early years of the mobile web. But the real “trend” for it was peaking only some time ago. And it is still much popular approach to web design.

The flexible, or fluid (or liquid) design uses percentages in the website layout (instead of absolute ones), so the content expands or shrinks, having its size based on user's device screen width.

Responsive Web Design has moved the advantages of fluid design one step further with CSS3 media queries. Media Query recognises the type of device being used and presents the layout elements accordingly.

Websites built with RWD have one URL and one set of code. So, there is no need to design multiple websites or worry about multiple URLs. Whether we're visiting a website on a tablet, smartphone, or a laptop - we will see the same site.

Responsive Web Design flow by Shakuro
RWD in action by Shakuro at dribble.com

Responsive Web Design - why is it not enough?

With RWD, website content adjusts to the screen. But that doesn’t solve the problem with the weight of a file or with the loading time of the media-rich websites. Images come with good quality, but even when they’re behaving fluid-like on the screen, it is still the same file we display. It’s being visually scaled by the browser’s engine, but not resized.

The website speed matters a lot, as users want to have everything immediately, now! We are all pretty busy, aren’t we? But there were other things that affected the RWD concept, such as the scale of development work. To convert an outdated website into the responsive one took so much work, that it was simply easier to build a new website from scratch. Here, too, new problems have emerged and slowed down the delivery process.

First of all, the design style was hard to control when multiplied for different screens. And then, the Retina displays (Apple’s technology) require images twice as big as all of the other screens.

There is sometimes too much of unnecessary code loading with the RWD site. Some older devices with outdated operating systems and browsers would not handle such a site. As far as I am aware, older versions of the Internet Explorer have been quite resistant to compliance with RWD.

Browser speed vs responsive web design

Mobile Applications - the “pocket web”

When the iPhone was introduced, that completely changed the mobile industry. It had sleek product design and seriously advanced User Experience. This smartphone simply set a new standard for mobile devices and mobile content. Shortly after smartphones hit the market, the boom for mobile apps started.

Applications are actually programs, little bits of software with limited functionalities that we can install on our mobile devices. By now, the app industry has produced billions of those, all paving their way to our smartphones. Between them, we get games apps, a wide range of tools for practically everything, TV and radio apps, social-life apps and much much more.

For the owners of the websites, the apps have opened a new channel of serving the content. Some of these apps are a little like the mobile versions of the websites. But there is a growing number of those that are designed in particular for a different context, bring new experiences to the users, have additional functionalities and UI-elements that trigger the engagement. As they are applications, they would work smoothly and fit the device’s screen every time.

Smartphone UI
The smartphone's desktop full of apps

Native apps - new experiences in the mobile world

Out of the features that were not known before, mobile applications have a function of push notifications. It is a big drive for engagement and returning traffic from the mobile channel, and what's the real deal is that the notifications are being displayed to the user even in the offline mode or when out of the app. Planning the notifications with the right attitude, we might bring them all back and convert.

Another thing that the mobile app can do is to stay fully functional after the network is disconnected. It is downloadable software, — a program, after all. The offline mode is the step towards a large number of internet users around the world who rely on unstable and limited connections.

On the top of it, mobile applications get to access (with user’s permission) the device’s hardware equipment, such as fingerprint scanners, GPS, microphone and camera. It opens new possibilities of the experiences that can be introduced, from Augmented Reality to location-based communication with the users. The connection with hardware also supports security, i.e. when allowing for multi-factor authentication.

Web content dispersal

It is happening as I type these words: the World Wide Web has spread all over and it’s still expanding, filling new areas at a fast pace. With all the channels to maintain, update and have designed according to the current standards (keeping an eye for a search algorithm, too), the web development industry has at some point stuck between all the devices, that are at stake.

Responsive Web Design on multiple devices
Adjusting web design to multiple devices is time and resources consuming task

We have produced solutions that are stopping us from growth, adding too much labour to the process instead of speeding it up.

What about smart TVs, smart watches, interfaces of smart fridges or microwaves? How to adjust to the screen of a window? With growing Internet Of Things and the demand for the data space, the bandwidth and the speed, web developers needed to get out of the screen box.

We use voice search already, so how about an audio content? Or the user’s inability to hear or to see? What is their journey like? Are we ready to design an inclusive web that everybody can use?

Let’s face the facts: we have all these new tools available now! Tools for researching, prototyping, UX-designing and animating. We have new versions of HTML, of the CSS or JavaScript. All-equipped with traffic data, heatmaps and analytics, we know much more about what the user really does online. And so we know, that every user is different. Having all of the user’s data understood is still unprocessable for a single human being. But, there is so much that can be automated, extracted, eliminated or reused. Are we taking the advantage?

Scalable Vector Graphics — a future-proof standard for modern web styles

Designing with SVG is becoming popular.  It is a vector format made for web purposes, where dimensions have been replaced with shapes - to explain it briefly. Enlarging the SVG file does not result in a grid of blurred squares, but scales it's (defined with XML, as numbers) shapes and colouring. Scalability benefits in the quality — the design remains sharp, regardless of the stretch. No more pixelosis, that is!

Scalable Vector Graphics vs Raster bitmap image - the quality test
"Raster vs Vector" at vector-conversions.com

SVGs are files lightweight in size, too. They don’t slow down the website’s load time. They can work as a container for images (jpegs, png, videos) and scale them! And finally, they are motion-ready - with the use of XML code, they can be easily manipulated by CSS and JavaScript in real time.

When designing with the SVG format, the features of every element are connected with CSS descriptions of its size, gradient or transparency. Designers can use different fillings (such as colours, patterns or other marks) and apply one or some to the same piece. Then, a web developer can define an event (or many events) for this element. It will transform, triggered with various scenarios, that are defined by JavaScript and commanded by the CSS grid.

As the designers worldwide learn and advance the new way of creating vector-based visuals, it seems like we have finally found the way forward - the visual content will display exactly the way we have designed, fully independent from the screen variables or the operating system.

What is more, it will transform along with the context changes and the user’s actions. With SVG’s three-dimensional capability, they are a perfect format to work with towards a virtual web and mixed reality.

7D holograms - the mixed reality projects

Advanced text formatting now available with Variable Fonts

There is one more advancement of recent years, that is helping us to free from unstable connections and speed-related issues. In the previous years of web development, font files, that are used on the page needed to be downloaded each time we open the URL. I think you’ve guessed that: that way causes them to occupy the bandwidth while the page is loading. It was keeping the creation tight, too - as the designer could only use a few fonts within the project.

The solution has been brought up and we can now build the web with the use of Variable Fonts. Instead of a separate file for every font style, we get a single Type and its variables defined with axes. It can be dozens of those axes within the same Type, such as Weight, Width, Slant, Optical Size, Italics, Grade and much more. The weight of a single file isn’t affecting the speed. With those extended styling possibilities and the push for use of Variable Fonts, creative professionals are already exploring different axes to create great, lightweight designs.

Variable Fonts: the weight, the width and the slant
Weight width slant axis - variable fonts morphing, image source:
https://zeichenschatz.net

Progressive Web Apps now on the hype

Gartner predicts that by 2020 Progressive Web Apps will replace 50% of consumer-facing apps.

With improved User Experience that PWAs bring, people will spend more time on websites, see more advertisements and buy more. With notification updates, they will be more likely to visit their web app more often.

Progressive Web Applications or PWAs are technically not a technology, but more of a methodology, a concept that involves a combination of particular technologies to make powerful web apps.

Progressive Web Apps (PWAs for short) - the future of the web software
Progressive Web Apps: the future of the web development is here.

PWA Minimum Requirements

To build a proper Progressive Web App, we need to introduce the following requirements:

  1. A secure HTTPS connection - to make all traffic safe. The service worker should be allowed to securely take action on behalf of your app.
  2. W3C Standard Manifest attached to the PWA code - to determine the experience and behaviour of the app, including language, menus, pages or images that are used.
  3. The network independency of the Progressive Web App - to access it at any available network, offline or with limited bandwidth (it can be managed through a service worker).
  4. PWA's full responsiveness - to present its content on any type of device, from desktops to tablets and beyond, to IoT.
  5. Cross-browsing compatibility - to have a web application working with every browser without frictions.
  6. A unique URL for each page of the PWA - to enable deep linking and help content to be furtherly re-shared in the web.

Wait, but… what is a “web app”?

We know the official industry’s standard definition of what certain demands the website software has to meet in order to be considered a Progressive Web app. Leaving the “progressive” aside for a bit, I will deconstruct the “web” and the “app” terms, trying to answer the question of what the web app is?

As the World Wide Web never changes its primary functionality, it stays the “web” — no matter where, how and what way it’s content is being presented to the “receiving” person (known as “the user”). So, we are the users of the web. We all understand that being on the web requires the network connection, the device, the search... and the app, whenever we need to access things on the web that aren’t available via browser tab, but that we reach directly from the screen of our mobile devices. Sometimes it ain’t even things, but simply a different UI.

Turning now to the app’s description, it stands for more like a tool. A tool that allows the website’s stuff to be browsed in a way, which is mobile — meaning on the go: quickly, rapidly, restricted to some kind of urgent purposes, and first of all — available on the one’s smartphone, as this device’s type is commonly named “mobile” (from the ancient term of “mobile phone” — whenever it sounds quirky, smartphones really were once a voice-communication only devices).

One web to serve them all

The smartest engineering heads on the planet, associated in Consortium of W3C or employed by the market leaders like Google and Microsoft, have for a long time discussed the needs of the speeding web industry and the global society facing it, primarily. They came up with a set of standards for a new type of a content-presenting tool - the web app.

The reason is that the term “mobile web” was escalating the bias of they are different types of the web. While the web shall remain and be perceived as one organism, device independent and content-adjusting (or at least in the desired scenario). In my understanding, the web app was thought as the solution to free the content from its surroundings and present it in accordance with the user’s actual needs.

Web Application is a software connecting user between many types of media that one uses, behaving accordingly to the context and device. A software that is running smoothly across all types of screens and operating systems.

PWA — standard for the future web

Progressive Web App brings the concept of a web app to the reality of every-day development tasks, providing clear rules of DIY. Much useful for those who look further ahead in their online strategy and for the web developers that make the PWA concept live, using the code.

PWA is a web standard, where “progressive” means as much as the continuous progress of the online world’s capabilities.

The nature of Progressive Web Apps will soon require a new generation of full-frontend developers. They will not only write the CSS but will know the implications of layout scripting and what does make browsers behave in the desired or unwanted way. These developers will understand the platform’s UX and the process of critical rendering path in PWAs.

Progressive Web Apps' building process will need even more cooperation between the stakeholders. Web developers would work closely with designers to apply app-oriented UX and mobile-first design functionalities to their web applications. Everything with a constant, empathic focus on the user, backed with a properly collected data.

Taking care of User Experience in Progressive Web Apps results in higher conversion rates: journeys without frictions, with contextual experiences and engagement triggers, make it easier for users to achieve their goals - and therefore ours.

PWA stats regarding conversion rates
pwastats.com shows latest news on conversions growth from the brands advancing with PWA

The hype for Progressive Web Apps gets intense

The initiative for PWAs has been led by Google — necessary enhancements were first added to the Chrome browser and the Android operating system. Developers are now able to deliver web-based applications that rival, or even out-perform the native apps’ User Experience.

Major players in the browsers market are rushing to deliver the best UX for Progressive Web Apps, and the web developing industry is following. PWA makers can distribute their apps through the WebAPK, Chrome browser now supports the Trusted Web Activity. The hype gets intense, for the big change of the web has started.

Subscribe to our Newsletter and get hand-picked articles

(Monthly updates. Good vibes only!)

The data you submit in the above form will be received and processed by Chop-Chop Sp. z o.o., located at Wloclawska 161, 87-100 Torun, Poland, EU. We will process the data in order to be able to provide you with marketing information. To read more on the way we handle data, please visit our Privacy Policy.