Mobile version of the site or responsive design?
With the beginning of the boom era of mobile devices, developers were faced with a choice: should they keep mobile versions of their sites along with “full-fledged” ones, or should sites become adaptive and independently adjust to different screen sizes?
Currently, when building mobile versions of sites, there are 3 main ways to build them:
Each of the methods has its own advantages and disadvantages, which I will try to describe in detail.
CSS3 Media Queries are commonly used to implement responsive design. Depending on the screen size, the user will see a different picture:
')
In general, the idea of ​​developing a mobile version in an adaptive design is quite popular, despite the above-mentioned disadvantages. In particular, this concept is fully supported by such giants as, for example, Google.
In order to make a website convenient for mobile users, often also create separate versions of sites - specifically targeted at users 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 reduced basic version - only with the functionality that, according to developers, will be necessary and useful to users of mobile devices and tablets.
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.
Google itself, although it supports the use of responsive design by webmasters, however, uses a different system in its products. If you go, for example, to the main page under different User-Agents, you can see different HTML for different devices. RESS - Responsive Design + Server Side. Implementation example, sketched "on the knee":
In fact, the method may include the advantages of both a separate mobile and adaptive version of sites, depending on the implementation. From what will be new:
In general, the RESS is the best of the three options proposed, but it requires much more labor.
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, since it requires a lot of effort to implement. In general, all 3 options have their pros and cons, and depending on the essence and focus of the site.
Currently, 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 own advantages and disadvantages, 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;} } Advantages 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 - you just need to tweak CSS and HTML ... Given the presence of frameworks like Bootstrap, such development is not very complicated with a standard implementation. In addition, the support of such a product will be a relatively simple task.
- One URL saves us from unnecessary redirects, and the user needs to memorize the address of the mobile version (even if it is just a prefix m.). Also, the presence of a single address will have a positive impact on the promotion of the site, since it will be “more convenient” for search engines to work.
Disadvantages of responsive design
- Different tasks - typical tasks of “mobile” users of large sites usually differ from the tasks of PC users. If you are a bank customer, 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 website, to implement in the layout for telephones the needs of all groups of the target audience. But then you can forget about usability. The necessary sections of the five percent of visitors will create inconveniences for the majority of customers. - Slow loading - the “weight” of sites remains a serious obstacle for mobile phone users. This means that some active elements that are typical for desktop sites, including embedded maps, rollers, credit calculators, and animated menus on mobile sites, should be replaced with lighter alternatives. Can responsive design give us this opportunity? In a popular implementation, a user with a small screen should load the entire page to see only a part of it. For example, if the desktop version of the layout of the main one weighs 200 Kb, and the mobile one - another 50 Kb, for viewing you will have to download 250 Kb. Of course, you can use compression of the page code, but extra requests to the server will still go.
- Despair - One of the indisputable advantages of the mobile version: if you do not like it, you can disable it, go to a regular domain. Sites with responsive design do not provide this simple but important choice. If the adapted layout is inconvenient, buggy, or if it hides an important element of navigation, write to the end: you can’t do anything to see it again. Have to run to look for a desktop or competitor site. You can think of crutches to circumvent this restriction (use cookies and connect different stylesheets). But this approach complicates development.
In general, the idea of ​​developing a mobile version in an adaptive design is quite popular, despite the above-mentioned disadvantages. In particular, this concept is fully supported by such giants as, for example, Google.
Separate mobile site version
In order to make a website convenient for mobile users, often also create separate versions of sites - specifically targeted at users 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 reduced basic version - only with the functionality that, according to developers, will be necessary and useful to users of mobile devices and tablets.
The advantages of the mobile version
- Easy to change - since the site exists, de facto, apart from the main version, it is much easier to make edits related only to the mobile version, since the mobile version most often does not provide redundant, unnecessary functionality.
- Convenience to the user - the mobile version is usually greatly simplified compared to the desktop version, so the user will not need to go far for the information he needs.
- Speed ​​- due to the same site simplification, the mobile version loads faster. This is essential for users who still go through GPRS or weak 3G.
- The choice is, most often, in the mobile version it is possible to upgrade to the main version of the site.
Disadvantages of the mobile version
- Multiple addresses - for desktop and mobile versions of different addresses. For some, this may be a plus, for others - an extremely irritating factor, when in order to conveniently view the site, you need to memorize another address. There are also problems with search engines: in order to avoid duplicate content SEO specialists need to use meta tags rel = "alternative" and rel = "canonical". In addition, when a Google mobile search user clicks the link in the results, they 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 receive an error message.
- User inconvenience - different addresses for desktop and mobile versions. For some, this may be a plus, for others - an extremely irritating factor, when in order to conveniently view the site, you need to memorize another address. There are also problems with search engines: in order to avoid duplicate content SEO specialists need to use meta tags rel = "alternative" and rel = "canonical". In addition, when a Google mobile search user clicks the link in the results, they 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 receive an error message.
- Limited - 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 may adversely 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.
RESS
Google itself, although it supports the use of responsive design by webmasters, however, uses a different system in its products. If you go, for example, to the main 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); RESS pluses
In fact, the method may include the advantages of both a separate mobile and adaptive version of sites, depending on the implementation. From what will be new:
- Traffic Minimization - Unnecessary JavaScript can be removed from HTML, which frees up the CPU, memory and cache on a mobile device. It can also be specially optimized html and css.
- It is possible to use targeting - for example, for Android devices to offer to download the application from GooglePlay, and for Apple from iTunes. For each device, you can make your layout.
Cons RESS
- Difficulty in development - a similar method will require the appropriate setting up of the server and the work of a larger number of programmers. It will also be necessary to make several different layout options.
- The mechanism for determining the devices - unfortunately, even in our time is not yet perfected. Stories about how someone's rare phone is not defined as a mobile device, float quite often.
In general, the RESS is the best of the three options proposed, but it requires much more labor.
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, since it requires a lot of effort to implement. In general, all 3 options have their pros and cons, and depending on the essence and focus of the site.
Source: https://habr.com/ru/post/239441/
All Articles