Adaptation of the site for mobile devices: a complete guide

You know perfectly well why you need to adapt the site for mobile traffic, right? There is another reason for you: Google will soon mark mobile-friendly icons on the display page with mobile-friendly icons for viewing on small screens of smartphones and tablets. The icon itself does not mean anything. That's what's important: its owners will receive traffic sites that are not adapted for mobile gadgets.

Want to win in the constant struggle for attendance? Then you will need a complete guide to the adaptation of sites for mobile traffic.

What happens if you ignore the interests of mobile users

According to comScore, in January 2014, the share of mobile traffic in the United States for the first time exceeded the share of site visits from desktops. According to the Kokoc Group, the situation in Russia is different: as of mid-2014, about 80% of users visited websites using desktop computers, including laptops. However, in Runet, there is a pronounced upward trend in mobile traffic. Pay attention to the schedule of use of operating systems by domestic users.

The increase in the frequency of using the Android OS is impressive, right? By the way, you can quickly determine the share of mobile users of your site using Google Analytics. For this:

  • Select the "Audience Overview" menu and use the "Add Segment" option.
  • On the page that opens, check the box next to the "Traffic from mobile devices", "Traffic from tablet PCs" and "Traffic from smartphones and tablet PCs" options. Click "Apply."
  • In the "Audience Review" section, estimate the share of total mobile traffic, as well as the share of traffic by device type.
See also: Checklist of questions for auditing the mobile version of the site

Search engines can not ignore the interests of mobile users. Therefore, they will deprive you of traffic if you do not make the site convenient for use with the help of tablet PCs and smartphones. You will lose many users forever: research by Equation Research shows that 46% of users never return to the site if the first experience of visiting it using a mobile gadget was unsuccessful. Finally, the effectiveness of your resource will constantly fall: existing users will not be able to participate in discussions, place orders, subscribe to the newsletter and perform other actions if they use a smartphone or tablet.

Do not like this perspective? Then adapt the site for mobile traffic.

What to strive for: signs of a mobile-friendly resource

When you enter a website unfriendly to mobile users with a smartphone, you immediately realize this. And what objective characteristics does a resource adapted for small screens correspond to? They are listed below:

  • The site loads quickly. There are no "heavy" photos, flash, unnecessary graphic design elements.
  • Simple and easy navigation. Resources adapted to mobile traffic should have only vertical scrolling, a convenient search module, the Home, Up and Back navigation menu. The option to call from the site should also be available. At a minimum, the user must see the phone number in the resource header.
  • Menu items and forms should be easy to use. The user should be able to easily click the selected link with his finger or select the desired control.
  • Content on the site should be readable. The user should not take additional actions to read the text.
  • The possibility of transition to the full version of the site. The resource should not be forced to redirect visitors to the main page of the mobile version, if they try to view the internal page of the full version using a smartphone or tablet.
  • Functionality and the ability to perform conversion actions. Mobile visitor should not have problems with placing an order, subscribing to the newsletter, downloading documents, etc.

How to achieve this in practice? Read on.

Step 1: Make sure you use mobile-friendly design.

Open your website using a smartphone or tablet and enjoy the convenience of its use. If you do not have at hand a mobile gadget, use the Screenfly tool. It allows you to evaluate the appearance of the site on the screens of different devices. Simply enter the URL of the resource in the address bar and select the gadget in the horizontal menu.

If you see that the site needs to be adapted for mobile traffic, you have to choose one of two options: the creation of a mobile version of the site or the use of responsive design.

Mobile version of the site

Mobile version of the site is a choice for owners of online stores, web services, large sites. You can contact the web developers and ask for their help. If you use WordPress, then you have the opportunity to create a mobile version of the site yourself in a few clicks. To do this, you can use the plugins:

  • WPtouch Pro. Having paid USD 49 once, you can choose one of the suggested mobile themes for WordPress and use it all the time.
  • DudaMobile. The basic functionality of this plugin is available for free. If you pay USD 159 at a time, you will get access to advanced features and support.
  • WP Mobile Edition. This plugin automatically detects the characteristics of a mobile gadget and displays the appropriate mobile version of the site for the visitor.

You can independently find plug-ins that allow you to quickly adapt resources for Joomla, Drupal and other popular CMS to mobile traffic.

See also: 14 cool chips from the 11 best mobile sites

Adaptive design

Responsive design ensures the correct display of the site on the screens of gadgets with different screen sizes. You can contact the web developers or install templates with responsive layout for popular "engines".

Two advantages of adaptive design over the mobile version of the site deserve special mention. First, Google itself recommends the use of responsive layout. Secondly, this method of adaptation for mobile traffic allows you to save a single site design when displayed on the screen of any gadget.

Responsive WordPress templates are available on

Step 2: Replace the links on the tap buttons.

When the owners of mobile gadgets get on unadapted sites, they immediately develop the so-called syndrome of thick fingers. Do not rush to open medical reference books, this slang term is not related to diseases. Usabilityists use this syndrome to describe errors that occur when a user tries to click on a link or navigation item.

What size should a button or a navigation element have for a mobile user to use it successfully? Focus on the following recommendations:

  • Apple recommends that interface developers for smartphones create buttons and navigation elements with a minimum size of 44 by 44 pixels.
  • Nokia considers the minimum size of the control to be 48 by 48 pixels or 0.7 by 0.7 cm.
  • Microsoft considers the optimal button size to be 34 by 34 pixels.

Please note that mobile gadget owners cannot use the site comfortably if there are too many links in the text that are located close to each other.

How to create mobile-friendly buttons and navigation elements

You can order functional buttons with individual design or use template tools. If you are using WordPress, note the following plugins:

  • Standout Color Boxes and Buttons. With this plugin you can create convenient buttons of different sizes and colors. It also allows you to create a context menu adapted for mobile users.
  • Responsive Menu. With this plugin you can make a convenient hamburger menu.
See also: Top 10 sites with responsive layout

Step 3: Make sure you use convenient forms.

What is mobile traffic for? Correctly, to convert it into subscriptions, product orders, etc. Website owners very often use various forms as conversion elements. Imagine what happens if the forms are not adapted to be filled out on a mobile gadget.

How to check whether forms on your site are adapted for mobile traffic? It's very simple: go to the site using a smartphone or tablet and try to fill out the form. If you have to increase the form, you can not understand what data you need to enter in a particular field, then the form is not suitable for a mobile site.

You can order the development of convenient forms for a mobile site, as well as use template solutions for popular CMS.

  • SumoMe. Free plugin that allows you to create convenient mobile forms.
  • OptinMonster. Paid plugin for creating mobile forms.
  • ClickBank. This service will need the owners of online stores. It allows you to "tie" to the site adapted to the mobile traffic basket for processing and paying for orders.
  • Gumroad Another service for processing and payment of orders, friendly to mobile users.
  • Service for receiving payments from mobile sites.

Step 4: Offer Users Readable Content

Users of mobile gadgets with small screens often go online to solve a specific problem: compare product prices in different stores, find the seller’s contact details, read the instructions for using the medicine. They get to your site thanks to a clear and attractive headline. On the site they must find content adapted for reading from a small screen.

In English, there is the word snackable (from the English. "Snack" - an appetizer). Content for mobile users should be snackable: convenient for quick reading or even surface scanning on the go.

Convenient to read from a mobile screen content meets the following characteristics:

  • It starts with a short, informative and captivating headline. Focus on the length of 10 words. The title should be in large print.
  • The text should be combined into sections, each of which begins with a short, informative and provocative subtitle. Subheads should visually stand out from the text.
  • The text should be numbered or bulleted lists. They help mobile users quickly get critical information.
  • The text should be visual content. It additionally structures the text and facilitates its perception.

Step 5: Adapt emails from a small screen.

Email can be adapted for reading from the screens of mobile gadgets using the following mailing tools:

  • MailChimp.
  • AWeber.
  • Constant Contact.

Choosing a postal service, make sure that you have done everything to read your letters.

Join the mobile evolution and don't lose traffic.

The Internet is slowly but surely becoming mobile. Darwin also found that the most adapted species survive in the process of evolution. If you want to win the competition for traffic, you have only one choice: to adapt the site for reading from the screens of mobile gadgets.

You can order an adaptive layout of the site in our agency. All the details read the link.

Watch the video: 5 MIN TUTORIAL - Responsive Web Design - SIMPLE EASY (April 2020).


Leave Your Comment