We love mobile applications because of their rich user interfaces and experiences, but the discussion of whether a comparable experience will ever be possible on the web is a never-ending one. Web publishers struggle to engage their mobile users due to the complex stages of app creation and engagement, which typically are:
- Create an application
- Publish it in the App Store
- Wait for it to be approved and finally…
- Promote it to your users for installation
A precedent was set in June 2011 when the Financial Times launched their HTML5 browser-based application, proving to the publishing industry that it was possible to succeed outside of App Stores. They were followed by the New York Times, Amazon (Kindle Cloud Reader), Atlantic Wire and others. Today we’re seeing more and more development taking place around HTML5, including Firefox OS by Mozilla, backed by Telefonica.
This demonstrates that the Mobile Web has the potential to go beyond responsiveness and evolve into a new and exciting environment where a site can benefit from environments accessible only to apps. Where user interactions are more important than just page views and ultimately, all apps are interlinked into a Web of apps.
WordPress Mobile Pack Plugin
WordPress powers 23% of websites in the world and their presence has a tremendous impact on us all. In 2013, Matt Mullenweg – one of the founders of WordPress, asked developers to view and use WordPress as an application platform. The community began to see that WordPress could be used to power database-backed applications that run within the context of a Web browser.
Any developer will tell you that coding a single page web application comes with challenges. The plugin WordPress Mobile Pack by Appticles helps bloggers, publishers and other content creators package their existing content into single-page mobile web applications which run cross-platform on iPhone, Android and Firefox OS.
You can download the plug in from the Plugins section on WordPress.org or within your WordPress installation. Then activate the plugin.
Features of the WordPress Mobile Pack 2.0:
• Select theme and customize colors & fonts
• Add icons and logo
• Change cover art
• Customize content
Next time you visit your website from a supported device (iPhone, Android, Windows 8 or Firefox OS), you’ll see the mobile web application loaded.
Readers can add the mobile web application to their homescreen and run it in full-screen mode, creating a reading experience which mimics native apps.
Customizing colors, fonts and cover
A set of predefined color schemes and fonts can be used to customize the mobile web app. The plugin comes with 6 predefined abstract covers that are randomly displayed on the loading screen. If you want to use your own cover image, you can add one from the admin panel, together with a logo & app icon.
Tip: If you struggle to create good covers, especially if you aim to support Android, keep it minimalist and abstract. For inspiration Designshock offers some great Material Design-like covers.
From the Content area, you can choose what categories to display in the mobile web application. The Pages can be edited specifically for the mobile version. This comes in handy when adding click-to-call buttons specific to the mobile web app, while keeping the desktop content unchanged.
The Settings tab allows control over who sees the mobile web app. The plugin includes a “Preview” option that permits access only to authenticated administrators, making it possible to edit the mobile web app without the readers being aware of it.
From the Settings area, you can add your Google Analytics ID and connect with the Premium platform after obtaining an API key. The paid plans offer more themes, tablets support, AdSense integration and the option to create a custom color scheme.
There are some limitations which might impact your decision to use the the plugin:
- Limited customization options – Because it uses a single page app, theme customization is not possible without advanced technical knowledge.
- Doesn’t integrate with other WordPress plugins (e.g. WooCommerce or Contact Form)
- Doesn’t include iframes support (with the exception of video networks)_
SEO and Google
Google will expand their use of mobile-friendliness as a ranking signal starting April 21st this year. This change will have a significant impact on Google's mobile search results and the WordPress Mobile Pack app is compliant with Google’s mobile friendly test. Furthermore, Google just paid $25 million for exclusive rights to the ".app" top-level web domain and although the company hasn't announced specific plans for .app.
The chances are that you might soon be able to have your own single-page mobile web application at
http://your-blog.app. Is this something you eagerly anticipate? Or do you dread the wave of generic look-a-like apps that may be coming our way?
Elio is a open source designer and founder of Ura Design. He coordinates community initiatives at SitePoint as well. Further, as a board member at Open Labs Hackerspace, he promotes free software and open source locally and regionally. Elio founded the Open Design team at Mozilla and is a Creative Lead at Glucosio and Visual Designer at The Tor Project. He co-organizes OSCAL and gives talks as a Mozilla Tech Speaker at various conferences. When he doesn’t write for SitePoint, he scribbles his musings on his personal blog.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja