Mobile version of the site or responsive design?
With the beginning of the era of the mobile devices boom, developers were faced with the choice: should mobile versions of their sites be left along with “full-fledged” ones, or should sites become adaptive and independently adapt 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 pros and cons, 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 responsive design is quite popular, despite the above disadvantages. In particular, such a concept is fully supported by such giants as, for example, Google.
To make the site convenient for mobile users, they often also create separate versions of sites - specifically targeted 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 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 adaptive design by webmasters, 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. An example implementation, 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, RESS is the best of the three proposed options, but it requires much more work in development.
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, as it requires a lot of effort to implement. In general, all 3 options have their pros and cons, depending on the nature and orientation 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 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;}
}
Responsive Design Benefits
- 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 don’t need to write everything from scratch - you just need to tweak the CSS and HTML ... Given the existence of frameworks like Bootstrap, such development is not very difficult with standard implementation. In addition, supporting such a product will 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, as 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 client of a bank, 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 typesetting, the most common approach is to make a copy of a regular site, to realize the needs of all groups of the target audience in the typesetting for phones. But then you can forget about usability. Minor sections needed by five percent of visitors will create inconvenience for the bulk of customers. - Slow loading - the “weight” of sites remains a serious obstacle for mobile phone users. This means that some active elements typical for desktop sites, including embedded cards, videos, credit calculators and menus with animations 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 part of it. For example, if the desktop version of the main layout is 200 Kb, and the mobile version is another 50 Kb, you will need to download 250 Kb to view it. Of course, you can use page code compression, but extra requests to the server will still go.
- Hopelessness - One of the indisputable advantages of the mobile version: if you do not like it, you can turn it off, go to a regular domain. Responsive design sites 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 lost: you can’t do anything to see it again. You’ll have to run looking for a desktop or competitor’s site. You can come up with crutches to circumvent this limitation (use cookies and connect different stylesheets). But this approach complicates the development.
In general, the idea of developing a mobile version in responsive design is quite popular, despite the above disadvantages. In particular, such a 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 - specifically targeted 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 to users of mobile devices and tablets.
The advantages of the mobile version
- Ease of change - since the site exists, de facto, separately from the main version, it’s much easier to make changes related only to the mobile version, since the mobile version most often does not provide redundant, unnecessary functionality.
- User convenience - the mobile version is usually greatly simplified compared to the desktop version, so the user will not have to go far to get the information he needs.
- Speed - due to the same simplification of the site, the mobile version loads faster. This is essential for users who still go through GPRS or weak 3G.
- Choice - most often, in the mobile version there is an opportunity to switch to the main version of the site.
Disadvantages of the mobile version
- Multiple addresses - for the desktop and mobile versions, different addresses. For some, this may turn out to be a plus, for others, it is an extremely irritating 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, SEO specialists need to use the rel = "alternative" and rel = "canonical" meta tags. In addition, when a Google mobile search user clicks on the link in the results, he will be taken to the desktop version or redirected to the mobile one. But if the mobile version of this page does not exist, it will receive an error message.
- Inconvenience for the user - for the desktop and mobile versions, different addresses. For some, this may turn out to be a plus, for others, it is an extremely irritating 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, SEO specialists need to use the rel = "alternative" and rel = "canonical" meta tags. In addition, when a Google mobile search user clicks on the link in the results, he will be taken to the desktop version or redirected to the mobile one. But if the mobile version of this page does not exist, it will receive an error message.
- Limited - the creation of a separate mobile site means getting rid of part of the content and functionality. In addition, you may have two different sets of content that can adversely affect the overall 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 adaptive design by webmasters, 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. An example implementation, 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 Pros
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:
- Minimize Traffic - Unnecessary JavaScript can be removed from HTML, which frees up 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 offer to download the application from GooglePlay, and for Apple - from iTunes. For each device, you can make your own layout.
Cons RESS
- Difficulty in development - a similar method will require appropriate server configuration and the work of more programmers. It will also be necessary to do several different layout options.
- The mechanism for determining devices - unfortunately, even in our time has not yet been perfected. Stories with 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, but it requires much more work in 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, as it requires a lot of effort to implement. In general, all 3 options have their pros and cons, depending on the nature and orientation of the site.