The new web era contains exciting features which makes this web more awesome and helps to fill the void between the native and web applications which was once considered inconceivable.
These new features coming to web standards are not only buzz words but they allow developers to make their web applications faster and more accessible while upgrading the user experience progressively and still keeping the site accessible if the user’s browser does not support these capabilities. (Spoiler: More about this at the end )
As a developer and web aficionado, I was compelled to write technical story about features in progressive web applications that make them very exciting such as Web Push notifications which is a vendor free way to enable the ability of receiving push notifications in web applications but before I go down that path, we should boil things down and question ourselves Why we want to build a Web application that provides a great experience on slow connections and works when the user is not connected to the Internet, which increases the accessibility of the application instantly.
slow internet and empathy
Slow experiences create problems for many people worldwide, especially for those who don’t have large data plans with fast bandwidth capabilities. These days I don’t have to travel far in order to feel the effects of how strongly it handicaps people worldwide, but the empathy struck home when I moved to an area with a slower Internet connection because of poor af signal coverage.
As of now, I have been receiving approximately 0.17 mbps speed on my desktop connection which is incredibly low for what my usage used to be in the past, I experience such slow speeds usually in the peak hours, it ranges from this speed to about 0.6 mbps and is a far cry from previous provider I used to be on which was not particularly great but had stable speed and unlimited downloads.
More people should try out what Facebook did with their 2G tuesdays to give their developers feels of their very own product on slow 2G connections for an hour to connect them with millions of users who browse their applications in similar or worse conditions every day and on devices that have much lower resources. I can feel the frustration for developers but it’s positive to say that such an exercise is a good lesson to build products with empathy at their core. You can also take similar action today by going into Chrome Developer Tools Network Panel and throttling the speed of your network to match those of 3G connections and ask yourselves if the performance of the application you are building for feels right to you.
There are a lot of NOs said when the speed of connection is slow and each site is not able to load and provide the same fast and interactive experience to the user. NOs in many cases are there because of the unoptimized experiences of web applications and we can convert them into YES with a better attention on the performance and page load times of web applications.
Metered Mindset
User behavior is different although human beings crave for abundance, people are modest when they know their resources are limited and it is required for survival and better access to information that at times people use their data plan (a.k.a packages subscriptions in the telecom lingo here) a little bit more smartly and only when needed.
This data costs precious money and is quite expensive, given that many people are not even ready to pay money for it in the first place, and it’s slow too which makes it even more precious and a decision to visit each website for important information or sometimes to make a purchase or sell something consumes time and people are already too busy to spend a minute or so waiting for a page to load unless it’s Ludostar on web somehow. Web can be better if we help users achieve their goal quickly and while doing so make it a frictionless experience so they can do more in less time.
Being mindful of Web Issues
Websites which provide low latency experience on mobile connections and perform reliably on unreliable connections lead to higher engagement among users and lesser bounce rates bringing back users to the site more frequently. Better engagement provides more opportunities for the businesses to monetize and causes direct increase in the clickthrough rate (CTR) if it contains advertisements.
Low latency experiences for your mobile site can lead to longer average sessions by about 70% and cause 25% better ad viewability which can grow mobile ad revenue for businesses upto 2x which ain’t too shabby if you ask me.
Sites are experiencing bigger chunk of their traffics from mobile devices and this chunk is even greater for developing world exceeding the 90% users threshold on mobile, since most of the people in the developing world will have mobile as their first screen, lowering the barrier of entry for an application is extremely important to gain a larger user base and perform well even on cheaper and lower performance devices.
Low data consumption experiences can lower the barrier of entry for many of the users, as there are no app installs, credit cards or sign ups required to open an application. The wait times are lower than installing a mobile app, and given that app boom is pretty much over, you are losing users if not gaining by not giving web application much needed attention. Jumia’s new mobile web experience requires 25x less data storage and has bounce rate 50% lower than the previous mobile site.
OLX India, a popular portal to buy/sell things experiences 90% of their traffic from mobile devices but still most of the conversions were happening on their native mobile app, however, on the analysis of their mobile site, they found it to be slow and the monetization suffered because of slow loading ads. After rebuilding their mobile site experience, OLX India’s bounce rate dropped by 80% and they have since seen a 250% increase in engagement.
developing better solutions
By this time, I am hopeful you are convinced that the user expectations for speed quality are higher than ever and we need to supercharge the web experiences we build, to deliver fast, performant and secure content to any screen.
Issues that exist with the mobile web are real but these can be solved by analyzing the performance of your applications and then reducing the performance bottlenecks that exist in the application following the best practices.
Browser evolution and PWAs
Browsers evolve with each day, introducing new features and performance improvements, instantly enabling people worldwide to do more with their applications, new browsers come bundled with features such as Service Workers enabling native like futuristic experiences on the web.
Web applications can utilize the new upcoming features of the web by progressively enhancing the user experience if the browsers support the features such as ServiceWorkers to enable instant loading and offline first applications on mobile and desktop.
Web Push Notifications can be used to engage and retain users of your application by providing them alerts about different events going on, without the hassle of installing a native mobile and just with a few clicks.
As evident from the case studies of companies, building a Progressive Web Application (PWA) can cause direct increase in user engagement and in mobile ad revenue. A PWA might be just right for your brand if you want fast and reliable experiences for your users even with low data and resources consumption.
learning to develop next generation web apps
Building next generation web apps which follow the best practices and make use of the latest features in the browser is a long journey and also requires a lot of learning. Developers at companies such as Google have been building optimized sites that are performant for mobile and share their experience openly on the web while doing so.
Google developers have built a dedicated portal for Web in order to learn more about the best practices and patterns to build their own solutions according to the needs of their users.
The Web portal also provides information on the advanced tooling that’s available to debug, analyze and optimize the performance of your applications such as best in the world Chrome Developer Tools which is crucial tool for web developers and a guide about it allows you to get the most out of this tool.
Improving on the fundamentals of web
Google Developers Web Portal contains a comprehensive guide on Web Fundamentals which needed a special mention because of the helpful information it contains for building the web.
Web Fundamentals has been written by the contribution of many developers who are experienced in writing battle tested code for the web and are familiar with good patterns that have been found useful to optimize the websites. Topics such as UI & Design and Web Application Architecture have a major emphasis in this guide and are covered in their dedicated sections to provide more in depth knowledge.
This guide gets very handy when building progressive enhancements in your application since features such as Service Workers and Web Push Notifications are covered in detail and there’s helpful documentation about it's inner workings and implementation.
Most of what you’ll find coming to modern web will probably have it documented here at some point if it’s crucial to modern web experience. So keep an eye on this helpful resource and join me in learning more about Web Fundamentals.
This is about Open Web
Major chunk of information Google Developers Web Portal contains is directly related to open web standards and has little or no relation to the Google so you are not going to be tied in any vendor lock by converting this information into action and you will be building on your own independently on the web just like many other millions of awesome web developers like you <3.
Ending note...
This responsibility of improving the state of the Web and providing better web experiences to users worldwide fall on our shoulders and information is there to help us make better applications which truly make lives easier for people all around the globe so you can sleep and relax well knowing somebody far away from you is making good use of the application you built and it’s working just fine on unreliable offline connections by using Progressive Enhancements. If you do this, Godspeed! and If I meet you, we’ll have to hug cos you are making the web (coincidentally my favorite place too) better which ties us and connects us all together even though we might be living quite far away so we can collaboratively play a small role in making this big world a better place. <3
Top comments (1)
Thank you for giving this a read. I wrote this article tired of local poor web experiences I have seen people building. Many people still does not give about making their applications accessible and I wanted to answer the why for my self and others.
Thank you to the wonderful dev.to community and this platform for making it so easy to write developer blogposts with markdown.
This article is not perfect and there might be typos, grammatical errors or just plain wrong things. I did a little research before writing this but that does not make all my points right. If you think I am wrong here Please! provide me with feedback. I am dying to hear from you. Thank you and Love for all!
Also Thank you Ben and Dev.to team for making this platform I love it and thank you to Shirley from Clarifai for introducing me to dev.to platform. It's awesome.