Search the site:

Copyright 2010 - 2020 @ DevriX - All rights reserved.

How to Optimize Your WordPress Layouts for Mobile Traffic

How to Optimize Your WordPress Layouts for Mobile Traffic

The number of mobile devices and people that use them is on a constant rise. It comes as no surprise that over half of all Internet traffic is mobile, and most of the search engine queries done are on mobile devices. Furthermore, Google penalizes websites that are not optimized for mobile devices.

To optimize your WordPress layouts for mobile traffic you have to do much more than install a theme. You must invest in the mobile version of your website, not only from a UX standpoint, but from an SEO, CRO, Advertising, and performance point of view as well.

Therefore, in this article, we will explain what you’ll need to address on your WordPress site to make it work for mobile traffic and to ensure that users will get the best possible experience when visiting the website on a mobile device.

Why Mobile Traffic Matters

User navigating mobile device

In 2016, for the first time, mobile Internet traffic surpassed desktop. To keep up with this, you must prepare your WordPress site for traffic incoming from any type of device.

Optimization does not only mean looking great on smartphones, it means having a functional website as well. Having a mobile-ready website will enhance UX and improve your conversion rate, and it is crucial for websites that base their income on advertising.

In addition to an enhanced UX, a mobile-friendly layout positively influences your SEO as well. From Google’s update in 2015 onwards, there’s been a significant revision in search engine algorithms. Now, mobile-friendliness is one of the important factors for better search ranking and increased web traffic.

Rise in mobile traffic shows need of layout optimization

Mobile web traffic is on a continuous rise, as shown by this graph from Statista.

Therefore, if your website renders excellent on mobile devices, it’s going to rank better in SERPs, and it will result in more sales via mobile. Even large retailers such as Walmart Canada have benefited further from mobile web layout optimizations, with a 98% increase in mobile sales!

When the company found out that almost 50% of their target customers are moms that use tablets, they realized that they must do something about their mobile experience. To successfully address the issues with their mobile layouts, they’ve implemented the following solutions:

  • Establishing a Mobile-First Plan: The team came to a decision that they needed to adopt a touch-centric approach to the design, and made it look really good on tablets and smartphones.
  • Implementing Mobile Design Optimization: The responsive design approach made their site render excellent on every screen size. Additionally, they’ve optimized their product pages for mobile web traffic as well.

The result: 20% increase in their overall conversion rate, and 98% increase in mobile sales, as mentioned above.

How Does Google Evaluate Mobile Website Layouts?

When evaluating the site’s capability for receiving traffic from a mobile search, Google considers the following factors:

  • Page Layout: Google examines if your page renders correctly on a mobile screen.
  • Accessibility: Checking if the buttons, media, and text are big enough to be easily accessible without making users zoom in.
  • Performance: Page speed is vital for desktop and mobile web experiences, and Google prioritizes mobile page performances over desktop in SERPs.
  • Ad Placement: A page filled with advertisements is intrusive for many, and a problem for Google as well. That is why, when using ads, you need to ensure that you don’t violate the ad placement guidelines.

Devrix Google evaluates mobile website layouts factors

Start With Some Testing

The first thing you need to do is examine whether your current site is adequately responsive to mobile web traffic or not. For this purpose, you can use Google’s Mobile-Friendly Test tool.

Google Mobile Friendly Test Page Sample

Google’s Mobile Friendly Test as one of the best tools to examine the mobile responsive layouts of your site.

Just enter the site URL and select Test URL. The analysis won’t take more than a few seconds. If your website is functional on mobile devices, the tool will let you know, with a screenshot of how the site looks on a smartphone. Or, if your site is not mobile-friendly, the tool will point out what you need to adjust.

There are a handful of other useful tools that you can use to test mobile-friendliness, such as:

Tools are great, but nothing really beats firs- hand experience. We always suggest to go throughout your site, perform actions that you consider priority for your users (like adding a product to a cart, submitting a form, navigating to a page, sharing a post). Be on the lookout for potential issues throughout the process. This is the simplest form of UX testing.

Test the Performance

Speed is more relevant than ever before. Google considers speed as one of the most significant ranking factors, and up to 85% of users expect mobile sites to load much faster than the desktop versions.

Here are some tools that you can use to test the speed of your website:

If you want to speed up the content on mobile, a CDN can help you serve content faster through caching and distribution from numerous locations.

For example, let’s say that your hosting server is in San Francisco, CA, and your mobile web visitor is from Paris. It’s a distance that can slow down the content transversal. A CDN can store a version of your site on a French server near Paris, and serve your content much faster as a result.

Additionally, you need to select a powerful Managed hosting provider for your WordPress website. A shared host runs hundreds of websites at once, and if one of the sites experiences higher than normal traffic spike, it will diminish the speed of the other sites.

An upgrade to a WordPress hosting such as Pagely can make significant performance improvements. Pagely uses a server infrastructure which will immediately speed up your website. They also make use of the latest PHP 7 version and include a CDN that can skyrocket your site assets.

Maintain Simplicity

Since smartphones have a much smaller screen than desktop layouts, the amount of elements that you can show to the users is lower. Therefore, if you want to display loads of content, you will just impede the user experience.

For example, let’s have a look at Toyota’s Brazilian branch website. It looks really solid on a laptop.

Toyota Brazil desktop WordPress website layout

A good looking desktop website does not mean that the mobile layout will follow suit. Image source: Toyota Brazil

But, what if you want to browse their vehicles on your smartphone.

Toyota Brazil not optimized mobile WordPress layout

A cluttered mobile web layout leads to less traffic and a diminished conversion rate. Image source: Toyota Brazil

It’s not that bad, but again, that top bar and the main menu are a bit too much, making the entire experience outdated and cluttered.

Keeping things simple with your design improves the mobile UI, and users can navigate your pages more efficiently. Additionally, simple layouts enhance your mobile page speed score because the fewer elements a browser has to load, the faster the page is.

Swell bottle Mobile Screenshot

A Simple WordPress Layout for mobile from Swell

When you design a mobile layout, it’s best to focus on a one-column page layout, to promote more scrolling on the page. Think about – why are Facebook and Instagram so successful as mobile platforms?

Scrolling on Phone GIF

Users naturally swipe vertically. Image source: Giphy

Furthermore, you need to consider other acceptable features for simple mobile web design, such as the “hamburger menu”.

AMC website Screenshot with Hamburger Menu

A Hamburger Menu button on the top left. Image source: AMC

It is now a standard component in mobile web design, and when users want to browse another page, they search the top of the page layout. Don’t use extensive drop-down menus. They’re challenging to navigate on smartphones, and sometimes, they even impede the usability of desktop websites.

Exclude Unnecessary Content

Besides streamlining the page’s transition to mobile devices by removing unnecessary elements, you can remove the extra content as well. Of course, you should never delete content that improves your conversion rate. However, there is simply some content that is not necessary for the mobile version of your site.

When reviewing what content should appear on the page, ask yourself the following:

  • How relevant is this content for the page?
  • Is the content crucial to the user journey?
  • If we need to include this piece of content, how can we simplify it for mobile?
  • If we can remove it on mobile, is it still needed on desktop?

Eliminating unnecessary content will enhance user experience and conversion rates. Save only the most important content for your mobile web visitors. Simplify your content where you can, but don’t eliminate any key content that could convince users to opt for your product.

Simple BuildFire Website Screenshot

A simple user interface from the BuildFire mobile website.

Limit the Clickable Areas

When people visit websites on mobile devices, they don’t want too many options to click on. That can be overwhelming, and you’ll fail to deliver an operable mobile UX. Instead, you need to highlight the most important calls-to-action and clickable areas on your pages.

Todoist Call to Action Button

Todoist has only the call-to-action and some beautiful graphics.

Keep in mind that browsing a website on a smartphone consists of looking and clicking a touch screen with fingers instead of pointing with arrows. Therefore, including a limited number of links and spacing them properly will ensure that you have an accessible page that mobile device users can navigate.

Quicksprout Mobile Website Big Buttons

The Quicksprout mobile website has big clickable areas.

This is crucial because if the clickable areas are close on a mobile screen, people can click the wrong link. Additionally, Google can flag your site as unfriendly for mobile users, and you will miss out on a lot of potential organic search traffic.

Harness Responsive Design

If you want to properly display your website on desktop and mobile, you must make it responsive. A responsive website uses the same page elements for desktop and mobile versions. According to the device, the design reshapes to fit on the screen.

Devrix benefits of responsive design

Besides improved UX for your web visitors on mobile devices, the responsive design brings your site the following benefits as well:

  • Flexibility: With responsive design, you don’t need to think about changing the design on two websites. You only have to fix or add elements once, and you do it for both the mobile and desktop versions.
  • Cost-Effectiveness: Running a desktop and mobile site can be expensive. By utilizing responsive design, you eliminate those unnecessary costs.
  • SEO Benefits: Responsive design is beneficial to your search ranking because Google, as discussed at the beginning of the article, prioritizes mobile-friendly sites in SERPs.

However, you must be careful. Most responsive websites just convert three columns of desktop content into one column.

A responsive site is one that fits every screen. It loads the same data from the desktop to the mobile version. For example, if you want to show a 1,200px desktop photo on a 300px mobile screen, the entire 1,200px will load, only rendered smaller.

Responsive Design Gif

Image Source: Giphy

Regarding images, WordPress has already made significant progress towards a better experience. Since the 4.4 version, the CMS automatically scales even the largest images through the srcset HTML attribute.

PNG and JPEG are the most common image file formats. But, with the latest tech and digital image developments, WebP and SVG formats are becoming increasingly present.

An SVG is a vector image and it can be scaled to fit any screen size. Usually SVGs are way smaller than PNGs, so it saves valuable time while loading.

However, you should still be careful. Visual elements such as videos, photos, and graphics can be one of the significant performance eaters for websites. Even though there are no strictly defined rules for media file size, smaller files result in better loading times.

Keep in mind that the same visual elements from the desktop version of your WordPress site might not always work on the mobile design. That’s why eliminating large background imagery and swapping it out with an image that doesn’t hinder the UX on mobile is a much better option.

Let’s take HubSpot’s homepage as an example. The graphics in the hero section perfectly depict how the CRM gets things moving. Imagine a realistic image of an office building with that many people in each window. It wouldn’t work as good as this.

Hubspot Screenshot

Source: HubSpot

Optimize Forms

Filling out forms on a smartphone can be a challenge, especially if the users have to submit too much data and navigate too many fields. That’s why you need to ensure that you simplify your mobile forms and collect only the most important information.

Copyblogger form screenshot

Keep the forms for your mobile pages as simple as possible. Source: Copyblogger

In WordPress, you can install a plugin such as WPForms and build responsive forms fast and easy that can help you convert mobile web visitors.

 

From a developer perspective, we use Contact Form 7 as it provides the most flexibility. Although it should be noted that its UI is not user friendly for non-technical users who want a custom design for their forms.

Contact Form 7 form optimization process

Contact Form 7 is the better form optimization tool from a developer point of view.

Wrapping Up

Having a mobile-friendly WordPress layout is crucial nowadays. It is a necessary requirement for your target users and search engines to accept your site.

A mobile-friendly WordPress website has the power to bring in more organic traffic, engage new leads, and customers.

Now that you have a better grasp on what to test, how to look for mobile UI problems and identify additional issues. You can follow the advice outlined above to ensure that the mobile UX of your WordPress site is always on point.

The people behind the best CMS are also making great progress towards an enhanced native mobile UX. From scaling images on mobile browsers to an improved backend, you can be rest assured that you’re ahead of the website owners that use another CMS.

If you have more questions, or you need help with mobile UX issues and creating a modern web experience on devices, don’t hesitate to get in touch.

Browse more at:Marketing

Leave a Reply

Your email address will not be published. Required fields are marked *