How to optimize your website for mobile devices

Website optimization for mobile devices allows you to correctly display the resource on different screen resolutions on tablets or smartphones. The website must be optimized for the following reasons:

The optimized mobile version must have the following properties:

• user-friendly navigation elements so that visitors can easily click on them regardless of the screen resolution;
• use of vertical scrolling, a simple search option, and the main page button;
• a separate sitemap (in the case of the mobile version) that has all the pages as the main website;
• easy to fill out forms and simple conversion actions;
• structured text for quick perception: headings, sections, bulleted lists, and visual content;
• high-speed page loading. You can check the speed using Google PageSpeed Insights;
• no Flash-based elements, pop-ups, and ads;
• image and video adaptability; in the case of video, it is supported by YouTube;
• hone number markup <a href="tel:+***********"> 8 (***) *** - ** - ** </a>; convenient dialing from the website when clicking on the contact phone number;
• ability to read text on any element without any difficulties.
  

Thanks to the responsive design, the resource will be user-friendly on all devices, while maintaining a similar design with the main version. Google recommends using this type of mobile device optimization. The resource elements will be shifted vertically, depending on the screen resolution of the device.

The responsive design needs to hide some large elements of the website for mobile devices or replace them with more compact ones.

Desktop appearance:

Mobile device appearance:

CSS frameworks are good for optimization; for example, bootstrap where you can optimize the website for mobile devices or use media queries (CSS3 Media Queries).

Let's take a closer look at Bootstrap:

This popular tool includes the following features:

• HTML and CSS templates;
  
• grid;
  
• typography;
  
• navigation blocks;
  
• web forms;
  
• buttons;
  
• JavaScript extensions.
  

When you optimize the website for mobile devices, it is important to follow the Bootstrap instructions. Here is a brief set of instructions:

There are dozens of such services. We will have a look at Wirenode, an easy-to-use mobile site builder, free for personal use. It allows you to create a mobile version of the blog on a dedicated domain, provided that the resource has an RSS feed.

With Wirenode you can create one website absolutely for free:

Go to the registration page:

After filling in the fields, choosing the account type, and retyping the code from the picture, click "Create my account".

The tool suggests creating a new mobile website provided there is RSS feed on it. After entering the resource URL, click "Mobilize Blog":

Next, enter the domain name and start editing:

The service provides a preview of the mobile website:

You can choose one out of three phone models:

After editing, you need to add a widget to the desktop version informing that a mobile version is available on another domain:

When you optimize a website for mobile devices in WordPress, the easiest solution is to change the theme to responsive or install a plugin for the mobile version. When using a theme with responsive design, the resource will look like this in the full version:

And this is how it looks like in the mobile version:

In the responsive version, the image changes its size taking into account the screen resolution of your smartphone; the menu opens by clicking on the icon with three horizontal lines; the blocks located on the right side of the desktop version are moved down.

To select a theme with a responsive design for your own project, go to the "Themes" section and click "Add New":

Go to feature filter and select "Responsive design", then click "Apply Filter":

We will get a list of themes with responsive design, among which you can choose the most suitable for your own project:

You can also use the following plugins for Wordpress:

Google Accelerated Mobile Pages (AMP) is an open-source library that helps you create fast-loading, simplified versions of your mobile-friendly site pages.

Its work principle is based on the fact that a duplicate resource is created using AMP HTML. This disables scripts that slow down the site's loading speed, after which Google's website pages are processed to reach the fastest loading.

Install and activate the plugin, then configure it; for this, go to the "Settings" subsection of the "AMP" section. Upload the logo and save it by clicking "Save changes":

Next, go to the "Design" section to work on the appearance of the mobile version:

Choose a theme:

After the theme is selected, you can change the colors and fonts in the Global section, configure the header and footer, for example, add a bell button in the Header tab. You can add social network buttons in the "Social" section.

After completing the settings, activate "Mobile redirection" in the "Advanced Settings" section:

As a result, the resource will look like this on mobile devices:

You can also use the WPtouch plugin in WordPress. Go to "Plugins", select "Add New", find WPtouch using the search and click "Install now":

Next, activate the plugin and proceed setting it up:

You can configure the theme in this plugin:

Here you can adjust the color scheme of the website, add an icon if necessary. There is also a preview of the changes made.

After making changes, the website looks like this:

You can also use the following plugins:

• PageBuilder is a responsive design website builder

Following recommendations of search engines, it is advised to develop a mobile subdomain website version. In this case, a single database for the parent domain and subdomain is used. A visitor is automatically redirected to a subdomain if he accessed a resource from a mobile device.

The mobile version is lightweight and has a simplified design, with all that, all pages should be accessible on it like on the main version. The mobile version should also have a switch button to the main version.

According to Google's recommendations, add this code to each page of the full version to prevent search engines from considering duplicate content on a mobile version:

At the same time, a link to the canonical version is set in the code of the mobile page:

The full version of the online store:

Optimized website on the mobile subdomain version:

We use online tools to check how the website is displayed on different screen resolutions, for example, Screenfly:

This tool allows you to select the type of device you need: a computer, tablet, smartphone or TV, and specify its screen resolution:

The website in this screenshot is not optimized for mobile devices:

You can optimize the resource for mobile devices using different tools. You choose the most convenient tool depending on the specifics of the project: