Sergei Lukoshkin

March 26, 2015 | | 0 comments

The Internet has dramatically changed consumer behavior. For a long time they do not go to the store in order to choose a product. Quite the contrary: first they “surf” the Internet, find a product, compare it with competitors, then find a store, compare it with others, and only then decide where to make a purchase.

Only after that, they will go to the selected store, or simply order goods via the Internet. Today, more than 60% of buyers do just that.
It would seem that for success you need your company to have a website or an online store, and that's it. However, this is no longer enough.

Why is a mobile version of a website or responsive design important for a business?

The fact is that with the advent of smartphones and tablets, more and more buyers are looking for goods and services on the Internet using these devices, and not with desktop computers or laptops. And all because it is very convenient. Wherever the buyer is, he can search directly from his mobile phone, and there is no need to turn on the computer.
This is great, but the physical screen size of a wearable gadget, be it a tablet or a smartphone, is quite small, and therefore a site that looks great on a computer or laptop is very inconvenient to view on a mobile screen.
That's why now more than ever it's important whether your site is suitable for use on smartphones, tablets or phablets (a phablet is a cross between a smartphone and a tablet).

How to make a website mobile friendly?

There are two approaches to solve this problem:

1. Create a separate version of the site that opens on a mobile device
2. Create a website with a responsive design that adapts to any screen size

It is the second option that is most widely used, since it is cheaper to develop. Most modern sites are initially designed to be equally viewable on different screens.
Responsive website automatically adapts to the screen size of the device on which it is viewed.
For example, the site of our laboratory. This is how it looks on a computer screen

And this is how it looks on the screen of a smartphone


As you can see, even on a smartphone, nothing needs to be zoomed in. All controls, links, as well as pictures and fonts are very easy to use, even on a small screen.
Of course, the cost and development time of a responsive website have become longer, but at the same time, no matter what market you work in, a website with responsive design is a very timely investment in your business. And here is a list of the most important reasons for this.

Top 5 reasons to make a responsive business website

Mobile search. According to statistics (at the time of this writing), more than 50% of buyers search for goods and services on the Internet from mobile devices. And this number is growing very quickly. More recently, Google reported that sites that don't have a mobile version will rank very low in mobile search results. Therefore, if you do not have a mobile version of the site, do not be surprised that it will be difficult to find you in the search from a smartphone.
Convenience for users. Again, according to the same statistics, more than 40% of users said they would leave for another site if the current one does not have a mobile version. And again, their share is growing steadily. For business, this means that the buyer’s attention will be captured by the supplier whose website is convenient on any device.
Direct contact. The smartphone allows the user to immediately make a call to the phone number indicated on the site (if the site has a click-to-call function). Thus, you become much closer to a potential buyer.
New promotion opportunities. Today, mobile advertising is becoming widespread, but if you do not have a mobile site, then its effectiveness will be disastrously low. On the contrary, mobile-friendly sites get another powerful promotion channel.
Competitive advantage. And the last. Check if your competitors have mobile versions of their sites. If not, then you have a great opportunity to create a powerful competitive advantage and get those customers who leave the outdated sites of your opponents.

In the era of the Internet, the one who is most accessible to the majority of network users, the one who is easier to find and who is easier to interact with from any device wins the competition.
Are you still unsure if you need mobile version site or adaptive design?

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. A will check the box that the resource is irrelevant, that is, it does not match the search query. Therefore, the design of the page must be adapted to various mobile devices. What is a mobile version of the 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 adapt the site for the mobile version.

Method One - Responsive Design

Responsive templates change the site 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 does not 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 design development from scratch, it is enough to tweak CSS and HTML;
• one URL address - the user does not need to remember several names, there is no need to redirect (redirect 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 have their drawbacks, which, by the way, are more than advantages. Nevertheless, many developers adhere to this concept, for example, Google Corporation, whose mobile version of the site has an adaptive design. So, disadvantages:

• Responsive design does not support the same tasks on mobile as it does on desktop. If this is, for example, a mobile version of a bank's website, where information about the exchange rate or the nearest ATMs is more likely to be important to the user, then this design is quite enough. But if it is a complex structured resource with many sections and subsections, then visitors are unlikely to like it.
• Slow loading turns a favorite site into a hateful one. This is especially true for resources where animations, videos, pop-ups and other active elements are abundant. Due to the large weight, the page will simply “slow down”, the user will get angry and leave, and search positions site - fall.
• The inability to disable the mobile version is another significant drawback. If some element is hidden by such a layout, there is nothing you can do to open it, unlike sites where you can turn it off 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 gadgets. But, in view of the listed shortcomings, it will suit 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 is often successful in making the site more readable on a mobile device. 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;
• it is 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 responsive template;
• most often it is possible to go to the main version of the page from the mobile.

But even here it was not without drawbacks:

• Several addresses - desktop and mobile version of the site. How to make the user remember two options? Web masters often prescribe 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 the user visits it by mistake, will look ridiculous, which can also affect traffic.
• This version is often heavily curtailed, 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 stores such as Amazon.

The third way - RES-design

Google search engine actively supports this direction of mobile design. This is the most complex, costly, but effective method to adapt the site to a phone or tablet. It's called RESS. This is resource targeting in a mobile application that can be downloaded for each device separately. For android - with GooglePlay, and for Apple - with iTunes.

Such applications are fast, free, convenient, have the ability to host various kinds information, while the phone's memory and Internet traffic are not eaten up in the same way as when visiting the site through a browser. They are easy to access, as the link will always be on the screen at hand, and there is no need to enter a complex name in address bar browser.

Of course, there are also disadvantages here, such as complexity in development, high labor costs. a large number programmers, the need to make several layout options. Sometimes mobile device not recognized by the application. Regular technical support, correction of deficiencies. 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 involve, albeit not always long and complicated, but still paid work of a 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 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 to display the site more correctly on the phone, while you will receive a few tips on what needs to be corrected to better adapt the page to the mobile version.

Of course, this method hardly suitable for serious resources. Rather, it free opportunity is intended for small and simple sites, blogs, news feeds. It should also not be forgotten that Google search engine, just like Yandex, today makes serious demands on mobile versions, so there is a huge chance of lowering your 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, for its effective operation, it is required to adhere to several extremely important principles. So, what should be the mobile version of the site? How to make it productive, efficient and productive?

We remove all unnecessary

Minimalism is 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 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). Better if one of them is white. Divide the space of a small screen into understandable and readable zones. 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, which 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 get endings important words. Left-aligned and vertical alignment is generally accepted. Imagine yourself scrolling through the news feed on your phone. You do it 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 to combine several steps into one. For example, the site requires data entry in several stages - a name, then an address, where each individual cell contains a separate house, street, apartment, etc. In order not to force the user to try to hit many small cells, ask him to fill in only 2 - name and address.

And disconnection

Sometimes, on the contrary, it is required 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 hover over the regional center or region, another list of cities will drop out.

Lists

By the way, about 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 they are 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 auto-substitution option is more often used when a visitor needs help. For example, a knitting site offers to buy knitting needles. User enters search query“Metal knitting needles”, but in the tooltip he sees “5 mm knitting needles”, “4.5 mm knitting needles”, etc.

Autocomplete

This point is especially true for sites where something is sold online, and you have to fill out standard forms of payment, delivery, etc. If a person makes a purchase from a phone, then most likely he does not have time to get to a computer, which means that the process purchases should be made as quickly and conveniently as possible.

To do this, the forms may contain already filled 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 phones are different, and so is their eyesight. 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 they can be clicked without being taken to another page, and the images should open separately, large, especially when it comes to the Internet. -shop.

Some statistics

Speaking about the adaptation of the site to mobile devices, one cannot help but resort to statistics in order to understand how important this process is for online promotion.

The numbers are as follows. Today, gadgets are used by 87% of the population, apparently, except for the smallest children and some elderly people. Economists predict growth mobile commerce 100 times 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 market e-commerce 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 are so many free space in this market, you can take your own segment on it.

Where is the mobile version needed?

Using the mobile version makes sense for any platform that aims to get a high ranking. After all, this is a direct impact on the user, creating comfortable conditions for him to stay on your site.

Without a mobile version cannot exist:

• news portals, since most of them are viewed from the phone on the way to work or study;
• social networks- for the same reason, plus there is an online communication factor, which means that a convenient, understandable chat should be created for this;
• reference, sites with navigation, etc., where people go when they are looking for something;
• online shopping - 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 the stage of active growth and development, therefore, striving for leadership in the market, any company must ensure that its Internet resource meets the requirements. Due to the growing demands of the user, sites have to be constantly upgraded and adapted to different devices. It is clear that if it is inconvenient for a person 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 to do this. To do this, you need to choose one of the above redesign methods - an adaptive template, create a new site on a subdomain and go to it by redirecting, use free templates or creation mobile application, with which the user can more conveniently enter and be on the page.

We have released a new book, "Social Media Content Marketing: How to get into the head of subscribers and make them fall in love with your brand."

The mobile version of the site is a duplicate version of the main site, for which a special layout is used, which allows you to conveniently view and navigate through the pages of the resource from mobile phones and tablets.

More videos on our channel - learn internet marketing with SEMANTICA

The mobile phone has become a best friend for most people on the planet. Modern mobile gadgets have almost completely taken over the role of desktop computers and have radically changed the behavior of users on the Internet. They are both a source of information and a means of implementing many tasks. The dynamics of life require the most efficient use of time, which is why we have long been studying, buying and booking on the go.

Each project on the Internet has its own main site, but the screen resolution of mobile devices is different from computers and laptops. As a result, it is almost impossible to use the site from a phone, since its display is very inconvenient. That is why there was a need for an optimized version of the site that would be readable for pocket gadgets.

Why do you need a mobile version of the site

The abundance of identical web-resources, both informational and selling, generates a lack of loyalty on the part of visitors. Internet users have a choice, so when a visitor stumbles upon, for example, an inconvenient resource navigation, he prefers not to waste his time, but to leave the site and go to a competitor. This situation forces administrators to create the most comfortable conditions in order not only to attract visitors, but also to motivate them to stay.

Maximum coverage target audience and creating comfortable conditions for her - that's what a mobile version of the site is for.

A separate mobile version of the site is the implementation of comfortable access to the site from mobile devices, which has been used for a long time. In smartphones, the site is displayed in one column, so before making a mobile version of the site, the developer needs to think carefully about the design - place everything so as not to cut down the visitor in any way in functionality and, at the same time, make interaction with the resource as convenient as possible.

How it works

The principle by which the decision is made which version to show to the visitor is that when the user enters the site, automatic detection device screen. If the screen width is identified as a mobile gadget, then a redirect to the mobile version of the resource is triggered, which is located on a separate subdomain. To prevent search engines from treating this version as a separate resource in the future, it is better to place a subdomain on the same domain as the main site, otherwise promoting the mobile version of the site will be counterproductive.

How to translate the site to a mobile version

There are certain principles, and their implementation will require programming and layout skills.

In mob. version, you need to keep the general concept with the desktop version, but at the same time, develop separate design solutions, as well as the interface that is most convenient for usability. The resource elements on the visitor's screen should be appropriately spaced, and displayed large enough for easy finger tapping. After that, there is testing and final launch.

Mobile version vs adaptive layout

In parallel with a separate mobile version of the site, there is another interpreted variation - adaptive design.

Let's try to figure out how the mobile version of the site differs from the adaptive one.
A responsive site is not a separate version of the resource, it is the main site, and it automatically adjusts to the resolution of the device from which you log in.

The advantages of responsive layout include the fact that it has the same address as the main site, so no redirect is required. And this significantly enhances the position of the site when ranking. search engines. During the opening, absolutely the same site content and its functionality is displayed, but its appearance adjusts to the size of the window. In addition, there is the possibility of optimizing the resource.

But the development of an adaptive version is a more time-consuming process; accordingly, the costly part of the event will also be greater.

Responsive design is relevant for resources that do not have a large turnover of visitors - online stores, blogs, business cards, as well as websites, their main task is to deliver content.

Pros and cons of the mobile version

The mobile version has more high speed downloads and ease of navigation. Since the visitor sees a minimum of distracting information, the likelihood of a positive action on his part is higher. In addition, a separate mobile version is completely independent from the desktop one. This makes it possible to work with them separately.

The disadvantages of such a concept include certain difficulties in the field of SEO promotion. Since the placement of the same content is perceived as a duplicate, this requires separate measures to eliminate the negative impact on the site promotion process. Given that the mobile version is not universal, it requires a separate expense item in addition to the content of the main site.

This version of the site is suitable for large projects that already have high traffic to the main site, but want to increase loyalty to mobile devices without a redesign. In most cases, a separate mobile version is relevant for resources where download speed is important - social networks, mail services, news portals.

Summing up, we can only say that today a reasonable need for any Internet project is the ability to correctly display the site on mobile devices. How to implement this depends on the goals and objectives of the site, budget and capabilities.

Seeing how the site looks on a mobile device is easiest on your phone. Moreover, a screenshot from such a real device will be the most accurate display of the site on mobile devices, rather than using any emulator.

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

Simple ways to check the mobile version of the site

In contrast to himself complicated way checking the site on mobile devices, discussed in the previous paragraph, is the most in a simple 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 adaptive 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 hosting the site needs to explicitly indicate that the visitor came from a mobile device. The server receives this data from the string User agent, mandatory requested from your browser by any visited site. 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, which allows you to check the mobile version of the site through a computer, is to install a special browser. For example, Opera Mobile Classic Emulator. Versions of it 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 Opera browser works on the Blink software engine, so it is better to check the mobile site on modern browser. It can be either Opera or Chrome that run on the same WebKit-based Blink engine used in Apple Safari.

Must be included in specified browsers special developer mode (F12 in Chrome or Ctrl+Shift+i in Opera) and switch to mobile device mode:

After that, 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, which can analyze the site from the point of view of a mobile device and give not only a quantitative assessment of the site's mobility, but also give recommendations on how to improve the visibility of the site on smartphones. On our site there is just such a service based on technology Google Mobile Friendly. You just need to enter the address of your site in a special line and click the "Check" button. The robot will go to specified address, will take a screenshot of the page in mobile device format and give an opinion about the quality of your mobile site.
For example, this.

With the advent of the mobile device boom, developers were faced with a choice: should they keep mobile versions of their sites along with “full-fledged” ones, or should sites become responsive and adapt themselves to different screen sizes?

At the moment, when building mobile versions of sites, there are 3 main ways to build them:

• Adaptive design;
• Separate mobile version of the site;
• RESS (Responsive Design + Server Side).

Each of the methods has its pros and cons, which I will try to describe in detail.

Adaptive design

CSS3 Media Queries are commonly used to implement responsive design. Depending on the screen size, the user will see a different picture:

@media screen and (max-width: 1600px) ( div.for-example (width: 1500px;) ) @media screen and (max-width: 1280px) ( div.for-example (width: 1100px;) ) @media screen and (max-width: 1024px) ( div.for-example (width: 980px;) )

Benefits of Responsive Design

• Ease of development - with adaptive layout, the entire structure of the site automatically adjusts to different screen widths. In order to get a working product, you do not need to write everything from scratch - just tweak the CSS and HTML ... Given the availability of frameworks like Bootstrap, such development is not very difficult with a standard implementation. In addition, supporting such a product would be a relatively simple task.
• One URL - saves us from unnecessary redirects, and the need for the user to remember the address of the mobile version (even if it's just the prefix m.). Also, the presence of a single address will positively affect the promotion of the site, since it will be “more convenient” for search engines to work.

Disadvantages of Responsive Design

• Miscellaneous tasks - typical tasks of "mobile" users of large sites usually differ from those of PC users. If you are a bank client, then, most likely, in the mobile version of the site you will be interested in a very limited range of information - addresses of the nearest branches, ATMs, etc.
  In general, with adaptive layout, the most common approach is to make a copy of a regular site, implement the needs of all groups of the target audience in the layout for phones. But then you can forget about usability. The secondary sections necessary for five percent of visitors will create inconvenience for the bulk of customers.
The "weight" of sites remains a serious obstacle for mobile phone users. This means that some of the active elements typical of desktop sites, including embedded maps, videos, loan calculators, and animated menus on mobile sites, should be replaced with lighter alternatives. Can responsive design give us that ability? In a popular implementation, a user with a small screen must load the entire page in order to see only part of it. For example, if the desktop version of the main layout weighs 200 Kb, and the mobile version weighs another 50 Kb, you will have to download 250 Kb to view it. Of course, you can use page code compression, but extra requests will still go to the server.
• Hopelessness - One of the indisputable advantages of the mobile version: if you don't like it, you can turn it off and switch to a regular domain. Responsive design websites don't provide this simple yet important choice. If the custom layout is inconvenient, buggy, or if it hides an important navigation element, leave it alone: ​​there's nothing you can do to see it again. You will have to run to look for a desktop or competitor's website. You can come up with "crutches" to bypass this limitation (use cookies and include different style sheets). But this approach complicates development.

In general, the idea of ​​developing a mobile version in adaptive design is quite popular, despite the above disadvantages. In particular, this concept is fully supported by such giants as, for example, Google.

Separate mobile version of the site

To make the site convenient for mobile users, they often also create separate versions of sites - specially oriented to the user with a smartphone / tablet. The most common practice is to redirect mobile users to a special subdomain (m.example.com, mobile.example.com, etc.). Probably, in 99% of cases, the mobile version is a stripped-down main version - only with the functionality that, according to the developers, will be necessary and useful for users of mobile devices and tablets.

Benefits of the mobile version

• Ease of change since the site exists, de facto, separately from the main version, it is much easier to make changes to it related only to the mobile version, since the mobile version most often does not provide redundant, unnecessary functionality.
• User friendliness - the mobile version is usually greatly simplified compared to the desktop version, so the user will not have to go far for the information he needs.
• Speed ​​- due to the same simplification of the site, the mobile version loads faster. This is essential for users who are still using GPRS or weak 3G.
• Choice- most often, in the mobile version it is possible to switch to the main version of the site.

Disadvantages of the mobile version

• Multiple addresses -
• User inconvenience - different addresses for desktop and mobile versions. For some, this may turn out to be a plus, for others it can be an extremely annoying factor when, in order to conveniently view the site, you need to remember one more address. There are also problems with search engines: in order to avoid duplicate content, SEOs need to use the rel="alternative" and rel="canonical" meta tags. In addition, when a mobile user Google search clicks on the link in the results, he will be taken to the desktop version or redirected to the mobile version. But if the mobile version of this page does not exist, it will get an error.
• Limitation - creating a separate mobile site means getting rid of some of the content and functionality. In addition, you may have two different sets of content that can negatively affect the overall information picture.

In general, the creation of mobile versions of sites justifies itself quite well, in particular, for large projects. As an example, Amazon uses a special, mobile version of the site.

RES

Google itself, although it supports the use of responsive design by webmasters, uses a different system in its products. If you visit, for example, home page under different User-Agents, you can see different HTML for different devices. RESS - Responsive Design + Server Side. Implementation example, sketched "on the knee":

$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "libraries" . $DS . "browser.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE)( $tmpl = "template.m.php"; ) else if($device == DEVICE_TYPE_TABLET)( $tmpl = "template.t.php";) else( $tmpl = "template .php"; ) include(dirname(__FILE__) . $DS . "templates" . $DS . $tmpl);

Advantages of RES

In fact, the method may include the benefits of both a separate mobile and responsive version of sites, depending on the implementation. From what will be new:

• Traffic minimization - Unnecessary JavaScript can be removed from HTML, which frees up CPU, memory, and cache on the mobile device. It can also be specially optimized html and css.
• It is possible to use targeting - for example, for Android devices, offer to download the application from GooglePlay, and for Apple - from iTunes. For each device, you can make your layout.

Cons

• Difficulty in development such a method will require appropriate server configuration and the work of more programmers. It will also be necessary to make several different layout options.
• Device detection mechanism - Unfortunately, even in our time it has not yet been brought to perfection. Stories about how someone's rare phone is not defined as a mobile device pop up quite often.

In general, RESS is the best of the three proposed options, however, it requires much more effort during development.

Summary

In my personal opinion, there is no ideal option that everyone should use. The best option for me is RESS. However, this is one of the rare options because it requires a lot of effort to implement. In general, all 3 options have their pros and cons, depending on the essence and direction of the site.