Today, most people go online throughmobile gadgets - tablets, phones, 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 to 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.

mobile version of the site how to make

The first way - adaptive design

Adaptive templates suggest a changepictures 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, use CSS3 Media Queries. The design of the site does not change at the same time.

The advantages of this method are:

  • 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 rememberseveral names, there is no need for a redirect (redirection from one address to another), which can complicate the work of the webmaster, and the search engine is easier to sort and rank the resource with a single address.

Of course, adaptive templates have their owndisadvantages, 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 formobile device, as on the 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.
  • A slow download turns your favorite site into ahated. This is especially true of resources, where animation, video clips, pop-ups and other active elements are abundant. Because of the heavy weight, the page will simply "slow down", the user will get angry and go away, and the search positions of the site will fall.
  • Inability to disable the mobile version - moreone 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 is fast,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.

site design

The second method is a separate version of the site

This method is very common and often with successmakes the site on the 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, because 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:

  • Multiple addresses - desktop and mobile versionsite. 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 itselfand is the most common way to adapt the resource to mobile devices. It is popular with large online stores, for example, Amazon.

adaptive templates

The third way is RESS-design

The Google search engine actively supports thisdirection of mobile design. This is the most complex, 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 the 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's memory and Internet traffic are not eaten the way it is 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 their shortcomings, such asthe 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. Regular technical support, correction of deficiencies is necessary. Nevertheless, this option is considered the best of the three offered due to its productive, smooth operation.

google mobile site version

The cheapest way to make a mobile site

All of the above methods assumeand 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 easier?

Download special templates (plugins) foradaptive 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 forserious 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".

mobile version of the android website

Principles of creating mobile versions

No matter, a mobile version of the site is created for freeor with the help of webmaster staff, it is done 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?

mobile version of the site from the computer

We remove all unnecessary

Minimalism is something that should strive fordeveloper of the mobile version of the site. Imagine how hard 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. Virtual keys should be visible so that the user clearly knows where to click and saw - that's the goods, here's the form for filling out the data, here is the information on the delivery and payment.

Any additional options that would be usefulin the desktop version and would make life easier for the user, they 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 question of equalization is no less acute,since if you do it incorrectly, the user will receive only 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 the top down, but not to the left or right side.

An association

When there is no possibility of a long chain of transitions,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 to many small cells, ask him to fill in only 2 - name and address.

And disengagement

Sometimes, on the contrary, you need to disconnect tooA lot of information. For example, in the drop-down menu you have a list of more than 80 cities where the delivery takes place. 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 the event thatthe 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 paragraph is particularly relevant to sites where somethingsell 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 purchase process should be made as quick and convenient as possible.

For this, forms can contain already filleddata, 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

When creating a mobile version of a website, rememberthat all the phones are different, and the eyesight 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 when it comes to 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. Hence, 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.

mobile version of the site for free

Where is the mobile version needed?

Use the mobile version is appropriate forany 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 theactive 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.

Make this mobile version of the siteAndroid or Ios. To do this, you must select one of the above methods of redesign - 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 help not only to maintain the loyalty of existing customers, but also will provide an opportunity to attract new visitors.

</ p>