• home
  •  > 
  • Games
  •  > 
  • Which is better: responsive design or mobile version? What to choose: mobile version vs responsive design? What is better: mobile version or adaptive layout

Which is better: responsive design or mobile version? What to choose: mobile version vs responsive design? What is better: mobile version or adaptive layout

Today, most people access the Internet through mobile gadgets - tablets, phones, and in this regard, website optimization also reaches 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 leave and start looking for another more convenient one. And it will check the box that the resource is irrelevant, that is, it does not correspond to the search query. Therefore, the page design must be adapted to various mobile devices. What is a mobile version of a website, how to make it, and what is the best method to use? Read more in this article.

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

Method one - responsive design

Adaptive templates involve changing the website image depending on the screen size. As a rule, they are set to standard 1600, 1500, 1280, 1100, 1024 and 980 pixels. Queries are used for implementation. It doesn't change itself.

The advantages of this method include:

  • convenient development, since the structure itself adapts to the screen parameters, and any update does not require developing a design from scratch, it is enough to correct the CSS and HTML;
  • one URL address - the user does not need to remember 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, adaptive templates also have their disadvantages, which, by the way, outweigh their advantages. Nevertheless, many developers adhere to this particular concept, for example, Google Corporation, whose mobile version of the site has a responsive design. So, the disadvantages:

  • Responsive design does not support the same tasks on a mobile device as on a desktop. If this is, for example, a mobile version of a bank’s website, where the user will most likely need information about exchange rates or nearby ATMs, then this design is quite sufficient. But if it is a complex structured resource with many sections and subsections, then it is unlikely to appeal to visitors.
  • Slow loading turns your favorite site into a hated one. This is especially true for resources where there is an abundance of animation, videos, pop-ups and other active elements. Due to the large 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 cannot 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 gadget. But, in view of the listed shortcomings, 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 site more user-friendly on a mobile device. Its essence is to create a separate version of the page, designed 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 is easy to change and make edits, since 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 it is possible to switch to the main version of the page from the mobile one.

But this is not without its drawbacks:

  • Several addresses - desktop and mobile versions of the site. How to make the user remember two options? Web masters often transfer from the desktop version 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 find it difficult to rank 2 identical resources, and this directly affects promotion.
  • The mobile version of the site from a computer, if a user accesses it by mistake, will look ridiculous, which can also affect traffic.
  • This version is often very stripped down, desktop, so the user will receive 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 to adapt a resource for mobile devices. It is popular among large online stores such as Amazon.

The third way is RESS design

Google search engine actively supports this direction of mobile design. This is the most difficult, costly, but effective method of adapting a website for a phone or tablet. It's called RESS. This is targeting a resource into a mobile application that can be downloaded for each device separately. For Android - from GooglePlay, and for Apple - from iTunes.

Such applications are fast, free, convenient, and have the ability to host various types of information, while phone memory and Internet traffic are not consumed as much as when visiting a site through a browser. They are easy to access, since the link will always be on the screen at hand, and there is no need to enter a complex name into the address bar of the browser.

Of course, there are also disadvantages here, such as complexity in development, high labor costs for a large number of programmers, and the need to make several layout options. Sometimes the mobile device is not recognized by the application. Regular technical support and bug fixes are 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 website

All of the above methods require, although not always long and complex, but still paid work for the webmaster. If you do not see an urgent need for such development, a simple and free mobile version of the site will suit you. What's the easiest way to do 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 your phone, and you will receive several tips on what 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, this free feature is intended for small and simple sites, blogs, and news feeds. We should also not forget that the Google search engine, like Yandex, today places serious demands on mobile versions, so there is a huge chance of lowering your rankings 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 doesn’t matter whether the mobile version of the site was created for free or with the help of a staff of webmasters, whether it was made using the RESS system or using an adaptive template. The most important thing is that for it to work effectively, it is necessary to adhere to several extremely important principles. So, what should the mobile version of the site be like? How to make it productive, efficient and productive?

We remove everything unnecessary

Minimalism is what a developer of a mobile version of a website should strive for. Imagine how difficult it is to perceive information that is replete with colors, buttons, banners, and which you have to endlessly scroll through in search of the right material. Mobile design should be simple and clean. Choose 2-3 colors to divide the space (for example, branded ones). It's 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 press and sees - here is the product, here is the form for filling out the data, here is the information on delivery and payment.

All the additional options that would be useful in the desktop version and make life easier for the user will only bring complications here. Leave only the most important elements. Animation, advertising banners, and multimedia will most likely only slow down the operation of a website or application and distract from the main thing.

Alignment

The issue of alignment is no less pressing, since if done incorrectly, the user will only receive the endings of important words. It is generally accepted to align left and vertically. Imagine scrolling through the news feed on your phone. You do this from top to bottom, but not to the left or right.

An association

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

And disconnection

Sometimes, on the contrary, it is necessary to separate 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 moves the cursor over a regional center or region, another list of cities will appear.

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 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 of the same name, and each one brings the user one step closer to the goal. The auto-substitution option is more often used when a visitor needs help. For example, a knitting website offers to buy knitting needles. The user enters the search query “Metal knitting needles”, and in the hint he sees “Knitting needles 5 mm”, “Knitting needles 4.5 mm”, etc.

Autocomplete

This point especially applies to sites where they sell something online, and you have to fill out standard forms for payment, delivery, etc. If a person makes a purchase from his phone, then most likely he does not have time to get to the computer, which means the process purchases need to be made as quickly and convenient as possible.

To do this, the forms may contain already filled in 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 creating the design of the mobile version of the site, remember that everyone’s phone is different, and so is their vision. Your site may be viewed on a small screen, so fonts should be simple and readable, buttons should be large enough to be clicked without being taken to another page, and images should open separately and large, especially when it comes to the Internet. -store.

Some statistics

When talking about adapting a website 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 uses gadgets, apparently except for the youngest children and some elderly people. Economists predict mobile commerce will grow 100-fold over the next 5 years. However, only 21% of sites are adapted to work 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, while there is so much free space in this market, you can carve out your own segment in it.

Where is the mobile version needed?

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.

The following cannot exist without a mobile version:

  • news portals, since these are what most people view from their phones on the way to work or school;
  • social networks - for the same reason, plus there is the factor of online communication, which means that a convenient, understandable chat must be created for this;
  • reference books, sites with navigation, etc., where people turn when looking for something;
  • Online stores are an opportunity to attract customers who do not waste time shopping, but buy everything via the mobile Internet.
Instead of a conclusion

Today, mobile technologies are in a stage of active growth and development, therefore, striving for market leadership, any company must ensure that its Internet resource meets the requirements. Due to growing user requests, sites have to be constantly modernized and adapted to different devices. It is clear that if a person is inconvenient to be on a particular resource, he cannot get information about a 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 site Android or iOS will help you 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 moving to it by redirecting, using free templates, or creating a mobile application with which the user can more conveniently enter and stay on the page.

Greetings, my dear blog readers. Ruslan Galiulin is in touch. Today we will talk about mobile versions of websites that every website or blog should have in order to move up to the TOP of search engines. In the article I will provide style codes and ready-made examples of page layout that you can download to your computer.

If your site is still not mobile, I recommend using my advice or contacting professionals - http://www.Mobile-version.ru who will do everything according to search engine standards. Using the same link, you can check your site for mobility.

In 2013, Google began putting pressure on webmasters (https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), convincing them of the need to create lightweight site modifications, and since 2015, mobility has become one of the ranking aspects (https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Yandex is not far behind, having created a special “Vladivostok” algorithm that takes into account the site’s suitability for viewing on phones.

Mobile Friendly today is not just about taking care of visitors, but an indispensable condition for promotion.

When a website is created from scratch, the Mobile First approach is used. But most have old work projects. The main question that the mobile version of the site raises in such situations is how to make it without spoiling the existing template?

There are three approaches:

  • A separate address and layout - placed on a subdomain like m.site.ru. Redirection occurs through a server redirect to the user agent.
  • Responsive design - the url and html remain the same as in the desktop format, but in CSS media queries provide rules for different screens.
  • RESS is a responsive design, the address remains the same, but the server sends style sets depending on what type of hardware is requesting the page.

For owners of old projects, the best choice is to use adaptive layout. Let’s look at how to do this with your own hands and without using unsafe plugins step by step.

Mobile version of the site: how to do it right

Further actions will require solid basic knowledge of html and css or the ability to quickly google incomprehensible things.

Information for beginners: in CSS, the words before the curly braces mean specific pieces of the html file for which they are responsible for displaying. They are often written with a dot or hash - #place (property: value;).

Step 1. Remove restrictions.

Owners of rubber layouts can skip this step. The rest will have to work harder.

Width - we look for large sections in the code with a rigidly defined display. If the parameter is specified in pixels or points, you need to change its value to percentages, ems and other units that are sensitive to the environment. Often the main container or content area has a fixed width - in most cases the restrictions are removed by replacing it with max-width.

Pictures - instead of clear sizes, we write properties for the img tag, which will make the images adaptable. Photos will change proportions within their parent containers.

img (

Max-width: 100%;

Height: auto;

Tables - you won’t be able to set them to be fully responsive, but you can make pages with them suitable for mobile devices by adding this code:

table (

Display: block;

Width: 100%;

Overflow-x: scroll;

Overflow-y: hidden;

Ms-overflow-style: -ms-autohiding-scrollbar;

Webkit-overflow-scrolling: touch;

Wraps are specified by the float property. Setting this parameter will allow blocks to move depending on window parameters, adjusting to elements with a stable position or within parent containers. Standard div elements are placed on a new line by default. For example, placing 1000 px div blocks of 200 px each in a container, you can see the following picture.

The blocks stood on top of each other. Adding a wrap removes line breaks and lines up the elements in all available space.

Step 2: Plan your content reorganization.

Find out what parts of your desktop site should be displayed on mobile devices. To do this, answer yourself these questions:

  • Which blocks perform only decorative functions? - Most often these are sliders, sidebar decorations, questionnaires, random photos.
  • What do visitors ignore? - Heat maps of clicks and paths will help answer this question. We will mercilessly hide the least active elements.
  • What must remain in the mobile version? - Usually this is advertising, a feedback form, subscriptions or social media buttons.
  • Think about how the site should look on tablets, smartphones and small old phones - you can set a different look for each device.

Step 3. Convenience.

Navigation: phone screens are too small; a regular website menu rarely fits into such a frame. It is customary to install a menu that drops down using a button.

Content Area: For phones, it's common to set the body width in CSS to 100%, depending on the available space. This means that text, modules, advertising, and sidebar content will be displayed in one column on small devices.

Sensors: Fingers are not as precise as a mouse, give them plenty of room. The space around links and other active elements must be at least 28 x 28 pixels.

Help your visitors define active space - indents, highlights, color changes and other things that can be set for touches, write a hover pseudo-class for links and buttons.

Implementation of Media Queries with examples

If you've ever created CSS tables for printing, you already have an idea of ​​the possibilities of assigning individual styles depending on conditions.

Media queries are logical expressions; accessing them implies an answer with a true or false parameter. If the query result is true, that is, the user agent or device dimensions match the specified media type, then the style rules specified inside the media block are automatically applied.

Media queries can be assigned according to the following parameters:

  • browser window width and height;
  • device width and height;
  • orientation - landscape or portrait mode;
  • screen resolution.

The current list of arguments is available in the official specification.

Let's move on to examples. There is a ready-made template, the size of its content part is 1000 pixels, all internal elements and details are configured in relation to this parameter.

If the user's screen is narrower than the specified content part, a scroll bar will appear. Floating design elements can behave in unpredictable ways - bumping into each other, blurring, or narrowing too much.

First of all, we remove the fixed size that creates the band so that it does not interfere with the settings. In our template, this is the navigation wrapper. In a reader layout, this can be one or more elements. If you find it difficult to determine, open the browser developer tools - using the block model view, find the element that does not fit into the screen dimensions.

To fix this, remove the fixed frames by writing in the template styles:

@media only screen and (max-width: 1000px) (

Nav (width: 100%; )

Now, if the user’s screen width is less than 1000 px, then the width of the menu will be equal to 100% of its size. The main version of the template looks the same as before. Replacing the property removed the bottom scroll bar when shrinking the screen.

But the blocks still look dubious - let's change their display, increasing the width as a percentage to the required size.

We add to the same mediaquery:

Block (width: 35%;)

How to find out the optimal sizes for the blocks of your site? Calculate manually or take any ready-made grid as a basis - fluid grid. You can focus on existing standards: in two-column layouts with a window width of 980-1050px, the wrapper is taken as 95%, the content - 60%, and 30% is left for the sidebar. The remaining space is used to form borders and margins for neatness.

However, you can use box-sizing for the content so as not to calculate pixels each time, but to work according to the overall dimensions.

Let's move on to setting display on screens with lower resolution:

@media only screen and (max-width: 600px) (

Block (

Float:none;

Width:85%;

Margin: 1em auto;

If the screen is less than 600 px, then our blocks should fit into one column - remove the wrappings, set new indents, center and change the width. Most often it is set to 100%, but if for some reason this is inconvenient, we set our own size.

This way you can set not only the dimensions of content blocks, but also their display. For example, prohibit the display of large elements, replacing them with any convenient ones.

Let's demonstrate the possibilities using the example of changing colors and displays.

The smartphone version hides the main menu and turns the block color blue, while the larger screen displays the design without these changes.

Hiding the navigation is required in most cases - it is replaced with a button. It is more appropriate to do this using javascript; you can use ready-made solutions.

Edits are made pointwise, the range can be limited both above and below. It's fast and convenient - in one line you can set separate CSS for different devices, without affecting the main view of the site.

You can declare @media rules anywhere within an existing style sheet, or you can create a separate one for these declarations, and then import it into the main CSS using the @import rule.

Mobile version of the site: how to do it and what to pay attention to

MediaQuery is understood by all modern browsers, but it will not work in IE 8 and below. The problem is solved by turning to older IEs using conditional comments. They need to be written in the template code, not in the CSS.

The script itself is available on GitHub (https://github.com/scottjehl/Respond), adds support for minimum and maximum dimensions and media queries to old IE.

Another problem is that responsive design involves the use of Html5, which is again incomprehensible to older browsers. Treated with hack:

Document.createElement("header");

Document.createElement("nav");

Document.createElement("section");

Document.createElement("article");

Document.createElement("aside");

Document.createElement("footer");

The code is written in html; in addition, block display of the created elements is set in CSS:

header, nav, section, article, aside, footer (display:block;)

Let's immediately touch on the question - how to make sure that some scripts are displayed only with the specified screen parameters. If you use jquery, you will need to add a simple script to the template code. The numbers change to the required ones. It reads like this: if the window width exceeds 980 pixels, the script specified in the path is applied to the page. You can specify several, the syntax is written by analogy using a semicolon inside curly braces.

If ($(document).width() > 980) (

$.getScript("path to script");

Another point is how the iPhone’s mobile browser should process the transmitted content, and whether its increase is allowed. To do this, an initial scale is written in head:

All that remains is to check the correctness - for this you can use your own browser and phone or turn to services.

If the site is being redesigned on a local server, correctness can be determined in ami.responsivedesign.is . For correct display, Denver owners will need to change the encoding to utf-8 by editing the server httpd.conf file.

The service will demonstrate what the project looks like on different devices.

Additionally, the template is tested https://developers.google.com/speed/pagespeed/insights/ or in a special form https://www.google.com/webmasters/tools/mobile-friendly, as well as in webmasters.

In Yandex this looks detailed, but Google will simply report that there are no problems.

If everything is done correctly, there will be no scrolling or unnecessary elements. The mobile version is ready, and now you have learned how to make it yourself. If the material was useful to you, then like and subscribe to the blog newsletter. All the best.

Below, by clicking on one of the buttons, you can download 2 examples of the folded page in this lesson and just work with the finished pages and copy the code.

Sincerely, Galiulin Ruslan.

The easiest way to see what a site looks like on a mobile device is on your phone. Moreover, a screenshot from such a real device will be the most accurate display of the site on mobile devices than using any emulator.

If you need to check the mobile version of a website online on your computer, then mobile device emulators come to the rescue. The most accurate of these are tools for developers of mobile operating systems, the most popular of which are Android Studio and Apple Xcode. These kits contain the most complete emulators of various devices and checking the mobile version of the site will be most closely approximated to a real mobile device. However, installing developer tools on a regular computer will require a lot of time, experience, and software knowledge.

Simple ways to check the mobile version of a site

In contrast to the most complex way to check a site on mobile devices, discussed in the previous paragraph, the simplest way is to reduce the width of the browser window to the size of a narrow column. If your site adapts to this width, then the mobile version of your site is made using responsive design technology.

However, this method does not work if the mobile version of the site is made using a separate design. In this case, the server on which the site is located needs to explicitly indicate that the visitor came from a mobile device. The server receives this data from the User Agent string, which is necessarily requested from your browser by any site you visit. Therefore, in order to see how the site looks on mobile devices, you need to “trick” the server and provide it with the User Agent string from the phone, and not from the computer.

The second most difficult option to check the mobile version of the site via a computer is to install a special browser. For example, Opera Mobile Classic Emulator. Its versions exist for Windows, Mac and Linux. Unfortunately, this development is based on the old Presto engine, used before version 12 of the Opera browser, and will not really show how the site is displayed in a modern mobile browser. Since 2013, the Opera browser runs on the Blink software engine, so it is better to check a mobile site on a modern browser. It can be either Opera or Chrome, running on the same WebKit-based Blink engine used in Apple Safari.

It is necessary to enable the special developer mode in the specified browsers (F12 in Chrome or Ctrl+Shift+i in Opera) and switch to mobile device mode:

After this, you can easily see how the site looks on a mobile device.

If a visual personal assessment is not enough for you to check a mobile site, then there are special programs that can analyze the site from the point of view of a mobile device and provide not only a quantitative assessment of the site’s mobility, but also give recommendations for improving the site’s visibility on smartphones. On our website there is just such a service based on technology Google Mobile Friendly. You just need to enter the address of your website in a special line and click the “Check” button. The robot will go to the specified address, take a photo of the page in mobile device format and give an opinion about the quality of your mobile site.
For example, this.

There we looked at why adaptive design is needed, what its advantages are, and whether it is needed or not. As we understood from the article, responsive design is needed, and everyone needs it. Today we will look at what is better for a website: adaptive design or a separate mobile version.

Our company is constantly improving and gaining new experience. In this article we will talk about one of them.

At the end of the article you will find a nice bonus :)

mobile version

The mobile version of the site is a separate version of it, designed for smartphones and tablets. As a rule, it has a design optimized for mobile devices, as a result of which the content is presented in a readable form and loading occurs almost instantly. Usually placed on a subdomain in the form m.site.ru or mobile.site.ru.

BenefitsConvenience

Users do not need to scroll back and forth and diagonally in search of the desired content, or zoom in and out in order to read the desired text. The entire site is presented in one column, which must be scrolled from top to bottom. All content is usually structured and divided into logical blocks.

Download speed

As a rule, the design of the mobile version is very simplified, and the code and scripts are minimized, which ensures very fast loading of the site on mobile devices.

Edits on the site

The mobile version is in fact a separate site, which means making changes is not difficult. There is no need to worry about how to make sure that the changes affect only the mobile version and do not affect the desktop version.

Switch to the main version

In most cases, the user can easily switch to the main version of the site if he needs to use functionality that is not available in the mobile version.

DisadvantagesDuplication

Duplicate content on different subdomains has a negative impact on search engine promotion. As a rule, programmers are involved in creating a mobile version, and SEO specialists are involved in promotion. And even if all the wishes of SEO specialists are taken into account in the test version, it is not a fact that they will migrate to the combat version in their original form. Often during a transfer something changes or something is added. As a result, we may end up with problems with ranking due to duplicates in the mobile version.

Update

All content added to the main site will have to be duplicated on the mobile version. And if the site, for example, is a news portal and is updated daily, this can become quite a costly process.

Functionality limitation

Heavy functionality solutions are often not transferred to the mobile version. Usually, before creating a mobile site, the requests and behavior of users from mobile devices are analyzed and, based on this data, only what is really important for mobile visitors is given.

The mobile version has proven itself well and is still often used by webmasters. The same can be applied to mobile applications. But this is already very expensive, and the average website cannot afford the development of mobile applications.

Adaptive layout

A responsively designed website is displayed equally conveniently on both desktop and mobile devices.

AdvantagesEase of implementation

As a rule, with adaptive layout the screen width is adjusted to the desired display size. All this can be implemented using HTML and CSS. And modern CMS and frameworks allow you to do this in just a couple of clicks. And modern templates already immediately provide adaptive design. All that remains is to install it? and in a couple of minutes you have a responsive design that is convenient for any audience.

SEO

If in the mobile version we are faced with duplication of content on different subdomains, then there is no such problem here. Will the page have one address (URL)? and when the screen or device resolution changes, our design will not break or we will not be redirected to the mobile version. This option better solves the problem of duplicate content than rel="canonical" attributes or prohibitions in robots.txt on the mobile version.

DisadvantagesHeaviness

Usually, with adaptability, all the functionality available to users is left. This means that mobile visitors may encounter a clutter of scripts and a large amount of information that will be difficult to immediately grasp on a small smartphone display. If it is normal for a desktop to have a size of 200-250 KB, then a mobile one usually takes up less than 50 KB.

Purposes of visit

Users often visit the site to find out contact information, directions, availability of branches, etc. And on some sites, they will have to navigate through several difficult pages to reach their goal.

No choice

On the mobile version, if the programmer made up the block crookedly and hid the phones behind the logo, you can always switch to the desktop version and, even with scaling, see the contact information. If the programmer messes up with adaptive layout, then you will have to try to find out what you want, and not everyone can do it. Therefore, adaptive design must initially be designed very well and competently, and then tested just as competently.

Bottom line: adaptive layout or mobile version?

There is no single right answer here. For each task, the optimal option is selected. And responsive design, which is ideal for one site, in another case will only cause problems related to the usability of the site. For large players and bulky sites, it may be easier to create a mobile application that will only have the functionality that users need.

Our opinion is that if you only have an informational website, then responsive design is perfect. Because compressing text and pictures is much easier than deciding how to redesign a huge calculator on a website without losing usability.

But if you have a personal account on your website with huge functionality or it will be difficult to transfer your website to adaptive design, then it is easier to make a mobile version where all the tools for users can be conveniently located.

Well, if you don’t have a website yet, and you’re just thinking about creating one, then it’s better to immediately include adaptive design in development.

The cost of search engine promotion and its results depend on how we adapt the site for mobile devices.

To bookmarks

Dmitry Mrachkovsky, an optimizer from Ashmanov and Partners, told how to choose between an adaptive and mobile site and what non-obvious problems you will encounter.

Benefits of responsive and mobile websites

It is difficult to definitively answer the question which adaptation technology for smartphones and tablets is more effective from an SEO point of view. Even among the major players, I did not notice a preponderance in favor of any solution. M.Video, DNS, Wildberries, Aviasales use adaptive layout, and Lamoda, 220 Volt, Yulmart, Yandex.Market use mobile sites. But let's look at what benefits the first and second get.

Adaptive layout of the M.Video website and mobile version of the 220 Volt website

Adaptive layout helps you avoid developing a separate mobile version. This has advantages:

  • We do not require a separate page structure for display on mobile devices. It is enough to adjust the desktop version of the site using CSS.
  • A single URL is used for desktop and mobile versions. Therefore, the site’s content is not duplicated, pages do not compete with each other, and promotion work affects rankings in desktop and mobile searches.

The mobile version is a more expensive and flexible solution. It can be edited without affecting the main site. This gives advantages:

  • A mobile site can be made as easy and quick as possible to load by removing unnecessary functionality at the code level.
  • The interface can be improved for mobile users by adding functionality that was not available on the desktop version of the site.
  • The user can always switch to the main version of the site on a mobile device if he wants.

I would like to mention one more technology - RESS. It shows the user desktop or mobile templates depending on the device, but the page URL does not change. RESS combines the advantages of the adaptive and mobile versions described above. But it also has two disadvantages: complex and expensive implementation and errors in identifying rare and unpopular phone models.

Problems with adaptive layout

Adaptive is an economical and convenient solution, but from the point of view of search engine promotion it has several pitfalls.

Misinterpretation of the adaptive

Some people implement adaptive layout incorrectly and display two templates on one page in code at once - desktop and mobile. Depending on the user's device, the desired part of the code remains visible, and the rest is hidden using display: none . This creates three problems:

  • All content elements are loaded twice: texts, images, H1 and H6 headings, breadcrumbs, related and recommended products, and so on. And search engines really don’t like duplicates.
  • Unused parts of the content are hidden using CSS. The opinion of search engines on this issue is ambiguous. Google stated that it ignores the content of hidden blocks, and Yandex stated that it takes into account the content of the entire page. Most SEO specialists agree that such a scheme creates a risk of falling under sanctions.
  • The code is duplicated and the site loads slower.

    • Such an implementation is the wrong approach to RESS technology.

    Hiding unnecessary elements

    To make the interface of the adaptive version more convenient, some get rid of some of the functionality: distracting blocks, large texts in catalog categories, and so on. Anything unnecessary is hidden using display: none . But the problem is that all the code is used to load the page and the site is slow. In addition, as mentioned above, search engines have a controversial attitude towards such content - there is a risk of falling under sanctions.

    Incorrect use of JavaScript

    Some people use JS to avoid unnecessary blocks being displayed on mobile devices. But this method is no better than display: none . There is a risk that search engines will not index the content intended for them, even on the desktop version. Search engines generally do not always correctly perceive AJAX content, especially if a number of conditions for correct indexing are not met.

    Why do people still use responsive design?

    The choice of adaptive is usually due to two main advantages: developing only one version of the site and the absence of problems with multiple URLs.

    This is also a convenient solution for promoting to several regions. We focus all our efforts on one domain and get results in desktop and mobile searches. To do this, you need to link the regions of interest to the site in Yandex.Directory.

    And for Google, create a page with branch addresses so that the search engine understands in which regions you operate. Adaptive layout with a single domain is very successfully used by M.Video. The store has high positions in mobile and desktop search results for product, category and information queries.

    You can go the other way - use geosubdomains to increase the textual relevance of pages. In this case, subdomains like spb.site.ru, samara.site.ru, kazan.site.ru are assigned regions through Yandex.Webmaster and then headers and meta tags are written indicating the toponym. Another plus is that it’s easy to set up separate analytics for geosubdomains to track results by region. This method of promotion is practiced by MediaMarkt.

    Problems with mobile versions of sites

    The relative high cost of development is not the only drawback of mobile sites. Here is a list of less obvious problems that you may encounter when choosing this technology.

    Double promotion work

    The mobile site is optimized and promoted separately from the main one, and this requires more resources than in the case of an adaptive site. You need to start optimizing by ensuring that the mobile version is correctly indexed and does not compete with the desktop version. To do this, link them in Yandex.Webmaster and Search Console, specify the correct rel="alternate" attributes, configure indexing and XML map generation.

    Chaos due to absolute links in content

    Desktop and mobile templates load content from the same database in 99% of cases. If it uses absolute links to the internal page of the desktop site indicating the protocol and domain, then they will be displayed on the mobile page. When you click on the link, one of two scenarios will happen:

    • If the desktop version has a user agent defined, the mobile version of the page will open to the user.
    • In other cases, the user will see the desktop page, and the work on creating a mobile version will be in vain.

    In this case, the internal link juice of the site may be broken. To avoid this problem, use relative links in your content. That is, for the href attribute, specify /page/ instead of https://site.ru/page/ .

    The content and structure of desktop and mobile sites may differ. Therefore, it is logical to index the content of both in the search to avoid errors. Google recommends indicating on the mobile version that the content of the desktop site is canonical. On the other hand, the search engine says that the content of non-canonical pages is not taken into account.

    Yandex is clear in this regard - it separately indexes the content of mobile and desktop pages. To do this, just set the rel="alternate" attribute from the main version to the mobile one, and you can also set up 301 redirects from the desktop version to the mobile one, taking into account the user agent of the device.

    Ambiguity of mobile-first index requirements

    To prepare for the transition to a mobile-first index, it is logical to select the mobile version of the site as the canonical page. True, the recommendations regarding mobile-first have their own ambiguities. For example, Google’s guidelines say that the content of the mobile and desktop versions should be similar, but does not disclose the degree of “similarity.”

    What if ranking in desktop search requires a certain block of content, which will be superfluous in the mobile version, but priority will be given to the mobile version?

    Excerpt from Google's guide to mobile site indexing

    Excerpt from Google's report on the implementation of the mobile-first index

    Thoughtless use of turbo pages

    Some introduce search engine innovations indiscriminately, with the expectation of affecting rankings. For example, Yandex turbo pages, which do not replace full-fledged mobile pages in search, include a small part of user functionality and are less converting. If you have a commercial website and you are confident in the quality of the mobile version, do not rush to implement “turbo” - even for pages with articles and reviews.

    Reducing the effect of external links

    Links are still important for ranking, especially in Google search. When we have a mobile subdomain, some users begin to link to it in social networks and forums. And the other part uses links to the main site address. As a result, links have less effect in mobile and desktop searches than if we had one domain.

    Features of promotion in the regions

    Above we talked about two ways to regionally promote an adaptive product - using a single domain and geo-subdomains. Let's consider these options for mobile versions.

    In the first case, we promote the main domain and the mobile subdomain m.site.ru. Each of them needs to be specified regions through Yandex.Directory. The problem is that sometimes it is impossible to independently link the mobile version of the site to the branch. You will have to contact technical support, but this does not guarantee results. You cannot create a separate organization for the mobile version of the site. Therefore, if there are many branches, the binding may take a long time.

    We generally exclude the option of using subdomains like m.spb.site.ru or spb.m.site.ru. Although Kholodilnik.ru, for example, uses it. But in this case, you need to configure addressing between all regions of mobile and desktop versions, keep them up to date, track changes and monitor services for webmasters. This is a lot of work that is unlikely to pay off.

    Submitting for mobile suitability testing

    If you do not submit the optimized version of the site to Yandex.Webmaster for mobile-friendliness testing, it may not appear in mobile search results. The problem also applies to adaptive. This doesn’t always happen, but I recommend following messages in Webmaster.

    Fragment of communication with Yandex technical support about assigning a region to the mobile version of the site

    Why use mobile versions?

    The main advantages of mobile versions are, undoubtedly, the ability to create a separate template and high loading speed. In addition, it is easier for older sites to create a separate mobile version than to implement an adaptive one.

    Also, many SEO specialists noted an increase in search traffic after introducing a mobile site instead of an adaptive one. Although I do not exclude that the reason for the growth was that there were errors in their adaptive layout that negatively affected the ranking.

    Which option to choose

    If you are developing a website from scratch, or have a small project, take a closer look at adaptive layout. This is a more economical and faster solution. But it’s better to plan the functionality right away so that you don’t have to hide part of the site from being displayed on mobile devices in the future.

    If you prioritize user experience, you should opt for the mobile version. It can be changed without consequences for the desktop. This is important if the site occupies a leading position in desktop search results in its segment.

    You can also use RESS technology, but remember that in this case Google gives preference to the mobile version.

    Excerpt from Google's guide to indexing sites using RESS

    Whatever technology you choose, try to ensure that the site and its versions are correctly indexed, load as quickly as possible and display on all devices without problems.

    Thanks to SEO specialists