Progressive Web Apps On Hype. Why Is Responsive Web Design Not Enough?

The Progressive Web Standard makes the web faster and not only responsive, but adjustable to the user's current needs. Responsible Web Design was only the beginning of the big change in web development.

At Chop-Chop we get to 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. The range of tools that are used to create and evolve the online content today is so wide, that the web creation process has become completely different than some 10 years ago.

The world goes mobile

When 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). A popular scenario was that the owners of the pages were providing additional, mobile versions of their websites in order to reach the new audience. I remember the first mobile sites I visited as rather simple pages with some basic information. They were not, in any way, interactive.

For the web developing industry, growing mobile market was the time that everybody, every business wanted a mobile version of their website. Countless hours of designing and developing were spent to provide solutions that satisfy the users both on mobile and desktop devices. Separate websites for each were in common — and they still are quite popular on the web. With their whole inventory, such as separate regular- to tiny-sized images and separate URLs, that might cause servers to loop and are quite tricky to maintain when it comes to site analytics and SEO. Having two websites to keep and update is simply costly.

Responsive Web Design takes over  

The RWD standard was firstly described by Ethan Marcotte and his definition combines three concepts: flexible widths, flexible images and media queries. Those concepts were known already, Marcotte has only put them 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. No matter if we are 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 fits itself to the screen. But that doesn’t solve the problem with the weight of a file and with the loading time of the media-rich websites. The images used for websites' aesthetics 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 was taking so much work, that it was actually better to build the new website from scratch. Here too, new problems have emerged and kept slowing down the delivery process.

One of them was that the design style was a hard one for the web designers 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.

browsers issues with speed was often a subject of jokes - here the meme about the top browsers and the Internet Explorer never-ending lateness
web meme - a joke about the browsers' speed

Mobile Applications - the “pocket web”

Somewhere in between, the iPhone was introduced and that completely changed the mobile industry. Bringing up its sleek product design and User Experience advanced seriously, the first smartphone set a new standard for a mobile device and it's content presenting. Shortly after the smartphones hit the market, the boom for mobile apps has 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.

The UI of the smartphone, typically full of installed mobile apps
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 has partly answered the problem with web development work - there was no more need to adjust content to endless screen sizes and browser types
adjusting web design to multiple desktops - 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.

Axis in 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) are the future of the web software, being fast, responsive, adjustable with their contenty to different environments and screens. PWAs are the W3C standard what makes them relaible concept to follow after with the business strategy.
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 from the pwastrats.com - the latest news on conversion improvements of many established brands' websites
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.