Mobile WordPress Development often gets the short emd of the analytics stick. Fortunately, Hootsuite publishes annual reports on the state of the Web World which clearly shows the pivotal role mobile devices play on the Web. Mobile in their many forms play everywhere in contemporary computing. For the past 5 years these reports have marked two inexorable trends – 1)mobile devices have replaced desktop PCs as the primary Web connection [55% to 45%] and 2)more online purchases are done using mobile devices. Here is the Worldwide big picture:
The surprise is the continuing 4% growth in the use of the Interent and the pivotal role of mobile devices, a stunning 92% usage rate on the Web.
Here the diverse types of mobile devices in use catches the eye but also presents the problem of fitting display pages to markedy different screen spaces.
Finally the time spent on mobile devices is sustantial but also varies widely with the applicationused. Clearly games, social media and messagingin in its many form currently dominate the mobile scene on the Web.. This presents the second challenge for websites seeking to attract either viewers or customers or both – how do you attract such an audience.
Summary of Mobile Usage
Here are recent trends that readers need to be aware of:
Mobile phones are “sales conversion devices”
1 – 19% of al US retail sales in 2019 were online; 22% will be done online in 2023 – OuterBox
2 – But Amazon in 2019 had 52% of US online sales $280B of which $49B by 3rd Parties – FinOnline
3 – Walmart confirms that 70% of website traffic is mobile and 50% become sales
4 – 80% of shoppers use a mobile phone in a physical store – and 10% then buy online.
5 – 85% of travellers use mobile devices to book travel activities – GrandView
6 – More than half of searches related to auto parts, services, and maintenance come from mobile – Google
However, there are recurring problems with getting mobile pitches to wok. Here are the killer flaws according to Google. 53% of mobile website visits are abandoned if a mobile site takes longer than 3 seconds to load. But the average mobile webpage still takes 15.3 seconds to load. And then after the slow load many mobile pages appear as a desktop misfit – hard to read or follow. This leads to the crux of our Meetup discussions:
5 methods to make your WordPress Mobile Pages Effective
First task, speed up your website. If you have more than 30,000 visits per day and are averaging 3 -6 seconds average response time, consider using Cloud hosting or dedicated VPS-Virtual Private Server. Cloud Hosting usually delivers Backups, SSL, better security, and sub-2second response time for $300-600 per year. These days Managed or Shared Hosting cannot deliver such speeds with any consistency. Finally we will be offering a Toronto WordPress Solutions Paid Meetup outlining a VPS Hosting setup matching Cloud Hosting speed for half the Cloud Hosting cost[security and CDN may add to the price.. Look for a meetup in early June. Check here.
Second task, use a PageBuilder/Themebuilder that can deliver 2nd order responsive page designs. First order responsive designs deliver pages that automatically adapt to the display screen space. The common approach is to downscaling images and objects for tablets and resized windows. For mobile display windows. sections/rows and columns are stacked to fit the mobile landscape or portrait display. Meanwhile, menus are converted into hamburger icon buttons revealing a popup vertical menu. All of this is done automatically by the PageBuilder/ThemeBuilder.
Second order responsive design allows developers/designers to customize the look and feel of each page for its Desskyop, Tablet and mobile look. independently as necessary. Special device icon buttons are linked to styling options for such thing as typography, border, margin, padding and 12 other style settings in the case of Elementor. This means as required every page can have a custom look for its desktop, tablet and /or mobile view. For the more advanced Pagebuilder, designers can customize the display breakpoints for special IOT-Internet of Things display screen styling.
The third task is to determine how to best speedup mobile page speed. The reason that this is crucial is because Google is now ranking websites primarily on their mobile page speed not the old desktop page speed method. Yes, desktop speed still matters but both Google and end users expect mobile pages to work fast and flawlessly.
There are two primary ways to bring speed to mobile pages – PWA and AMP plugins. Think of PWA-Progressive Web Apps as code that makes your WordPress pages act like a Android or Apple Web App. In fact developers can register their customized PWA apps in the Apple and/or Android stores for direct purchase or free download.
But how do you goose the speed of your WordPress pages on client mobile devices? Already recommended is a speed improvements on your webserver. If and only if you can improve your page speed to 3 seconds or less then proceed with PWA; otherwise try the AMP option described below. The next step is to install PWA-Progressive Web Apps. These are icons buttons delivered to your mobile and that look and behave like Apple or Android apps but are using your Web Server to deliver Page contents.
Now the secret of the WordPress PWA is the json manifest that contains the icons and setting used when the client clicks on the PWA icon on their mobole phone. Another key PWA code is the Javascript Service Worker. This performs caching operations which speed access back to the server or offline rerieval of pages when the phone is offline. The latter is useful when a client wants to fill in an service order or menu selection say for a restaurant purchase.
Bottomline – Service Worker’s caching does speeds up mobile operations on the mobile device but eventually is dependent on the speed of backend operations on the WordPress server to complete the order And if this backend speed is too slow, developers may want to consider using AMP.
Fourth task is to consider using AMP to enhance your mobile interface features and speed. AMP- Accelerated Mobile Pages are different from PWA because they
Fifth task is to decide which specialized mobile tasks you want to enable. The list of plugins is long, most are freemium, and the options are diverse. Just as important Gutenberg Block Themes will start to impact how “dedicated” mobile themes fit in the broader WordPress Ecosystem.
Kinsta offers 7 plugins that help users create alternate mobile devoted theme and component builders.
SeedProd offers 11 plugins that deliver specialized mobile tasks like banner ads or affiliate frameworks. 5 plugins are also on the Kinsta list.
SearchEngineJournal features two provocative plugins – Jetback from Automattic and WP Touch. Both have some easy to use mobile enabling features, but also both have some distinct downsides.
Finally, consider the free Mobile Zoom Workshop Wednesday April 18th at 6PM for discussion of these topics in more detail.
ADDENDUM ON TESTING PROBLEMS
- WebP Converter for Media required control panel changes to .htaccess and Apache2 config permissions for image files
- WebP Express likewise had Apache2 image configuration problems
- Loading Squoosh.app files required one image at a time to convert & imports to Media library
- Because of mobile render blocking and start time issues I am testing 10 fastest WordPress themes in 2022