Today, most people access the network through mobile gadgets - tablets, phones, and in this regard, site optimization also goes to a new level. If a user comes in and sees that the site is not optimized for mobile devices: the image cannot be viewed, the buttons have moved out, the fonts are small and unreadable, the design is skewed - 99 out of 100%, that he will come out and start looking for another more convenient one. And the search robot will check the box that the resource is irrelevant, that is, it does not match the search query. Therefore, the design of the page must be adapted to various mobile devices. What is a mobile version of a site, how to make it, and what is the best way to apply it? More details in this article.
So, there are four key ways to adapt the site to the mobile version.
Method One - Responsive Design
Responsive templates involve changing the image of the site depending on the screen size. As a rule, they are set to standard 1600, 1500, 1280, 1100, 1024 and 980 pixels. For implementation apply CSS3 Media Queries. The site design itself does not change.
The advantages of this method include:
- convenient development, since the structure itself adapts to the screen settings, and any update does not require design development from scratch, just tweak the CSS and HTML;
- one URL address - the user does not need to remember several names, there is no need for a redirect (redirect from one address to another), which can complicate the work of the webmaster, and it’s easier for the search engine to sort and rank the resource with a single address.
Of course, adaptive templates also have their drawbacks, which, by the way, are more than advantages. Nevertheless, many developers adhere to this concept, for example, Google Corporation, whose mobile version of the site has an adaptive design. So, the disadvantages are:
- Responsive design does not support the same tasks on a mobile device as on a PC. If this, for example, is a mobile version of the bank’s website, where information about the exchange rate or the nearest ATMs is more likely to be important for the user, then such a design is quite enough. But if this is a complex structured resource with many sections and subsections, then adaptive layout is unlikely to appeal to visitors.
- Slow loading turns your favorite site into a hateful one. This is especially true for resources where there are an abundance of animation, videos, pop-ups and other active elements. Due to the heavy weight, the page will simply “slow down”, the user will get angry and leave, and the search positions of the site will fall.
- The inability to disable the mobile version is another significant drawback. If any element is hidden by such a layout, you can’t do anything to open it, unlike sites where you can disable it and switch to a regular domain.
Nevertheless, such a mobile version of the site quickly, without special skills and costs allows you to adapt the resource to any gadgets. But it is suitable, due to the above disadvantages, to small, simple resources with a minimum of information and multimedia, without complicated navigation and animation. For a complex site, 2 other methods are suitable.
Method two - a separate version of the site
This method is very common and often successfully makes a site on a mobile device easier to read. Its essence is to create a separate version of the page, drawn for the application and located on a separate URL or subdomain, for example, m.vk.com. At the same time, the main functionality is preserved, the site design just looks different. The advantages of this method are obvious:
- convenient user interface;
- It’s easy to change and make changes, because the version exists separately from the main resource;
- due to its low weight, a separate version of the site works much faster than an adaptive template;
- most often there is the ability to go to the main version of the page with a mobile.
But here there were some disadvantages:
- Several addresses - desktop and mobile version of the site. How to make the user remember two options? Webmasters often prescribe a redirect from the desktop to the mobile version, but if this page does not exist in the mobile version, the user will receive an error. Here, difficulties arise with search engines, which are difficult to rank 2 identical resources, and this directly affects the promotion.
- A mobile version of a site from a computer, if a user mistakenly logs into it, looks ridiculous, which can also affect attendance.
- This version is often greatly reduced, desktop, so the user will get very limited functionality. But at the same time, if something is missing, the visitor can go to the full version of the page.
In general, a separate mobile site is paying off and is the most common way to adapt a resource to mobile devices. It is popular among major online stores, such as Amazon.
The third way - RESS design
The Google search engine actively supports this direction of mobile design. This is the most difficult, costly, but effective method to adapt the site to your phone or tablet. It is called RESS. This is resource targeting in a mobile application, which can be downloaded for each device separately. For android - with GooglePlay, and for Apple - with iTunes.
Such applications are fast, free, convenient, have the ability to host various types of information, while the phone’s memory and Internet traffic are not eaten up as when visiting a site through a browser. They are easy to access, since the link will always be on hand at the screen, and there is no need to enter a complex name in the address bar of the browser.
Of course, there are also drawbacks here, such as complexity in development, high labor costs of a large number of programmers, the need to make several layout options. Sometimes a mobile device is not recognized by the application. Regular technical support, correction of deficiencies is required. Nevertheless, this option is considered the best of the three proposed due to its productive, uninterrupted operation.
The cheapest way to make a mobile site
All of the above methods involve, albeit not always a long and complicated, but still paid work of the webmaster. If you do not see the urgent need for such a development, a simple and free mobile version of the site will suit you. How to make it the easiest?
Download special templates (plugins) for responsive design. For example, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile and others. They will help to correctly display the site on the phone, while you will get a few tips what should be fixed to better adapt the page to the mobile version.
Of course, this method is hardly suitable for serious resources. Rather, this free feature is intended for the smallest and simplest sites, blogs, news feeds. Do not forget also that the Google search engine, like Yandex, today has serious requirements for mobile versions, so there is a huge chance to lower their positions using this method.
With this method, most likely, ads and pop-up banners will be cut off, but the page will load quickly and without “lags”.
Principles for creating mobile versions
It doesn’t matter if the mobile version of the site was created for free or with the help of a staff of webmasters, it was made on the RESS system or using an adaptive template. The most important thing is that for its effective work it is required to adhere to several extremely important principles. So what should be the mobile version of the site? How to make it productive, efficient and productive?
We remove all unnecessary
Minimalism is what the developer of the mobile version of the site should strive for. Imagine how difficult it is to perceive information that is replete with colors, buttons, banners, and which you have to scroll endlessly in search of the right material. Mobile design should be simple and clean. Choose 2-3 colors to divide the space (for example, branded). It is better if one of them is white. Divide the space of the small screen into clear and readable areas. Virtual keys should be visible so that the user clearly knows where to press and sees - here is the product, here is the form for filling in the data, here is the information on delivery and payment.
All additional options that would be useful in the desktop version and would make life easier for the user, will bring only complexity. Leave only the most important elements. Animation, advertising banners, multimedia, most likely, will only slow down the site or application and distract from the main thing.
Alignment
The issue of alignment is no less acute, because if you do it wrong, the user will receive only the end of important words. It is generally accepted alignment to the left and vertically. Imagine how you scroll through a news feed on your phone. You do it from top to bottom, but not to the left or right side.
Union
When there is no possibility of a long chain of transitions, try to combine several steps into one. For example, the site requires entering data in several stages - a name, then an address, where in each separate cell there is a separate house, street, apartment, etc. In order not to force the user to try to get through many small cells, suggest him to fill in only 2 - name and address.
And separation
Sometimes, on the contrary, you need to disconnect too much information. For example, in the drop-down menu you have a list of more than 80 cities where delivery is carried out. Group them by region so that the user does not have to scroll through this huge list. When he hovers over a regional center or region, another list of cities will drop out.
Lists
By the way, regarding the lists. There are two of them - fixed in alphabetical or other order and with wildcard. Their choice depends on what will be listed.
Fixed is convenient if the user knows exactly what he is looking for. For example, city, number or date. The second option is suitable for long complex names or for cases where there are many variations for the same name, and each drop-down list brings the user one step closer to the goal. The autosubstitution option is more often used when a visitor needs help. For example, a knitting site offers to buy knitting needles. The user enters the search query “Metal knitting needles”, and in the prompt he sees “Knitting needles 5 mm”, “Knitting needles 4.5 mm”, etc.
Autofill
This item is especially relevant for sites where they sell something online, and you have to fill out standard forms of payment, delivery, etc. If a person makes a purchase from a phone, then most likely he does not have time to get to the computer, which means that the process purchases need to be made as quick and convenient as possible.
For this form may contain already completed data, you can resort to the most popular answers. For example, insert today's date, cash payment method, city if you work in the same region. They can be changed, but if you hit the target, the user’s time will be saved.
Everything is read, everything is viewed
When designing the mobile version of the site, remember that all phones have different phones, and eyesight too. Perhaps your site will be viewed from a small screen, so the fonts should be simple and readable, the buttons should be large enough so that they can be clicked on and not get to another page, and the images should open separately, large, especially when it comes to the Internet store.
Some statistics
Speaking about the adaptation of the site to mobile devices, one cannot but resort to statistics to understand how important this process is for promotion on the network.
The numbers are as follows. Today, 87% of the population use gadgets, apparently, except for the smallest children and some elderly people. Economists predict a 100-fold increase in mobile commerce over the next 5 years. At the same time, only 21% of sites are adapted for working with mobile devices. This means that Internet traffic and the e-commerce market are occupied only by a small 5th part.
Think about these numbers. Does it make sense to adapt your resource? Of course yes. Moreover, as long as there is so much free space in this market, you can take your own segment in it.
Where is the mobile version needed?
Use the mobile version is appropriate for any platform that seeks to get a high rating. After all, this is a direct impact on the user, creating comfortable conditions for him to stay on your site.
Without the mobile version the following cannot exist:
- news portals, since it is precisely their majority that is viewed from the phone on the way to work or school;
- social networks - for the same reason, plus there is a factor of online communication, which means that a convenient, understandable chat should be created for this;
- reference sites, sites with navigation, etc., where people turn to when they are looking for something;
- online stores - an opportunity to attract buyers who do not spend time shopping, but buy everything through the mobile Internet.
Instead of a conclusion
Today, mobile technologies are in the stage of active growth and development, therefore, striving for leadership in the market, any company should ensure that its Internet resource meets the requirements. Due to growing user requests, sites have to constantly upgrade and adapt to various devices. It is clear that if a person is inconvenient to be on a particular resource, he cannot get information about the product or price there, place an order, find out about delivery, then he will find the site where all this will become possible. Therefore, in order to win the competition, it is important to have a flexible, convenient, functional and interesting resource.
The mobile version of the Android or Ios site will help to do this. To do this, you need to choose one of the above methods of redesign - an adaptive template, creating a new site on a subdomain and switching to it through a redirect, using free templates or creating a mobile application with which the user can more conveniently enter and stay on the page.
This approach will not only help maintain the loyalty of existing customers, but also provide an opportunity to attract new visitors.