With WordPress powering 27.1% of all websites on the internet, Matt Mullenweg has set a new goal for the popular content management system: achieving a 50% market share (the majority of websites). However, he recognized that in order to reach that number and grow even further, “it’s more than just blogs and more than just websites”.
Picking up on Matt’s point and looking at the ecosystem created around WordPress (over 100M total themes downloads and +1B plugins downloads from WordPress.org), I believe it’s time for the WordPress community to step up and establish itself as a technology trendsetter, potentially defining the web trends for years to come.
Just 3 years ago, we were talking about the Year of Responsive Web Design and we’ve all seen how the stakes got raised when Google announced Mobilegeddon (April 21, 2015) and started boosting ratings for mobile friendly websites in mobile search results.
Today, with 70% mobile optimized websites being responsive, RWD has established itself as the norm among WordPress developers. Since it has become so common, it is to be expected that a new technology will rise, allowing savvy web owners to grow and differentiate themselves from the rest of the crowd. This begs the questions: what’s next? where is it all heading? We solved the screen-size issue, had a great run for a few years, now what?
[Editor’s note: RWD on its own, with no server-side optimization, doesn’t address different mobile user contexts (connectivity, input methods, hardware capabilities, etc.) Therefore all the largest players in the online space go the adaptive or the RESS route.]
I believe Progressive Web Apps are the key and I have multiple reasons to assume that the WordPress community is uniquely positioned to lead this wave.
1. WordPress REST API
The WordPress REST API is designed as a means of communication between WordPress and another piece of software, like an application or 3rd party platform. It might not seem important, but, in reality, an API empowers developers to have direct access to the data (without going through a browser) and build new ways of displaying it, outside of a classic WordPress theme.
By integrating a powerful REST JSON API in its core, WordPress will open the door to a whole new way of writing plugins and especially, WordPress themes. Theme creators will be able to introduce advanced components in their designs or, why not, even build single-page apps, without worrying about maintaining the back-end as well.
2. Web browser capabilities
The term ‘Progressive Web App’ was introduced by Google and it refers to “reliable, fast, and engaging” applications that “use modern web capabilities to deliver an app-like user experience” or “take advantage of new technologies to bring the best of mobile sites and native applications to users”.
Here are some of the key features of progressive web apps:
- Apps load nearly instantly and are reliable, no matter what kind of network connection a user is on
- Web app install banners give users the ability to quickly and seamlessly add the web app to their home screen, making it easy to launch and return to the app
- Web push notifications make it easy to re-engage with users by showing relevant, timely, and contextual notifications, even when the browser is closed
- Smooth animations, scrolling, and navigation keep the experience silky smooth
- Secured via HTTPS
- Responsive
But what are the browsers that support the above capabilities? Well, this is where it gets tricky.
Progressive Web Apps are fully supported by Chrome and Opera. Firefox supports nearly all of the features of Progressive Web Apps. Microsoft Edge is working on them. Google announced in April 2016 that Chrome has more than 1 billion users on mobile. Add it all up and you’re talking about billions of people and the majority of mobile web users.
As always, iOS and Safari are not in a hurry to get into the mobile web game: service workers, a key component for providing offline mode, are “under consideration”, push notifications and installation to the home screen through a browser-provided prompt are available in some form in Safari, but are not implemented in standard ways.
This didn’t stop The Washington Post—an early adopter of Progressive Web App technology—from making it the default mobile experience for their web users after seeing “about 5x engagement – page views per visit, number of stories read” on their public-facing beta (Joey Marburger, Head of Product for The Washington Post).
[Editor’s note: It’s important to notice that PWAs are an enhancement. PWAs don’t harm the experience on non-supporting browsers, they enhance the experience where supported.]
3. Improved mobile device performance
For years now, the hardware and software of smartphones have been technically able to handle tasks we’d formerly reserved for the desktop.
High-end smartphones are capable of managing 4K streaming, immersive virtual reality gaming and seamless multitasking (heck, even some mid-range devices can do most of that now). ARM’s new CPU, for example, provides a 50x increase in performance over chips from five years ago, with 75 percent less energy than chips from three years ago. Other chips feature similar specs: Apple’s A8 chip in the iPhone 6 is 50 times faster than the chip in the original iPhone, and its GPU is 84 times faster.
On top of that, DeviceAtlas.com, which tracks web traffic from hundreds of thousands of partner websites using their device detection platform, identified that devices with screens over 5 inches were growing fast in 2016 across all markets, with 720×1280 px being arguably the most common resolution (expected to lose its dominance in the not too distant future), leaving behind 4-inch phones (still available in large volumes).
4. JavaScript is growing
According to Stackoverflow.com’s annual developer survey, JavaScript is the most commonly used programming language on earth, preferred by both Front-End and Back-End developers. GitHub’s own study reveals a similar trend showing JavaScript as the most popular programming language.
Obviously, building a Progressive Web App requires JavaScript knowledge and a number of open-source Progressive Web Apps have already been built, either with JS libraries, frameworks or plain JavaScript.
5. App Store model is failing
Data shows that mobile apps have a hard time retaining users. Mobile intelligence startup Quettra put together some exclusive data/graphs on retention rates based on anonymized data points from over 125M mobile phones and showed that the average app loses 77% of its DAUs (daily average users) within the first 3 days after the install. Within 30 days, it’s as high as 90% of DAUs. Within 90 days, it’s over 95%.
While apps dominate the time users spend on mobile, users concentrate on using just 5 apps that weren’t pre-installed on their phones (source).
It’s hard to understand why businesses decide to go the app route and end up investing tens of thousands of dollars and several months developing and promoting the application to see just a single digit percentage of their existing web visitors converted into mobile app users.
Conclusion
As far as we’re concerned, we’ve put our money where our mouth is and we started working on WordPress Mobile Pack when it was just a mobile-friendly switcher. Now, we shifted it into a WordPress plugin that allows digital publishers to “appify” their content by selecting from a collection of mobile app themes equipped with various enhancements such as: add to home screen, offline mode and even push notifications.
WP Mobile Pack is publicly available on the WordPress.org repository and it’s a great way for both developers and non-technical content creators to start experimenting with progressive web apps. As a WordPress developer, you’ll want to dive into the code itself, so here’s what you need to know:
- Compared to a classic WordPress theme, the app logic is completely separated between frontend and backend. The backend (API) is responsible for exporting the data, while a frontend app theme (JavaScript app) renders and navigates through the content.
- Since nowadays we have a variety of resolutions overlapping between desktop, tablets and smartphones, the switch between the user’s desktop theme and the mobile theme is done by checking the browser’s user agent, to ensure that a mobile device is properly detected.
- App themes are developed using AngularJS and Ionic, with emphasis on using new web technologies, coding standards and taking advantage of automated unit testing and end-to-end testing.
- A lot of WordPress themes still use classic CSS for styling, but we believe it is important to keep things organized and fully adopt CSS extensions such as Sass or Less.
Building a “progressive” future for the mobile web starts with us, web developers and designers, looking to go beyond responsiveness. Since the App Store model is beginning to fail, publishers and businesses are realizing that Apps are not the Holy Grail. We need to give the mobile web a second chance, a chance to evolve and progress beyond format (fitting the screen) into actual app-like functionality.
WordPress has what it takes to be at the forefront of this trend and it’s up to the community to accept the challenge and steer both WordPress and the web in a “progressive” direction.
2017 is just getting started so let’s make it count!
Leave a Reply