Web content with mobile experience in mind
In this post I will present how the emergence of mobile devices affected the world wide web.
Most of us probably have lived through these times and it is hard for us to feel it, but with time the line between mobile and web app gets thinner and thinner. I am about to present facts from the evolution we have witnessed here. If you are interested in the differences between the two types of apps, I intend to make a separate post on that soon.
I will start the story a little bit earlier than expected – back in 2002 when the German carmaker Audi launched the reportedly first responsive website – meaning a website that restructured its content based on the size of the window in which it is displayed. Although this was long ago, it was already becoming obvious that consumers use devices with different parameters to access the web content and special effort was needed to make the experience of all as smooth as possible.
The first iPhone was released at the beginning of 2007 and the first generally available Android was released end of 2008. The emergence of smartphones put a lot more stress on the need to design your website so that it displays nicely on different, usually smaller screens. It didn’t take much time until people realized that responsive design wasn’t enough. Now creative people chose to design first for smaller displays and just then enrich the content for the larger ones – a concept introduced by Luke Wroblewski in his article at the end of 2009. He called his concept “mobile first”.
 |
Visualization of mobile first concept. |
Ever since the first phones were launched, they continued to rise to prominence. A huge push in this direction was done by Google when they announced in March 2016 that the search results from their search engine will prioritize mobile-friendly websites. Just few months later, at the beginning of November it was announced that web consumption from mobile devices overtook that from desktop machines. This tendency continues on as can be observed in the latest published report.
Having this in mind all big players turned their attention to optimize the experience of their users on mobile devices. Facebook launched their instant articles in May 2015 and Apple followed with Apple news later the same year and Google launched their open-sourced Accelerated Mobile Pages (AMP) project at the beginning of 2016. All three technologies define certain rules, restrictions and guidelines for websites. If one complies to the particular format, then his pages will load faster in general, but the improvement will be felt especially on the associated platform. Furthermore, compliant content is given priority in search results in the corresponding places. Additionally, Facebook instant articles and Apple news open inline, which increases immensely the user experience.
 |
| An example of Facebook instant article. |
Google search results – AMPs signified with lightning |
Mobile first was the first step. The next one were Facebook instant articles, Apple news and AMPs. However, all these did not prove enough. Engineers continued to strive for even more mobile-native experience for their users. Thus we come to Progressive web apps first conceptualized by Alex Russell in June 2015. These are web applications that have to satisfy additional set of requirements that allow their users to experience them as if created for their mobile platform. Apart from being fast to load and performant, these requirements include that the applications are available offline, they are experienced like installed and enable user re-engagement. These applications even bear the promise of outdoing the native mobile applications with the fact of being linkable and fresh (always running the latest version). However, in order for all these new functions to work there is work to be done on the side of the mobile browser. Chrome was the first browser to provide support for PWAs in their 57 version released in March 2017. As of the moment of writing this post this is still the only browser to support PWAs, which means that they are still not that progressive (work for every user, regardless of browser choice) as they claim to be. We still have to wait and see the adoption rate PWAs will get.
 |
An example of PWA – Twitter |
Couple of days ago yet another step in the direction of driving web content to mobile platforms was made. Google announced that they will stop regarding pages as mobile-friendly if the content that is shown on the mobile version does not match that of the desktop. This is called content parity between canonical and mobile pages. With this move content providers will be forced to make all their content mobile-friendly or they will risk de-classification. This move has the prospect of altering the “mobile-first” ideology to “mobile only” as the approach of enriching on larger screens will not work anymore. We will continue to follow the way in which Google applies this new policy, however the impact is expected to become noticeable in the next few months.
This concludes the story for today. As I write this last lines I realize quite much happened in relatively short time. Putting it all here was an interesting exercise that helped me get better structure of the events. I hope it was useful for you, too.