Many companies are faced with the choice of what is best to do in addition to an already working website: a mobile application or a mobile/responsive version of the website. SMS Aero has compiled several arguments for and against these options.
Yandex in its webinar showed the differences in mobile traffic between applications and sites:
Even though Mobile Web's metrics are not as attractive as those of Mobile App, not every company needs to urgently look for an Android and iOS developer.
It is not necessary to create a mobile application if:
- need to increase reach and attract new traffic
- you don't have a customer base yet
- You cannot buy goods through the site, but you can order a consultation (company audit, complex agricultural products, etc.)
- the client will use your product/service less than once a month
- you don’t have the resources to constantly update the application and promote it to the top
- you are ready to provide your product/service through aggregator services (for example, Delivery club for food delivery)
Experts from Yandex said in their webinar that for search engines there is no fundamental difference between the mobile version of the site and adaptive layout - you can choose the option that is more convenient for you.
Mobile applications are worth developing if:
- you want to work with the loyalty of an existing client (at least familiar with the brand)
- you provide a service that can be ordered without additional calls and discussion of the terms of purchase (ordering food, taxi, making an appointment, booking hotels, etc.)
- the process of interaction with the product is long (teaching foreign languages, sports, advice, etc.)
- you want to get into the catalog by area of activity to attract new customers (food delivery services)
- you need a high level of personalization, constant contact with the client or work with specific functions (camera, geolocation, etc.)
- you want to collect detailed information about your client
The vast majority of well-known companies have mobile applications: even Caterpiller (manufacturer of complex equipment) has its own game on Android. The key point here is that developing and maintaining the app will not break their budget, but will increase customer loyalty.
Small companies first need to attract customers - create a contact base, and only then work with loyalty.
Mobile apps are a trend, but they do not guarantee increased sales and customer growth. If you still doubt whether you need the application, follow the algorithm from SMS Aero:
- Study your audience and find out if they use applications (how? which ones?)
- Determine what benefit your application will bring to users and how much income it will bring to you
- Make a technical specification
- Find out how much development will cost (usually developing an application on 1 OS costs from 100 thousand rubles, depending on the complexity, but there are also cheaper designers with a test period)
- Add promotion costs to the resulting amount
- Calculate whether the costs of the application are comparable to the income you will receive from it
About 20% of traffic on the RuNet comes from mobile operating systems. And this figure continues to grow. Isn’t this a reason to think about whether to adapt your website for mobile traffic, because this is a completely different audience.
Adaptive design for various screen resolutions of electronic gadgets has long become a modern standard in website development. However, the percentage of such sites on the Internet is still not large. And there are even fewer sites that have their own mobile version. So is it worth creating a separate version of the site for mobile phones, or is it enough to make the design responsive?
Why does the site need a mobile version?
- Using the mobile version of the site from smartphones and mobile phones is much more convenient: there is no need for horizontal scrolling, all functionality works correctly (on some non-adapted sites it is even impossible to add an item to the cart!).
- In the mobile version, you can develop additional features aimed specifically at this target group of visitors: organize sending SMS directly from the site, determine the location and distance to the nearest point of sale, etc.
- The navigation of such sites is made adapted for the touch screen, which is also much more convenient.
- The mobile version of the site is lighter, has less voluminous code, and therefore loads faster, which reduces the user’s costs for downloading it when paying for mobile traffic.
- Search engines use mobile search for phones, so the mobile version of the site will be ranked higher, which means there will be more transitions to your site.
Types of mobile version of the site
Mobile version can be identical to the main site: repeat structure, content, design. This effect can be achieved even with special services, without contacting developers.
Independent mobile version of the site. Here the structure and functionality are completely changed, only the style matches are repeated, some of the elements and content are repeated so that the user knows that he is on the same site.
What is required for the mobile version of the site?
- Design. Perhaps the most important component. The latest design trends for mobile sites are maximum lightness and simplicity.
- Compatibility. The site must be displayed correctly on the most popular screen resolutions (240x320, 480x320 and some others). On such sites it is better not to use javascript or use it to a minimum, and use xhtml.
- Content optimization. This is especially true for pictures: they should be light in both size and kilobytes.
- Usability. Good navigation is the key to a successful mobile site!
Mobile version or responsive design?
You will not find an exact answer to this question. There are different points of view that rely on the disadvantages of both one and the second option.
The main disadvantages of responsive design include the fact that the “weight” of the site remains large, which means the site will still take a long time to load. In development, adaptive design is simpler than the mobile version, but it cannot be disabled on a mobile screen, while if the user does not like the mobile version, he can always switch to the standard version of the site.
Which sites need a mobile version?
Research shows that it is advisable to create a mobile version of the site for the following types of sites:
- Help site
- Social networks and services
- Web services
- Online stores
If you are already thinking about whether your site needs a mobile version or not, analyze the traffic to the site over the past year through analytics systems. If the share of mobile traffic is 15% or higher, the answer is obvious!
Numbers
Haven't decided yet? Then consider these statistics:
- Mobile phones are used by 87% of the total population. Apparently only small children don’t have them!
- Mobile commerce growth is projected to increase 99 times in the next 5 years!
- Only 21% of websites are adapted to work with mobile devices. You still have a chance to get your share of traffic!
Useful statistics are provided in the infographic below (clickable).
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 one. 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.
WriteA century of global mobilization. Smartphones have made it possible to access the Internet anytime, anywhere. Sometimes it’s even more convenient to browse websites, social networks, or look for information or a place on the map from a phone than from a computer. Computer operating systems are trying to bring the interface closer to mobile ones. The border between computer and mobile platforms is becoming thinner: mobile devices are made powerful and provide almost the functionality of a full-fledged computer, and computer interfaces are brought closer to mobile ones using, for example, common icons, a similar arrangement of elements, and similar gestures.
This trend cannot but affect the creation of websites. Managers recommend “mobile” sites, clients want them, designers draw, layout designers, oddly enough, layout, and programmers come up with solutions.
It’s easier, of course, to immediately determine how it will behave on a mobile device when creating a site, but there are old clients and their old and not so old sites for which such a solution was not provided. Although some people think that there is no need to create “mobile” websites.
Understanding that the amount of mobile traffic is growing by leaps and bounds, leads to the need to come up with solutions for the correct display and ease of use of the site on smartphones and tablets. I see two real solutions, indicated, in fact, in the title of the article. There is a third option - a mobile application, but we reject this option. Why? Well, for example, if I need to make a one-time or infrequent purchase, I will not install the application on my smartphone; it’s easier to find another site. Creating an application makes sense for a large project, or for a project that is frequently used by clients, which will be more convenient to open through a separate application than through a mobile browser. Now, no matter what, everyone has their own application, but, in fact, most simply do not need them.
There are two options left: adaptive layout or mobile version. First, let's define the difference between these two methods.
Adaptive layout.
The content on the site does not change. It adjusts to the width and height of the screen. Individual parts of the content can be stretched or narrowed, lined up differently (they were in 3 columns - now they are in one), scaled, hidden (but not disappeared) under a button (the most common thing that is hidden under a button is a menu).
Mobile version.
Done on a subdomain. The most common options are m..site, pda..ru/mobile/.
It is determined that the user came from a mobile device and is redirected to the mobile version with the ability to switch to the full version. However, the site content, appearance and functionality may differ radically. As a rule, this difference lies in simplification and trimming of the site, primarily for fast loading on mobile devices.
What is better: mobile version or adaptive layout?
To understand this issue, consider the pros and cons of each option.
There are general advantages:
correct display on mobile devices;
tailored for mobile devices.
Mobile version:
the ability to “cut out” unnecessary functionality
Redesign the site so that the designer’s mother won’t recognize it. This is significant if the elements on the mobile version are located in completely different places than on the full version.
On the server side, use different or slightly modified logic, which allows you to flexibly manage the functionality of the mobile version and increase its loading speed
A separate domain, which will make SEO specialists cry, because for search engines it will be two different sites.
The need to switch to the full version if something happens. For example, to get full functionality. Also, if, for example, there is a link to the mobile version on another site, then those visiting from a computer will have to do an unnecessary action (click “full version”) or use a version that is inconvenient for a computer.
Adaptive layout:
The site always adapts to the current resolution. When the browser window is reduced on a computer or when the orientation is changed on a mobile device.
As a rule, with this method, all elements are in the same places as in the full version, and for a user who knows the full version, it will not be difficult to figure out the mobile version.
Same domain, same addresses. No redirects, problems with sitemaps and robots. The SEOs are smiling.
A complex, high-load project will take a long time to open on a mobile device. Whether 4G or 24G, mobile internet is mobile internet.
Lack of flexibility in choosing functionality. Everything that was on the computer will be on the mobile phone. All elements are in the same (or almost the same) places, which is not always good. To remove something, you need to hide it in css, which removes unnecessary functionality, but does not increase loading speed. And if, on the contrary, something should only be on a mobile phone, it will also always load and only hide at high resolutions.
Small resolution is not always suitable for mobile devices. Maybe it's just a browser window that's not open full screen. At first glance, “so what?” But there are things that need to be displayed only on mobile devices, and in this case they will appear on the computer.
Should you choose an adaptive layout or a mobile version?
As we can see, despite the fact that these are quite similar concepts, there are differences.
What to choose in favor of.
If this is a highly loaded online store, or some large project, then, obviously, for high performance you need to make a mobile version.
If the site is not very “heavy” or even simple, then adaptive layout will be the best, elegant and beautiful solution.
I vote for the third option. This is still an adaptive layout, but optimized from the very beginning, that is, initially fast loading. This is good not only for users logged in from mobile devices, but for users from a computer.
A fast site is a good site.
Even at the stage of developing technical specifications and design, it is necessary to determine how the site will look on small screens. And even be ready to give up some of the unnecessary functionality for the sake of speed and versatility. And developers creating a website should ask themselves the question of optimizing queries to the database and, accordingly, reducing their number, optimizing code on the server and client parts.
Adaptive layout is the best option. And it’s better to think about this at the stage of forming the technical specifications. Postponed for later this problem can come back to haunt you:
- for SEO optimizers, a decrease in mobile search results and, consequently, a decrease in the number of visits from mobile devices (and this is a huge, constantly increasing number of people);
- programmers spent time on making the site “at least somehow” look on smartphones, and later on adaptive redesign or creating a mobile version
- website owners lost clients who will go to competitors whose website on the phone performs its functions and looks correct.
Let's figure out what's better: a responsive or mobile version of a website, and what does a mobile app have to do with it? Let's start with the adaptive version.
For a website to be well received by potential audiences, it must be simple and easy to use. Responsive web design serves this purpose.
When viewing a website with a responsive design on a laptop, tablet, or even a smartphone, there will be no problems or inconveniences that will prevent you from getting the necessary information.
With responsive design, the site automatically adapts to any screen size and looks neat and modern on all devices.
However, responsive website design is often confused with another concept that is similar in purpose – a mobile version of the website. It’s in vain, because these two approaches to more convenient viewing of a resource (adaptive or mobile version) may seem similar only at first glance; in fact, they are not identical.
We propose to separate these concepts and analyze in detail the advantages and disadvantages of each of them.
What's good about responsive design?
So, the main function of adaptive web design is to adjust the text, and most importantly, adapt photo and video images to the device on which this information will be broadcast. This is possible thanks to the so-called site reprogramming, redesign of layouts and creation of pages that are fully adapted, for example, to a mobile device.
The main trend of our time is the transition from computers to smartphones. That is, it is more convenient for users to access web pages using mobile devices. This desire must be taken into account if you want your site to continue to be visited. Therefore, the resource must be adapted for smartphones and tablets.
Let’s not forget about beauty; adaptive design is an excellent solution from the standpoint of convenience and elegance.
Finally, its biggest advantage is the variety of devices with which you can visit web pages. Adaptive design is standardized from Google’s point of view, and will fit absolutely any device, which, by the way, saves some money on developing a mobile version of the site.
Are there any disadvantages to responsive design?
Although responsive web design has many positive properties, it also has disadvantages that should not be overlooked.
As a rule, any site is filled with a lot of information, otherwise it is called “content”. The more content on the site, the longer it will take to sort and process the content. The pages directly depend on this. If it goes slowly, this will become a big problem, because not every user will patiently wait for the page to load and appear in the browser. So it’s better to think about this in advance to avoid adverse consequences.
So, responsive web design has both pros and cons. As Brad Frost, author of Atomic Web Design, said, good performance is good design.
However, let's not forget that there is also a mobile version, as well as a mobile application. Let's first look at the mobile version and what it is.
Concept and features of the mobile version
If you need your site to load quickly and function well on a smartphone, then you should consider a special mobile version. It will become a more serious optimization and will be intended only for presenting the site on smartphones.
The mobile version has several significant advantages. Firstly, this is maximum convenience for users, which is achieved by simplifying the mobile version and eliminating “unnecessary” elements on the site. It also has a more colorful and multifunctional interface.
Secondly, the site loads much faster in the mobile version, which is important for the user. In addition, your smartphone will always be at hand wherever you go.
The mobile version has variability, that is, you can switch to the full version of the site at any moment if you wish. To do this, at the end of the mobile version of the site there are usually two links such as “Mobile” and “Computer”. By clicking on the “Computer” link, you can switch from the mobile version of the site to the full-fledged version of the site, however, it may take longer to load and consume more Internet traffic.
Mobile version and mobile application: are they the same thing?
These are different things. The mobile version of the site is simply a simplified version of the site for its correct display on smartphones. A mobile application is a separate development, which is designed so that the user on his smartphone can quickly and conveniently perform the necessary actions that are on the main website.
Usually you need to download it for free (or paid) from the Google Play or App Store and install it on your smartphone. And the mobile version of the site does not need to be downloaded; it can be opened and worked through your browser, which is not always convenient.
Mobile applications have become widespread, for example, the Sberbank Online mobile application or Alfa Mobile from Alfa Bank.
A look into the future
To load a website on a smartphone or any other mobile device, responsive design is a great choice. If it is more important for you to have wider functionality and capabilities, feel free to choose the mobile version.
Although responsive design adapts well to screen size, it is not a perfect mobile strategy. In some cases, it is better to choose the mobile version of the site, as it combines a lot of unique features.
Of course, it also happens that there is a responsive design on the site, there is a mobile version and there is a mobile application, such as, for example, banking websites.
Video “Matt Cutts: “Responsive design does not “lose” in SEO of the mobile version of the site””
In this video, Matty Cutts, a Google spokesperson, explains in layman's terms what a responsive and mobile site is, and whether a responsive site can "harm" a site:
Programs and games
