Mobile version of the site: how to do? Adaptive design

Today, most people go online through mobile gadgets - tablets, telephones, and in connection with this, site optimization also comes to a new level. If the user comes in and sees that the site is not optimized for mobile devices: the image can not be viewed, the buttons are moved, the fonts are small and unreadable, the design is skewed - 99 out of 100% that it will come out and start looking for another more convenient. A search robot will tick off that the resource is irrelevant, i.e., does not match the search query. Therefore, the design of the page must be necessarily adapted for various mobile devices. What is a mobile version of the site, how to do it, and what is the best way to apply it? Read more in this article.

So, there are four key ways to adapt the site to a mobile version.

The first way - adaptive design

Adaptive 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 design of the site does not change.

The advantages of this method include:

• Convenient design, as the structure itself adapts to the screen parameters, and any update does not require the development of design from scratch, just correct CSS and HTML;
• One URL - the user does not need to remember several names, there is no need for redirection (redirection from one address to another), which can complicate the work of the webmaster, and it is easier for the searcher to sort and rank the resource with a single address.

Of course, adaptive templates also have their own shortcomings, which, by the way, are more than merits. Nevertheless, many developers adhere to this concept, for example, the corporation Google, whose mobile version of the site has an adaptive design. So, the disadvantages are:

• Adaptive design does not support the same tasks on a mobile device as on a PC. If this is, for example, a mobile version of the bank's website, where the user is more likely to have information about the exchange rate or the nearest ATMs, then this design is quite enough. But if it 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 hated one. This is especially true of resources, where animation, videos, pop-ups and other active elements are abundant. Because of the heavy weight, the page will simply "slow down", the user - get angry and go away, and the search positions of the site - fall.
• The impossibility of disabling the mobile version is another significant drawback. If some element is hidden by such a layout, you can not do anything to open it, unlike sites where it can be disabled and go 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 gadget. But it is suitable, in view of the shortcomings listed, to small, simple resources with a minimum of information and multimedia, without complicated navigation and animation. For a complex site, two other methods are suitable.

The second method is a separate version of the site

This method is very common and often successfully makes a site on a mobile device more convenient for perception. 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 functional is preserved, the design of the site simply looks different. Advantages of this method are obvious:

• User friendly interface;
• It's easy to change and make edits, since the version exists separately from the main resource;
• Due to the low weight of a separate version of the site is much faster than the adaptive template;
• Most often there is an opportunity to go to the main version of the page with a mobile.

But here, too, there were shortcomings:

• Several addresses - desktop and mobile version of the site. How do I make the user remember two options? Web masters often prescribe redirection (redirect) from the dextup version to mobile, but at the same time, if this page does not exist in the mobile version, the user will receive an error. Here there are difficulties with the search engines, which are difficult to rank 2 identical resources, and this directly affects the progress.
• Mobile version of the site from the computer, if the user mistakenly go to it, will look ridiculous, which can also affect attendance.
• This version is often heavily curtailed, 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 justifies itself and is the most common way of adapting a resource for mobile devices. It is popular with large online stores, for example, Amazon.

The third way is 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 a phone or tablet. It is called RESS. This is a 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 accommodate various types of information, while the phone memory and Internet traffic are not eaten in the same way as when visiting a site through the browser. They are easy to enter, because the link will always be on the screen at hand, and there is no need to enter a complex name in the address bar of the browser.

There are, of course, here and its shortcomings, such as the complexity in the development, the high cost of labor of a large number of programmers, the need to make several variants of layout. Sometimes a mobile device is not recognized by the application. Need regular technical support, correction of shortcomings. Nevertheless, this option is considered the best of the three offered due to its productive, smooth operation.

The cheapest way to make a mobile site

All of the above methods assume, albeit not always a long and complex, but still paid work of the webmaster. If you do not see the urgent need for such a development, you can use a simple and free mobile version of the site. How to make it the easiest?

Download special templates (plug-ins) for adaptive design. For example, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile and others. They will help to display the site correctly in the phone, at the same time you will receive several tips that should be corrected for better adaptation of the page to the mobile version.

Of course, this method is hardly suitable for serious resources. Rather, this free opportunity is intended for small and simple sites, blogs, news feeds. Do not forget that the search engine Google, like Yandex, today makes serious demands on mobile versions, so there is a great chance to lower your positions using this method.

With this method, most likely, advertising and pop-up banners will be cut off, but the page will load quickly and without "lags".

Principles of creating mobile versions

It does not matter if a mobile version of the site is created for free or with the help of webmaster staff, it is 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 very 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 something that the developer of the mobile version of the site should strive for. Imagine how difficult it is to perceive information that is full of colors, buttons, banners, and which you have to scroll endlessly in search of the right material. Mobile design should be simple and clean. Select 2-3 colors to separate the space (for example, branded). It is better if one of them is white. Divide the space of a small screen into clear and readable zones. The virtual keys should be visible so that the user clearly knows where to click and saw - here is the product, here is the form for filling out the data, here is the information on the delivery and payment.

All the additional options that would be useful in the desktop version and make life easier for the user will bring only complications. 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 equalization is not less acute, because if you do it incorrectly, the user will receive only the endings of important words. Alignment on the left and vertically is considered to be common. Imagine how you flip through the news line in your phone. You do this from top to bottom, but not in the left or right side.

An association

When the possibilities of a long chain of transitions are not there, try to combine several steps into one. For example, the site requires input of data in several stages - a name, then an address where each house contains a separate house, street, apartment, etc. In order not to force the user to try to get into a lot of small cells, ask him to fill in only 2 - Name and address.

And disengagement

Sometimes, on the contrary, you need to separate too much information. For example, in the drop-down menu you have a list of more than 80 cities where the delivery is carried out. Group them by region so that the user does not have to scroll through this huge list. When he points to the regional center or area, another list of cities will drop out.

Checklists

By the way, about the lists. The two are fixed in alphabetic or other order and with substitution. The choice of them depends on what will be listed.

Fixed is convenient in case the user knows exactly what he is looking for. For example, a city, number or date. The second option is suitable for long complex names or for cases where there are many variations of the same name, and each drop-down list brings the user closer to the goal. A variant with auto-substitution is more often used when a visitor needs help. For example, a site for knitting offers to buy knitting needles. The user enters the search query "Metal knitting needles", and in the tooltip sees "Spokes 5 mm", "Spokes 4,5 mm", etc.

Autofill

This point is especially relevant to sites where something is sold 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 You need to make purchases as quickly and conveniently as possible.

For this form can contain already filled data, you can resort to the most popular answers. For example, insert today's date, the method of payment in cash, the city, if you work in one region. They can be changed, but if you hit the target, the user's time will be saved.

Everything is read, everything is visible

Creating the design of the mobile version of the site, remember that all the phones are different, and the vision too. Perhaps your site will be viewed from a small screen, so the fonts should be simple and readable, the buttons - large enough that they can be clicked and not get to another page, and images should be opened separately, large, especially if it's about the Internet To the store.

Some statistics

Speaking about the adaptation of the site to mobile devices, you can not resort to statistics to understand how important this process is to promote the network.

The figures are as follows. Today gadgets are used by 87% of the population, apparently, except for the youngest children and some elderly people. Economists predict the growth of mobile commerce 100 times for the next 5 years. At the same time, only 21% of sites are adapted to work with mobile devices. So, the Internet traffic and the e-commerce market are only occupied by a small 5-th part.

Think about these figures. 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 on 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 for him comfortable conditions for staying on your site.

Without a mobile version, there can not exist:

• News portals, since it is most of them that look through the phone on the way to work or study;
• Social networks - for the same reason, plus there is a factor of communication on-line, which means that a convenient, understandable chat should be created for this;
• Reference sites, sites with navigation, etc., where people turn when they are in search of something;
• Online stores - an opportunity to attract buyers who do not spend time on shopping trips, but buy everything via mobile Internet.

Instead of concluding

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 be constantly upgraded and adapted to different devices. It is clear that if a person is uncomfortable to be on a particular resource, he can not get information about the product or price, place an order, learn about the delivery, he will find the site where all this becomes possible. Therefore, to win the competition, it is important to have a flexible, convenient, functional and interesting resource.

A mobile version of the Android or Ios website can help. To do this, you must select one of the above methods of redesign - an adaptive template, create a new site on a subdomain and go to it by redirection, use free templates or create a mobile application, through which the user can more conveniently go and stay on the page.

Such an approach will not only help to maintain the loyalty of existing customers, but also will provide an opportunity to attract new visitors.