Web design for mobiles
Website adaptation

Website adaptation

You know perfectly well why you need to adapt your site for mobile traffic, right? Here’s another reason for you: Google will soon mark resources on the search page with a Mobile-friendly icon that are convenient for viewing on small screens of smartphones and tablets. By itself, the icon means nothing. Here’s what’s important: its owners will receive traffic from sites that are not adapted for mobile gadgets.

Do you want to win the constant battle for traffic? Then a complete guide to adapting sites for mobile traffic will come in handy.

What happens if you ignore the interests of mobile users

According to comScore, in January 2014, the share of mobile traffic in the US surpassed the share of desktop visits for the first time. The situation in other countries is different: as of mid-2014, about 80% of users visited websites using desktop computers, including laptops. However, there is a pronounced upward trend in mobile traffic. Pay attention to the schedule of the use of operating systems by domestic users.
The rise in Android usage is impressive, isn’t it? By the way, you can quickly determine the proportion 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”. Click Apply.
In the Audience Overview section, estimate the share of total mobile traffic, as well as the share of traffic by device type.
Search engines cannot ignore the interests of mobile users. Therefore, they will rob you of your traffic if you do not make the site usable with tablets and smartphones. You will lose many users forever: Research by Equation Research shows that 46% of users never return to a site if their first experience with a mobile device was unsuccessful. Finally, the effectiveness of your resource will constantly decline: existing users will not be able to participate in discussions, place orders, subscribe to newsletters and perform other actions if they use a smartphone or tablet.

Don’t like this prospect? Then adapt your site for mobile traffic.

What to strive for: signs of a mobile-friendly resource
When you visit a site that is unfriendly to mobile users using your smartphone, you immediately understand this. And what objective criteria does the 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, navigation menu Home, “Up” and “Back”. The option to call from the website should also be available. At a minimum, the user should see the phone number in the resource header.
Menu and form items should be user-friendly. The user should be able to easily tap the selected link with their finger or select the desired control.
The content on the site must be readable. The user does not have to take additional steps to read the text.
Ability to go to the full version of the site. The resource should not forcibly 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. A mobile visitor should not experience problems with ordering, signing up for a newsletter, downloading documents, etc.
How can this be done in practice? Read on.

Step 1: make sure you use a mobile-friendly design

Open your site using your smartphone or tablet and enjoy the convenience of using it. If you do not have a mobile gadget at hand, use the tool. It allows you to evaluate the appearance of the site on the screens of different devices. It is enough to enter the resource URL into the address bar and select the gadget from the horizontal menu.
If you see that the site needs to be adapted for mobile traffic, you will have to choose one of two options: create a mobile version of the site or use a responsive design.

Mobile version of the site


The mobile version of the site is the choice for the owners of online stores, web services, large sites. You can reach out to web developers and ask them for help. If you are using WordPress, then you have the opportunity to create a mobile version of the site yourself in a few clicks. You can use plugins for this.
You can independently find plugins that allow you to quickly adapt resources running on popular CMS for mobile traffic.

Adaptive design

Responsive design ensures the correct display of the site on the screens of gadgets with different screen sizes. You can contact web developers or install responsive templates for popular “engines”.
Two advantages of responsive design over the mobile version of the site deserve special mention. First, Google itself recommends using a responsive layout. Secondly, this method of adaptation for mobile traffic allows you to maintain a single site design when displayed on the screen of any gadget.

Step 2: replace links with tapable buttons


When the owners of mobile gadgets find themselves on unadapted sites, they immediately develop the so-called fat fingers syndrome. Do not rush to open medical reference books, this slang term has nothing to do with diseases. Usability experts describe this syndrome as errors that occur when a user tries to click on a link or navigation element.

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

Apple recommends that smartphone interface designers create buttons and navigation elements with a minimum size of 44 pixels by 44 pixels.
Nokia considers the minimum acceptable size for a 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 owners of mobile gadgets cannot comfortably use the site 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 custom-designed function buttons or use template tools. If you are using WordPress, take a look at the following plugins.

Step 3: make sure you use friendly forms

What is mobile traffic for? Correct to convert it to subscriptions, product orders, etc. It is very common for site owners to use various forms as conversion elements. Imagine what happens if the forms are not adapted for filling on a mobile gadget.

How to check if the forms on your site are responsive to mobile traffic? It’s very simple: go to the site using your smartphone or tablet and try filling out the form. If you have to enlarge the form, you cannot understand what data you need to enter in this or that field, which means that the form is not suitable for a mobile site.

Step 4: Offer Users Readable Content

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

In English there is a word snackable (from the English “snack” – a snack). Content for mobile users should be snackable: convenient for quick reading or even shallow scanning on the go.

Mobile-readable content meets the following characteristics:

  • It starts with a short, informative and engaging headline. Aim for a length of 10 words. The title should be written in large print.
  • The text should be organized into sections, each of which begins with a short, informative and provocative subheading. Subheadings should visually stand out against the background of the text.
  • The text should contain numbered or bulleted lists. They help mobile users quickly access critical information.
  • The text should contain visual content. It additionally structures the text and makes it easier to read.
  • Join the mobile evolution and don’t lose traffic
  • The Internet is slowly but surely becoming mobile. Even Darwin established that the most adapted species survive in the process of evolution. If you want to win the traffic competition, you have only one choice: adapt your site to read from mobile screens.

Leave a Reply

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