Optimizing Your WordPress Site To Be Mobile-Friendly - A Must In 2022 - Digital.com (2023)

The way we access information has dramatically changed as of late. With mobile technology on the rise, we spend more time on our mobile devices, reading news on the go, browsing interesting websites and even doing our shopping. Where before we used our computers, we now do those tasks on our smartphones and tablets. In fact, a report from SimilarWeb states that 56% of all traffic online comes from a mobile device, and data from StatCounter revealed that mobile and tablet now gets more usage than desktop. Another interesting statistic comes from a

Another interesting statistic comes from a report by IBM which shows an increase in mobile ecommerce sales during the holiday season. Add to that the fact Google’s announcement made in 2015 which states that Google istaking mobile friendliness into consideration when ranking sites and you can start to see why it’s important to have a mobile-friendly website. And if you are a small business website owner (or is about to

And if you are a small business website owner (or is about to create your small busines website), making sure your website is mobile-friendly is crucial to your success considering 72% of consumers want a mobile friendly website.

In this article, we will show youhow you can test if your website is mobile-friendly,and how to make your WordPress site optimized for mobile devices. We will also take you through, step by step,what you can do to make sure your website visitors get the optimal user experience when visiting your website on a mobile phone. Let’s jump straight into it, how to how to make a WordPress website mobile friendly.

How to Check if Your WordPress Site is Mobile-Friendly

Before checking if your website is mobile-friendly, it’s always useful to know exactly how much traffic you are getting from mobile devices. The easiest way to do this is to use Google Analytics. All you have to do is login to your Google Analytics account and select the corresponding web property for your website. In the left-hand side menu, click on Mobile and then Overview. You will be able to see how many of your visitors are coming from desktop, mobile, and tablet devices. If you are curious which devices your visitors are using when browsing your site, you can get that information by clicking on Devices. Now that you know how much mobile traffic your website is getting, it’s time to see if your website is mobile friendly. There are three tools you can use to check this.

» Google Mobile Friendly Test

The first tool comes straight from Google and it’s very simple and straightforward to use. Open up your browser, go to Google Mobile Friendly Test and enter your website’s URL, then click Analyze. After a brief analysis, it will tell you if your website is mobile-friendly or not. If your website is mobile-friendly you will get a green message telling you so. In case it’s not, the test will tell you your website is not mobile-friendly, show you which errors are causing the problem, and guide you towards helpful resources to make your site mobile-friendly.

» Screenfly

The second tool, Screenfly is slightly more robust. While Screenfly won’t give you suggestions on how to make your website mobile-friendly, or point out any errors, it will let you see how your website appears on various screen sizes, including smartphones, tablets, and even TVs. The usefulness of this tool comes from the fact that your website might have a responsive design, but there might still be elements on your website that don’t display as they should.

» MobileTest.me

The last tool is MobileTest.me. This tool allows you to pick a specific mobile device and after entering your website’s URL you can see how your website appears on that specific device. What makes this tool stand apart from the other two, is the fact that you can actually interact with your website as if you are browsing from that specific device. This is a great way to see how your site works on mobile devices and to test some common elements like sharing buttons and sign up forms.

How to Optimize Your Website to Be Mobile Friendly

Even if you passed all the tests, that doesn’t mean your website is displaying properly. In most cases, website owners will really only test the homepage which might show up as mobile-friendly. However, once you start digging a little deeper, you might discover that there are some potential issues. For example

• Are your visitors who are browsing the site on mobile device able to click on the sharing buttons?
• Is your sign up form difficult to close thus making your website hard to scroll and see?
• What about your online shop, can your products be bought using a mobile device?
• Are the input fields big enough so you can see what you are typing?

» Social Sharing Buttons

There are many social sharing plugins available for WordPress, but not all of them are optimized for usage on mobile devices. Most of them allow you to display social sharing buttons above the content, below the content, as a floating sidebar or all of the above; in the hopes of encouraging visitors to share your content. While the intent is great, in most cases, those buttons either

While the intent is great, in most cases, those buttons either take up more screen real-estate than what’s available on a mobile device; or if you use a floating sidebar option, they cover your content. To solve this, check the plugin settings and if you can, disable the floating sidebar on mobile view, or if there is no such option, disable it completely. If your current social sharing button doesn’t perform well on a mobile device, consider using a different plugin such as

If your current social sharing button doesn’t perform well on a mobile device, consider using a different plugin such as SumoMe. SumoMe is a free plugin which has a floating share bar that automatically displays on the bottom of the screen when it detects a visitor using a mobile device. Another great option is Social Warfare which resizes all sharing buttons according to the screen size, as well as allows you to disable the floating share buttons entirely on mobile devices.

» Email Optin Forms

One of the most effective ways to grow your email list is a pop-up plugin. Unfortunately, many of them take up too much screen real-estate on mobile devices, making them impossible to close or they are so small that the user cannot read the text or fill out the required fields. If you are using a pop-up plugin, be sure to carefully test it on a variety of mobile devices. In case you need to find a plugin that will display properly on mobile devices, here are some options to consider.

If you are using a pop-up plugin, be sure to carefully test it on a variety of mobile devices. In case you need to find a plugin that will display properly on mobile devices, here are some options to consider. SumoMe, the plugin mentioned above is one of the plugins that actually displays nicely on mobile devices and it’s free. Another option is

Another option is Bloom – a premium plugin that is developed by Elegant Themes so if you decide to invest in Bloom, you will also get access to their entire suite of themes. Optin Forms is another free plugin which is responsive and displays without problems on mobile devices. It offers 5 different opt-in form designs that you can add to your posts, page, and widgets via shortcodes.

Small business owners will want to consider the HubSpot WordPress plugin. This free plugin provides forms, pop-ups, live chat, and analytics. It integrates with the free HubSpot CRM (contact database) which makes it easy to manage your leads and send automated email responses when an individual fills out a form.

» E-Commerce

If you run a small business website and rely heavily on WooCommerce, it’s crucial that your store displays and functions the way it should on mobile, as well as on the desktop. If you built your website using one of Woo’s themes, chances are your store is mobile-friendly. The developers behind WooCommerce and WooThemes have been building responsive themes since 2011 so websites using their themes shouldn’t have any issues. If you went a different route and bought a theme from a theme marketplace or you had a custom site developed, then you have two options. The first option is to

If you went a different route and bought a theme from a theme marketplace or you had a custom site developed, then you have two options. The first option is to contact your web designer and have them make sure your online store is optimized for mobile traffic. This means your product images scale depending on the screen size without appearing cut off, the shop buttons don’t extend over the allowable screen size, and the input fields on the order form trigger the correct keyboard for the right field. The second option is to

The second option is to install a mobile friendly plugin such as WPTouch or Jetpack’s mobile-friendly theme module.The downside of this approach is that your website will look different on mobile devices.

» Embedding Objects With a Set Width and Height

If you rely on embedding YouTube videos or infographics on your website, you probably noticed they have a set width and height. This might hurt the experience for your mobile visitors so the best way to ensure this doesn’t happen is to follow the tips outlined in this Smashing Magazine article which explains how to properly embed external content on your website.

» Slow Loading Times

A slow loading website will ruin your visitors’ experience not only on regular computers but on mobile devices as well, especially for those who don’t have generous data plans. A number of small tweaks like minifying your style sheets and JavaScript files, minimizing the number of plugins you use and compressing the images before you upload them to site will speed up your website. Using a

Using a caching plugin as well as investing in a CDN and a good hosting company will also make a huge difference in your website’s loading time and increase the chances of your mobile visitors sticking around. Aside from the issues mentioned above, there are a few more things you can do to make sure your website is mobile-friendly. The first and most obvious solution is to use a

Aside from the issues mentioned above, there are a few more things you can do to make sure your website is mobile-friendly. The first and most obvious solution is to use a responsive WordPress theme. If you are looking for a free responsive theme, a good place to start is the official theme repository where you can filter your search for responsive themes. Paid solutions include

Paid solutions include Genesis Framework(WP framework we use) whose child themes (we use Altitude Pro but there a free child themes out there too) are responsive out of the box, or search for a responsive theme on ThemeForest. If you’re not keen on switching themes just yet, then consider using a plugin that delivers a mobile-friendly version of your site. One such plugin is

If you’re not keen on switching themes just yet, then consider using a plugin that delivers a mobile-friendly version of your site. One such plugin is WP Mobile Detector. It automatically detects if the visitor is using a standard mobile phone or a smartphone and loads a compatible WordPress mobile theme for each. Another plugin which will help you optimize your website for mobile is

Another plugin which will help you optimize your website for mobile is Any Mobile Theme Switcher. This plugin detects a mobile browser and displays the theme as the setting done from the admin area of your site, giving you the option to select a different mobile theme for each mobile browser.

Google’s AMP Initiative

Last year in October, Google announced a new project under their belt, called Accelerated Mobile Project. AMP is an open source initiative whose aim is to improve the world of mobile web:

“We want webpages with rich content like video, animations and graphics to work alongside smart ads, and to load instantaneously. We also want the same code to work across multiple platforms and devices so that content can appear everywhere in an instant—no matter what type of phone, tablet or mobile device you’re using.” Source The AMP project relies on AMP HTML – a new framework which allows websites to build light-weight web pages. Essentially, it strips out most of the elements which cause web pages to load slower on mobile, like JavaScript and third-party scripts. Some of the big names like Twitter, WordPress.com, Pinterest, Adobe Analytics, LinkedIn, have already accepted this initiative and are collaborating with Google to make the mobile web better for everyone.

What Does This Mean for Website Owners Like You?

There is a good reason why you might consider embracing AMP. Under the AMP initiative, mobile friendly pages will show up higher in search engines as well as get highlighted with a little green lighting bolt, inviting users to visit them.

Google has already made a tutorial that walks you through the creation of an AMP page, making it easy for website owners to get started with AMP. This doesn’t mean that you have to abandon WordPress in favor of ranking higher in search engines. All you have to do is install AMP plugin. With the AMP plugin active, all posts on your site will have dynamically generated AMP-compatible versions, meaning your visitors will not suffer from a poor mobile experience.

Facebook Instant Articles

Similarly to Google’s AMP initiative, Facebook Instant Articles were created to solve one particular problem – bring an end to slow loading times on mobile. As Josh Roberts explains:

“Facebook’s goal is to connect people to the stories, posts, videos or photos that matter most to them. Opening up Instant Articles will allow any publisher to tell great stories, that load quickly, to people all over the world. With Instant Articles, they can do this while retaining control over the experience, their ads and their data.”

In layman’s terms, Instant Articles will allow publishers to produce content and users to view content as an HTML5 document optimized for fast mobile performance. iPhone and Android Facebook users will be able to engage in visually appealing, interactive, multi-media articles right from the Facebook platform. Instant Articles will include automatic video play, interactive maps, a zoom-in feature, and audio. And because Instant Articles will load right from Facebook’s server, it will be up to ten times faster than loading through the smartphone’s browser. This leads to faster sharing which means you content will spread further and in a shorter period of time, which naturally leads to more clicks, more exposure, and ultimately more sales. According to the data from testing out the platform since May 2015

• Instant Articles received 20% more clicks than mobile web articles from the News Feed
• Once someone clicks on an Instant Article, they’re 70% less likely to abandon the article before reading
• They are shared 30% more than mobile web articles on average

To get started with Facebook Instant Articles, the first thing you need to do is sign up via http://instantarticles.fb.com/. After that, you have to select your Facebook business page and claim your URL. After you have claimed your URL, the next step is to create the articles. The good news is that the articles can be published directly from WordPress.

Facebook has created a plugin to streamline the process of creating Instant Articles. As of right now the plugin can be downloaded from GitHub but will soon be available from the official plugin repository. The next step is to upload your own logo and choose the fonts that will be used in your articles.

Finally, submit your feed to be reviewed by Facebook to verify that all articles generated from your website are properly formatted. It’s worth mentioning that you can monetize the articles as well as include an email signup form.

Conclusion

Having a mobile-friendly WordPress website can make a significant difference between your business attracting new customers and clients or sending them to your competitor’s websites. The best way to ensure your WordPress site is mobile-friendly is to follow the tips and practices outlined in this article. Have we missed anything or do you have a suggestion to make? Let us know in the comments below!