Today, most people go online through mobile gadgets - tablets, phones, in this regard, site optimization is also reaching 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 exit and start looking for another more convenient one. And it will check the box that the resource is irrelevant, that is, it does not match the search query. Therefore, the page design must necessarily be adapted for various mobile devices. What mobile version site, how to make it, and what is the best way to apply it? Read more in this article.

So, there are four key ways to make your site mobile.

Method one - responsive design

Responsive templates involve changing the site image depending on the screen size. Typically, they are set to the standard 1600, 1500, 1280, 1100, 1024 and 980 pixels. Queries is used for implementation. At the same time, it does not change itself.

The advantages of this method include:

• convenient development, since the structure itself adjusts to the screen parameters, and any update does not require design development from scratch, it is enough to correct the CSS and HTML;
• one url address- the user does not need to memorize several names, there is no need for a redirect (redirection from one address to another), which can complicate the work of a webmaster, and it is easier for a search engine to sort and rank a resource with a single address.

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

• Responsive 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 be interested in information about the exchange rate or the nearest ATMs, then this design is quite sufficient. But if this is a complex structured resource with many sections and subsections, then it is unlikely that visitors will like it.
• Slow loading turns your favorite site into a hated site. This is especially true for resources where animations, videos, pop-ups and other active elements are present in abundance. Due to the heavy weight, the page will simply "slow down", the user will get angry and leave, and the site's search positions will fall.
• The inability to disable the mobile version is another significant drawback. If an element is hidden by such a layout, you will not be able to do anything to open it, unlike sites where you can disable it 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 gadgets. But, due to the listed disadvantages, it is suitable for small, simple resources with a minimum of information and multimedia, without complex 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 website 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:

• user-friendly interface;
• easy to change and make edits, since the version exists separately from the main resource;
• due to the low weight, a separate version of the site works much faster than the responsive template;
• most often it is possible to switch to the main version of the page from the mobile.

But here, too, there were some drawbacks:

• Several addresses - desktop and mobile versions of the site. How do I make the user remember the two options? Webmasters often prescribe from the desktop version to the mobile version, but at the same time, if this page does not exist in the mobile version, the user will receive an error. Here, difficulties arise with search engines, which find it difficult to rank 2 identical resources, and this directly affects the promotion.
• The mobile version of the site from a computer, if a user accidentally enters it, will look ridiculous, which can also affect traffic.
• This version is often heavily cut down, desktop, so the user will receive very limited functionality. But at the same time, if something is missing, the visitor can go to full version pages.

In general, a separate mobile site justifies itself and is the most common way to adapt a resource for mobile devices. It is popular with large online retailers like 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 a website to a phone or tablet. It is called RESS. This is targeting a resource 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, they have the ability to place various types of information, while the phone memory and Internet traffic are not eaten up as when visiting the site through a browser. They are easy to access, since the link will always be at hand on the screen, and there is no need to enter a complex name in the address bar of the browser.

Of course, there are also disadvantages here, such as the complexity of development, the high cost of labor of a large number of programmers, the need to do several layout options. Sometimes the mobile device is not recognized by the app. Regular technical support, correction of deficiencies. Nevertheless, this option is considered the best of the three proposed due to its productive, trouble-free operation.

The cheapest way to make a mobile site

All of the above methods involve, albeit not always long and difficult, but still paid work of a webmaster. If you do not see an urgent need for such a development, a simple and free mobile version of the site will suit you. What is the easiest way to make it?

Download special templates (plugins) for responsive design. For example, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile and others. They will help you display the site more correctly on the phone, while you will receive several tips that should be corrected to better adapt the page to the mobile version.

Of course, this method is unlikely to be suitable for serious resources. Rather, it is free opportunity intended for small and simple sites, blogs, news feeds. It should also be remembered that the Google search engine, just like Yandex, today imposes serious requirements on mobile versions, so there is a great chance of downgrading 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 of 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. Most importantly, it requires adherence to several critical principles to be effective. So, what should be the mobile version of the site? How do you 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 hard it is to perceive information that is replete with flowers, buttons, banners, and which you have to endlessly scroll through in search of the necessary material. Mobile design should be simple and clean. Choose 2-3 colors to separate the space (eg brand). Better if one of them is white. Divide the small screen space into clear and readable areas. Virtual keys must be visible so that the user clearly knows where to click and see - 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 only bring difficulties here. Leave only the most important elements. Animation, advertising banners, multimedia, most likely, will only slow down the work of the site or application and distract from the main thing.

Alignment

The issue of alignment is no less acute, because if done incorrectly, the user will only receive the endings of important words. Left and vertical alignment is generally accepted. Imagine flipping through the news feed on your phone. You do this from top to bottom, but not to the left or to the right.

Union

When there is no possibility of a long chain of transitions, try to combine several steps into one. For example, the site requires data entry in several stages - the name, then the address, where each separate cell contains a separate house, street, apartment, etc. In order not to force the user to try to get through many small cells, offer him to fill in only 2 name and address.

And disconnection

Sometimes, on the contrary, you need to disconnect too a large number of 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 doesn't have to scroll through this huge list. When he hovers over the regional center or region, another list of cities will drop out.

Lists

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

Fixed is useful 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 of the same name, and each brings the user one step closer to the goal. The autocomplete option is more commonly 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 tooltip he sees “5 mm knitting needles”, “4.5 mm knitting needles”, etc.

Autocomplete

This point especially concerns 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 purchases must be made as quickly and conveniently as possible.

For this, the forms may contain already filled out 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 readable, everything is visible

When designing the mobile version of the site, keep in mind that everyone has different phones, and so does their vision. 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 you can click on them without going to another page, and the images should open separately, large, especially when it comes to the Internet. -store.

Some statistics

Talking about adapting a site to mobile devices, one cannot help but resort to statistics to understand how important this process is for online promotion.

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 growth in mobile commerce over the next 5 years. At the same time, only 21% of sites are adapted to work with mobile devices. This means that Internet traffic and the e-commerce market are occupied by only 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 do you need a mobile version?

Using the mobile version is advisable 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 a mobile version, the following cannot exist:

• news portals, since most of them look at them from the phone on the way to work or study;
• social networks - for the same reason, plus there is a factor of online communication, which means that for this a convenient, understandable chat should be created;
• help sites, sites with navigation, etc., where people turn to when looking for something;
• online stores - an opportunity to attract buyers who do not waste time on shopping trips, but buy everything through Mobile Internet.

Instead of a conclusion

Today, mobile technologies are in the stage of active growth and development, therefore, striving for market leadership, any company must ensure that its Internet resource meets the requirements. Due to the growing user requests, sites have to be constantly modernized and adapted for various devices. It is clear that if a person is inconvenient to be on a particular resource, he cannot get information about a product or a price there, place an order, learn about delivery, then he will find the site where all this becomes 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 website will help to do this. To do this, you need to choose one of the above redesign methods - an adaptive template, creating a new site on a subdomain and going to it by redirect, using free templates or creating a mobile application with which the user can more conveniently enter and be on the page.

We've all heard the statistics: 2014 is a year when more people use smartphones to access the Internet than computers or laptops. ... You don't want your site to be left behind, but how exactly do you program your site for this mobile web? There are three main options, each with their own advantages and disadvantages. In this article, we'll take a look at the pros and cons of each in order to choose the best path for developing your site.

Option 1: Responsive Design

Responsive design determines the screen resolution at which pages are viewed using media queries, then adjusts the page size and layout accordingly. Google stated that he prefers responsive web design, which makes him a heavyweight in this discussion.

pros :

1. Only one version of each page. The page adapts to the device type to display the content (the device type is determined and then different content is displayed).
2. This approach greatly simplifies site maintenance.
3. Responsive design does not rely on user agent detection like the other two do. Detection User-Agent(i.e. detecting which browser or device is requesting a web page) is not bad in itself, but it is not perfect, and if there is a glitch in the process, users can get wrong version your site. In addition, it frees search spiders from crawling your site under various User-Agent- this means that your site will be better indexed.
4. Responsive website designs tend to load faster in browsers. Because all devices receive the same content, there is no process for detecting a possible redirection of a request due to a user agent. Everyone knows that speed matters.

Minuses:

1. It will take some time and effort to redesign an existing site. So if you have a large site, moving towards responsive design may not be the best choice.
2. Depending on where your site is located, it can be difficult to squeeze content onto a cell phone screen.
3. Navigation items are not always displayed in the correct size, and on hover, surface items do not work at all on touch screens... This can cause changes in navigation.
4. There are times when responsive pages with big amount images load more slowly with faster design responsiveness.

If you decide to go for a responsive website, keep in mind that you should definitely test your website on different browsers and devices (or use a good User-Agent emulator) before launching the site.

A good example of responsive design is a website site :

The mobile version changes the site quite nicely.

Option 2: Dynamic serving

The essence of dynamic serving or redirection is that it first defines User-Agent visitor (i.e. what device he uses to view your site), and then a server-level redirect to the desired URL is performed. Dynamic forwarding can be done in several ways.

One way to implement dynamic redirection is a one-way redirect, in which mobile users are redirected from the main regular site to its mobile version.

The second type, bi-directional redirection, is when users are redirected from the mobile version to the regular one as well. The parts of the code responsible for such a redirect are sometimes called control tags. When implementing this, the tag is specified rel = "alternate" on the regular version, pointing to the mobile site; and on the mobile site, the tag is placed rel = "alternate" indicating the main full version of the site.

Pros:

1. Since the redirection is done at the server level, there will only be one Url for each page.
2. Dynamic call forwarding also works well for regular phones - mobile phones, which have a fixed feature set, but are not as extensive as smartphones. For example, mobile phones usually cannot download applications, but generally have some web browsing experience. The big difference is that mobile phones cannot handle CSS so they can't do responsive design well. Therefore, it is important to know your audience and what type of mobile devices they are using.
3. If you want to have it specifically for your mobile users, then this option will allow you to do this, since different code is displayed for mobile users and users of the regular version Html.

Minuses:

1. Such an implementation doubles the amount of work, because you need to make a separate site for mobile devices, with a separate set of indexed Html requiring a separate SEO.
2. The required list of user agent value strings also requires ongoing maintenance, as new strings must be added when a new mobile device is released.
3. Finally, keep in mind that you will need to use " Vary HTTP header“If your site is serving content dynamically. The title helps to get the content in the right way and helps the site engine to cache it correctly. Google shows details on how to add this header ( https://developers.google.com/webmasters/smartphone-sites/details#dynamicserving) .

Option 3: mobile site

This option, as the name suggests, involves creating a separate domain specifically for mobile users. The most common examples are m.domain.ru or mobile.domain.ru... This is a popular option for large enterprises. retail... This method involves developing content specifically for visitors using the mobile (and there is no server-level redirection).

Pros:

1. For large sites with hundreds of thousands or millions of pages, implementing responsive design will involve too much work. In the case of a mobile site, it will be possible to gradually build up the mobile version of the site (it is like a separate site) and there will be much less work.
2. As with dynamic redirects, the mobile site looks better on mobile phones than a responsive website. Depending on the demographics of your site, this may not be a criterion; but for some businesses, this is important.

Minuses:

1. Your mobile site will not benefit from any positive growth in your backlink profile to the main site (unless you have implemented bidirectional redirects). So if you want your mobile users to be able to find you in organic search, this point can be especially negative.
2. Your mobile site will require some additional work on SEO. You will need to submit separate XML Sitemaps for Google and Yandex. In addition, you will need to edit your meta tags. Mobile meta tags should be shorter than the regular site.

Here's an example when a mobile site is done right. NYTimes.com has a main site for desktop visitors:

AND mobile.nytimes.com for mobile visitors:

As you can see, the content has been significantly reformatted and scaled down to make it readable on a mobile device.

conclusions

To do right choice for your site, be sure to ask yourself how many of your visitors are using mobile devices to access your site. Check it out. If the total percentage mobile traffic is near the 5% level, then you can probably take your time to implement the design for mobile.

If forecasts come true, then mobile use will continue to increase. Then those whose sites will not display correctly on mobile devices will lose a significant part of search traffic and more. Make sites "for people" and we will be happy for you!

Every year, visitors increasingly access the Internet and make purchases from mobile devices. From them, according to Yandex.Metrica data from the spring of 2016, 29% of all visits to sites are made in Russia, and this figure is constantly growing.

Search engines, which always stand for the convenience of the end user, recommend making your sites digestible for different devices. Mobile SERP ranking now takes into account whether the page is optimized for smartphones / tablets or not. Therefore, when creating a website, it is better to think about it right away. If the site already exists and works, then it is necessary to optimize it in order to keep up with the times and not lose potential customers using mobile devices.

There are two options for optimizing a website for smartphones and tablets: adaptive layout and mobile version. Let's consider how these methods differ, find out their pros and cons.

Adaptive design

The main feature is that all interface elements automatically adjust to different screen sizes. Due to this, such sites are equally well and conveniently displayed on personal computers, laptops, smartphones and tablets.

Advantages:

• the site always adjusts to the current screen resolution - when changing the orientation on a mobile device or when the browser window on a desktop is reduced;
• no need to set up redirects;
• the site ranks better in mobile search results;
• ease of site management, as the content automatically adjusts to different devices;
• savings - an adaptive website layout will cost you less than developing a separate website for mobile devices.

Disadvantages:

The main disadvantage of this option is that it does not solve the problem of website loading speed. On both a computer and a mobile device, when you open a responsive site, the same amount of information is loaded. Therefore, it is important to consider that a site that opens instantly on a PC, on a smartphone or tablet using the mobile Internet will open slowly.

mobile version

The mobile version assumes that two sites are being created: the main one for viewing from computers and the mobile one for smartphones and tablets.

Advantages:

• just like the responsive layout, the mobile version ranks better in the mobile search results;
• the ability to post on the site only the functionality and content that is necessary for smartphones and tablets;
• menus, navigation and other design elements can be fully customized to meet the needs of mobile users;
• the main (for computers) and mobile versions can be changed independently of each other;
• fast loading times.

Disadvantages:

• the need to spend resources on supporting and managing two resources at the same time, to monitor the relevance of information on both;
• when posting content, you must first adapt it for mobile devices, and then publish it twice: on the main and mobile versions;
• the need to set up redirects;
• the problem with duplicate content - one article has two different addresses, which negatively affects the uniqueness indicator and display efficiency in search engines;
• the mobile version of the site requires large investments: you need to take into account the costs of development, updating the mobile version and buying a separate domain.

Comparison results

Based on the above advantages and disadvantages of the two options for optimizing the site for mobile devices, we recommend switching to a responsive layout: this option is not only less expensive in terms of costs and time compared to the mobile version, but also allows you to conveniently manage the site.

Experience of the platform for creating sites Nethouse

More than 50,000 active resources are currently operating on the basis of Nethouse: online stores, websites of companies and specialists, landing pages, portfolios and blogs. In December 2016, we launched new responsive templates and offered users to switch to them in a couple of mouse clicks, without losing information and absolutely free.

To date, about 25% of our users have switched to responsive templates. Let's see how this affected the statistics of their sites.

1. Search traffic.

Some of our users worried that the transition to responsive design could negatively affect traffic, and they will have to wait for it to recover. The graphs below show that this did not happen.

2. Search mobile traffic.

Search engines rank responsive sites higher in mobile search results, and Google, even in the desktop version of the search results, marks sites without responsiveness with the line "Your page is not optimized for smartphones." The graphs below show that after switching to adaptive layout, search traffic from smartphones is constantly increasing.

3. Behavioral factors.

Responsive design not only looks great and outwardly meets all the requirements of modern trends, but also improves the behavioral indicators of sites, such as bounce rate, browsing depth and time on the site, which is especially important for traffic from mobile devices. The graphs below show the changes in statistics on behavioral factors in comparison of the periods "before" the change of the template and "after".

In order to determine which is better - a responsive design or a mobile version of the site, you first need to understand why all this is needed.

According to comscore.com, the percentage of users browsing sites from mobile devices is increasing every year:

Active subscriber base mobile transmission data, world, million people, 2007–2015

In this regard, new algorithms were developed for search engines, as well as additional ranking factors were introduced: now the search results take into account how mobile-friendly the site is (convenient for viewing on mobile devices). In Google, the Mobile friendly algorithm was launched on April 21, 2015, in Yandex - “Vladivostok” on February 2, 2016.

Desktop version of the site and adapted version for mobile devices

How search engines determine if a website page is mobile-friendly:

• pages must contain content that does not require horizontal scrolling or scaling to view;
• the site should not contain elements that do not work on many mobile devices - Flash, Java applets and Silverlight plugins;
• texts on pages must be readable without scaling;
• Links should be spaced enough to be easy to click on.

Most importantly, search engines rate websites unequivocally - either mobile-friendly or not.

Using Google Tool PageSpeed ​​Insights(https://developers.google.com/speed/pagespeed/) you can determine how fast your site's pages load, as well as their usability. PageSpeed ​​can range from 0 to 100 for Page Speed ​​and User Experience, for example:

Results of 85 points and above are considered good.

If the page of the site does not meet the requirements of the service, a report is issued in the form of recommendations for eliminating problems, for example:

This service can be used for initial diagnostics and identification of problems on the website.

When is it necessary to develop a mobile or responsive version for websites?

To understand whether it is worth adapting a site for a "mobile" audience, you need to analyze it in web analytics systems (Yandex.Metrica or Google analytics) by attendance in the context of devices from which users visit the site. If more than 15% of the audience uses smartphones or tablets, it is recommended to develop a responsive layout or mobile version. It is important to consider the site traffic here as well. For example, for sites with a large number of visitors (from 1,000,000 and above), this bar is reduced, since such a large segment of the site's traffic cannot be neglected.

Mobile version of the site

mobile version- a separate version or a separate template adapted for display on mobile devices. It may not display all the blocks that are on the main version of the site.

A "special feature" of the mobile version: when switching to it, the URL changes in the address bar of the browser - the prefix "m." Is added to it, for example: m.example.ru.

View on a computer monitor and on a mobile device: the mobile version is different from the main one

An example of a website with an adapted mobile version: http://www.lamoda.ru/ (m.lamoda.ru).

The main advantages of the mobile version of the site

• Light weight and, as a result, high download speed. This is essential for users who have low speed Internet access (GPRS or weak 3G).
• The user's choice of which version to view (mobile or main).
• Compliance with the requirements of search engines for the convenience of viewing the site on mobile devices.

Disadvantages of the mobile version

• If you need to make changes to the site, you will have to make them both on the regular version of the site and on the mobile one, that is, the volume of work doubles.
• When developing it, you often have to discard some of the content.
• Since the mobile and main versions of the site are on different domains, it does not improve behavioral factors main domain, that is, it will be a disadvantage for SEO optimization.

This is a special design of web pages in which the elements of the site change their size and position at different display resolutions. The site automatically adapts to the size of the device on which it is open, be it a PC monitor, smartphone or tablet. Thanks to this type of layout, the site will be conveniently and clearly displayed on different devices... With the use of adaptive design technologies, the functionality of the site does not suffer at all.

View on a computer monitor and on a mobile device - the adaptive version is different from the main one

An example of a site with an adaptive version: http://www.mvideo.ru/.

Benefits of responsive design for mobile

• One URL for all content.
• Flexible interface - you can customize the comfortable display of the site for any screen width.
• Responsive design meets the requirements of search engines for the convenience of viewing the site on mobile devices.
• If the site has a responsive version, then the behavioral factors become better on mobile devices, and from this the overall performance of the site improves. For ranking in search results, this will be a big plus.

Disadvantages of responsive design for mobile devices

• The need to create separate layouts of site pages for each display resolution.
• The responsive version, unlike the mobile version, cannot be switched to normal mode... That is, the user does not have the choice of displaying the site. The disadvantage is relevant if there are errors in the adaptive version - for example, elements are displayed incorrectly.
• The complexity of adding a new page template, since they will need to be configured for correct display on the adaptive version. If you add information to existing page templates, then there will be no display problems.

Which is better: responsive layout for mobile devices or mobile version of the site?

The best solution for a website is to use a responsive layout for mobile devices. Despite a number of shortcomings, a site with a responsive layout is more functional. Also, the presence of page templates implies the ease of adding content to the site, in contrast to the mobile version, in which the work on adding content is duplicated, since in fact there are two different sites. A big plus is the fact that the responsive version improves the behavioral factors of the main site. This is useful in terms of promotion and usability. Based on this, we recommend making your choice in favor of a responsive layout.