This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
282
How-to 12 min read September 24, 2019

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:
1
According to research, most visitors use the Internet on mobile devices. In 2018, their number reached 52% of users.
2
A mobile-friendly website increases audience loyalty and reduces the bounce rate.
3
The optimized version increases the number of potential customers and sales.
4
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

1
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.
2
  • 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:
Desktop version of the site
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:
    1
    Connect CSS files to the website, as well as jQuery and JavaScript, if necessary.
    2
    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.
    3
    In case you face difficulties using these tools, for example, Google Maps, you need to redefine box-sizing: border-box for the necessary widget.
    4
    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:
    Responsive website design for desktop
    And this is how it looks like in the mobile version:
    Responsive website design for mobile devices
    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":
    Adding a WordPress Theme
    Go to feature filter and select "Responsive design", then click "Apply Filter":
    Responsive WordPress Themes
    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:
    AMP Plugin for WP - Accelerated Mobile Pages
    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":
    Create AMP in WordPress Plugin
    Next, go to the "Design" section to work on the appearance of the mobile version:
    Design of the mobile version in the AMP plugin for WP
    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:
    Redirecting to the mobile version in the AMP plugin for WP
    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":
    WPtouch Plugin for WordPress
    Next, activate the plugin and proceed setting it up:
    WPtouch plugin activation
    You can configure the theme in this plugin:
    Configure themes in the WPtouch 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:
      PC online store version
      Optimized website on the mobile subdomain version:
      Mobile version of the online store on a subdomain

      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:
      Checking the display of the site in Screenfly
      This tool allows you to select the type of device you need: a computer, tablet, smartphone or TV, and specify its screen resolution:
      Choosing the type of device to view the site in Screenfly
      The website in this screenshot is not optimized for mobile devices:
      Incorrect display of the site on the smartphone

      Conclusion

      You can optimize the resource for mobile devices using different tools. You choose the most convenient tool depending on the specifics of the project:
      1
      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.
      2
      You can use the mobile website builders, but in most cases, they will be paid, or have certain limitations.
      3
      For WordPress sites, the easiest way to get a responsive design version is to use ready-made templates or plugins.
      4
      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 at Serpstat
      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

      Learn how to get the most out of Serpstat

      Want to get a personal demo, trial period or bunch of successful use cases?

      Send a request and our expert will contact you ;)

      Rate the article on a five-point scale

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

      Share this article with your friends

      Sign In Free Sign Up

      You’ve reached your query limit.

      Or email
      Forgot password?
      Or email
      Back To Login

      Don’t worry! Just fill in your email and we’ll send over your password.

      Are you sure?

      Awesome!

      To complete your registration you need to enter your phone number

      Back

      We sent confirmation code to your phone number

      Your phone Resend code Queries left

      Something went wrong.

      Contact our support team
      Or confirm the registration using the Telegram bot Follow this link
      Please pick the project to work on

      Personal demonstration

      Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

      These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

      Name

      Email

      Phone

      We are glad of your comment
      Upgrade your plan

      Upgrade your plan

      Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

      Sign Up Free

      Спасибо, мы с вами свяжемся в ближайшее время

      Invite
      View Editing

      E-mail
      Message
      Optional
      E-mail
      Message
      Optional

      You have run out of limits

      You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

      I want more limits