9350 2
How-to 12 min read

How to optimize your website for mobile devices

Website optimization for smartphones and tablets is necessary because more than 48% of users surf the Internet using mobile devices. Website responsiveness is one of the important ranking factors for search engines.

Peculiarities of website optimization 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:
According to research, most visitors use the Internet on mobile devices. In 2018, their number reached 52% of users.
A mobile-friendly website increases audience loyalty and reduces the bounce rate.
The optimized version increases the number of potential customers and sales.
Mobile-friendliness is one of the ranking factors for search engines.
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.

Ways to optimize your website for mobile devices

An optimized design is the best solution for small resources such as landing pages, business card sites, blogs, and service websites.

  • Templates are a suitable option for information resources, forums, and small online stores. To optimize it, you need a script that determines the type of device and displays a specific template depending on it.
    When using templates, the website design for mobile devices is simplified: unnecessary elements are removed; thus, it reduces the page weight.
  • Optimized design plugins and themes are the most convenient way for WordPress projects and other popular CMS.
  • A dedicated mobile version on a subdomain is the most time-consuming option, suitable for large portals, social networks, and online stores with a wide range of products.

  • Mobile website builders.

Let's have a deeper look at these options of optimization.

Responsive design

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:
Mobile version of the site
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:
Bootstrap framework
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:
    Connect CSS files to the website, as well as jQuery and JavaScript, if necessary.
    Ensure that the resource is compliant with the latest web development standards: HTML5 and the viewport meta tag should be used to control the size of the viewport and page scale.
    In case you face difficulties using these tools, for example, Google Maps, you need to redefine box-sizing: border-box for the necessary widget.
    You need to add predefined Bootstrap Grid classes to your code or use Sass preprocessors to create your own markup.

    Mobile website builder

    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:
    Wirenode Tariff Plans
    Go to the registration page:
    Join Wirenode
    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":
    Creating a mobile version of the site in Wirenode
    Next, enter the domain name and start editing:
    Editing the mobile version of the blog in Wirenode
    The service provides a preview of the mobile website:
    Preview mobile version
    You can choose one out of three phone models:
    The appearance of the site on different devices
    After editing, you need to add a widget to the desktop version informing that a mobile version is available on another domain:
    Widget about the availability of a mobile version of the Wirenode site

    Mobile version for WordPress resources

    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:
    Selecting a theme in the AMP plugin for WP
    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:
    Example AMP Page for WordPress
    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:
    Switching mobile and desktop versions of the site
    You can also use the following plugins:

      PageBuilder Plugin for WordPress
      • Mobile Smart determines which device the visitor uses and shows the desktop or mobile version of the resource:
      Mobile Smart Plugin for WordPress
      WP Mobile Edition Plugin for WordPress

      Mobile subdomain websites

      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:
      <link rel="alternate" href="http://m.domen.com/page/" >
      At the same time, a link to the canonical version is set in the code of the mobile page:
      <link rel="canonical" href="http://domen.com/page/" >
      The full version of the online store:
      Optimized website on the mobile subdomain version:

      Checking how the resource is displayed on different devices

      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:
      Incorrect display of the site on the smartphone


      You can optimize the resource for mobile devices using different tools. You choose the most convenient tool depending on the specifics of the project:
      Responsive design is an appropriate option for most websites; it's quite simple to optimize but requires basic knowledge of the layout of mobile sites.
      You can use the mobile website builders, but in most cases, they will be paid, or have certain limitations.
      For WordPress sites, the easiest way to get a responsive design version is to use ready-made templates or plugins.
      Large portals often use a subdomain for a separate mobile version of the project.

      This article is a part of Serpstat's Checklist tool
      Checklist is a ready-to-do list that helps to keep reporting of the work progress on a specific project. The tool contains templates with an extensive list of project development parameters where you can also add your own items and plans.
      Try Checklist now

      Speed up your search marketing growth with Serpstat!

      Keyword and backlink opportunities, competitors' online strategy, daily rankings and SEO-related issues.

      A pack of tools for reducing your time on SEO tasks.

      Get free 7-day trial

      Rate the article on a five-point scale

      The article has already been rated by 1 people on average 1 out of 5
      Found an error? Select it and press Ctrl + Enter to tell us

      Share this article with your friends

      Are you sure?

      Introducing Serpstat

      Find out about the main features of the service in a convenient way for you!

      Please send a request, and our specialist will offer you education options: a personal demonstration, a trial period, or materials for self-study and increasing expertise — everything for a comfortable start to work with Serpstat.




      We are glad of your comment
      I agree to Serpstat`s Privacy Policy.

      Thank you, we have saved your new mailing settings.

      Report a bug

      Open support chat
      mail pocket flipboard Messenger telegramm