1. Structure and conciseness

Navigation and content settings are more flexible, they are easier to adapt to the target audience.

2. We lose weight, gain speed

Since with dynamic layout it is possible to work on site content in HTML and CSS, page loading is faster. Large images and applications are either compressed or deleted. On the one hand, this will free up memory and cache, and on the other, it will make the site convenient and enjoyable for each user.

Disadvantages:

1. Increased load

Dynamic layout increases the load on the server. Therefore, for the site to work correctly, additional server resources are needed.

2. Common agent definition errors

This is a relatively young project, so shortcomings will appear. Device detection technology does not always work correctly.

Dynamic layout is not a panacea, but it can complement the standard features of the adaptive version.

So CNN website looks on PC

And so - in the dynamic layout

Another significant minus is the low download speed even with a small content weight.

We have examined all the adaptation options. Now we outline the nuances that are important to consider when creating a mobile site.

The devil is in the details. The main mistakes when creating a mobile site

• “Shove the non-shoveable” is possible.
    But to make microscopic icons that cannot be reached with your finger is a mockery of the last century.
• Long forms of capture are conversion killers.
    The user is more likely to close an endless page than to scroll it back and forth in search of the necessary information.
• Contact phone number in unreadable format.
    Instead of calling in one click, the user needs to remember / record the phone and dial it on their own.
• Harmful content.
    Using Flash, Silverlight, Applet and other non-adapted content leads to slow loading and complicates the life of the user.
• Cacophony of fonts and colors in the design of the site.
    As well as too small print and lack of indentation between the lines.
• The lack of links to the full version of the site.
    No matter how good the adapted version, the user should have a choice. After all, we live in an era of democracy ...

What to do, or how to avoid mistakes?

But Chernyshevsky did not answer this question

• Place content in a way that makes it easier for the user to perceive it.
• The image should not go beyond the horizontal frame of the screen
• Make text size an optimal user
• Link to the phone number must be active. You can replace it with a widget, but make sure that it does not slow down the download speed.
• Interactive content elements are best embedded with HTML5. Yandex also thinks so:

Heading "Experiments"

• Check the download speed of the service from Google.
• Check the mobile site at Yandex.Webmaster. This will allow you to quickly determine what needs to be improved.
• Address to experts! They know how to avoid mistakes and please the target audience.

Taste and color - all mobile versions are different

Whatever strategy you choose, it is important to consider all factors: goals, time, budget, scope, organizational structure, etc. Be sure to make sure that any user can access your page and find the necessary information.

A summary table of the main features of the mobile version

It is worth noting that there is a fundamentally different view on mobile sites.

Logically, but there is one “But”

Do not wait for a renaissance idly by, look for wizards for responsive design

The bottom line is that mobile versions are not needed at all. Any smartphone or tablet almost completely replaces a PC. Why create a mobile site for these devices? This is the opinion of Apple - they created an iPhone and an iPad, and their site is as convenient on them as on any PC. Everything seems to be logical. But do all sites open on mobile devices like the Apple site? Alas, many are not readable at all. Probably, in the future we will come to the point of completely abandoning mobile sites, but so far they are proving their effectiveness. Anyway.

Today, most people access the network through mobile gadgets - tablets, phones, and in this regard, site optimization also goes to 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 come out and start looking for another more convenient one. A checkmark that the resource is irrelevant, that is, 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 a site, how to make it, and what is the best way to apply it? More details in this article.

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

Method One - Responsive Design

Responsive templates involve changing the image of the site depending on the screen size. As a rule, they are set to standard 1600, 1500, 1280, 1100, 1024 and 980 pixels. For implementation apply Queries. Itself does not change.

The advantages of this method include:

• convenient development, since the structure itself adapts to the screen settings, and any update does not require design development from scratch, just tweak the CSS and HTML;
• one URL address - the user does not need to remember several names, there is no need for a redirect (redirecting from one address to another), which can complicate the work of the webmaster, and it’s easier for the search engine to sort and rank the resource with a single address.

Of course, adaptive templates also 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, the disadvantages are:

• Responsive design does not support the same tasks on a mobile device as on a PC. If this, for example, is a mobile version of the bank’s website, where information about the exchange rate or the nearest ATMs is more likely to be important for the user, then such a 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 your favorite site into a hateful one. This is especially true for resources where there are an abundance of animation, videos, pop-ups and other active elements. Due to the heavy weight, the page will simply “slow down”, the user will get angry and leave, and the search positions of the site will fall.
• The inability to disable the mobile version is another significant drawback. If any element is hidden by such a layout, you can’t 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 gadgets. But it is suitable, due to the above disadvantages, to small, simple resources with a minimum of information and multimedia, without complicated 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 on a mobile device easier to read. 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:

• convenient user interface;
• it’s easy to change and make changes, because 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 there is the ability to go to the main version of the page with a mobile.

But here there were some disadvantages:

• Several addresses - desktop and mobile version of the site. How to make the user remember two options? Webmasters are often prescribed from the desktop 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 are difficult to rank 2 identical resources, and this directly affects the promotion.
• A mobile version of a site from a computer, if a user mistakenly logs into it, looks ridiculous, which can also affect attendance.
• This version is often greatly reduced, desktop, so the user will get 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 is paying off and is the most common way to adapt a resource to mobile devices. It is popular among major online stores, such as Amazon.

The third way - RESS design

The Google search engine actively supports this direction of mobile design. This is the most difficult, costly, but effective method to adapt the site to your phone or tablet. It is called RESS. This is resource targeting in a mobile application, which 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 types of information, while the phone’s memory and Internet traffic are not eaten up like when visiting a site through a browser. They are easy to access, since the link will always be on hand at the screen, and there is no need to enter a complex name in the address bar of the browser.

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

All of the above methods involve, albeit not always a long and complicated, but still paid work of the webmaster. If you do not see the urgent need for such a development, a simple and free mobile version of the site will suit you. How to make it the easiest?

Download special templates (plugins) for responsive design. For example, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile and others. They will help to correctly display the site on the phone, while you will get a few tips what should be fixed to better adapt the page to the mobile version.

Of course, this method is hardly suitable for serious resources. Rather, this free feature is intended for the smallest and simplest sites, blogs, news feeds. Do not forget also that the Google search engine, like Yandex, today has serious requirements for mobile versions, so there is a huge chance to lower their 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 for 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. The most important thing is that for its effective work 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 difficult it is to perceive information that is replete with colors, buttons, banners, and which you have to scroll endlessly in search of the right material. Mobile design should be simple and clean. Choose 2-3 colors to divide the space (for example, branded). It is better if one of them is white. Divide the space of the small screen into clear and readable areas. Virtual keys should be visible so that the user clearly knows where to press and sees - here is the product, here is the form for filling in the data, here is the information on delivery and payment.

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

Alignment

The issue of alignment is no less acute, because if you do it wrong, the user will receive only the end of important words. It is generally accepted alignment to the left and vertically. Imagine how you scroll through a news feed on your phone. You do it from top to bottom, but not to the left or right side.

Union

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

And separation

Sometimes, on the contrary, you need to disconnect 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 hovers over a regional center or region, another list of cities will drop out.

Lists

By the way, regarding the lists. There are two of them - fixed in alphabetical or other order and with wildcard. 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 in the same name, and each brings the user one step closer to the goal. The autosubstitution option is more often used when a visitor needs help. For example, a knitting site offers to buy knitting needles. The user enters the search query “Metal knitting needles”, and in the prompt he sees “Knitting needles 5 mm”, “Knitting needles 4.5 mm”, etc.

Autofill

This item is especially true for sites where they sell something 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 the computer, which means that the process purchases need to be made as quick and convenient as possible.

For this form may contain already completed 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 designing the mobile version of the site, remember that all phones have different phones, and eyesight too. Perhaps your site will be viewed from a small screen, so the fonts should be simple and readable, the buttons should be large enough to be clicked on and not to go to another page, and the images should open separately, large, especially when it comes to the Internet store.

Some statistics

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

The numbers are as follows. Today, 87% of the population use gadgets, apparently, except for the smallest children and some elderly people. Economists predict a 100-fold increase in mobile commerce over the next 5 years. At the same time, only 21% of sites are adapted for working 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, as long as there is so much free space in this market, you can take your own segment in it.

Where is the mobile version needed?

Use the mobile version is appropriate 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.

Without the mobile version the following cannot exist:

• news portals, since it is precisely their majority that is viewed from the phone on the way to work or school;
• social networks - for the same reason, plus there is a factor of online communication, which means that a convenient, understandable chat should be created for this;
• reference sites, sites with navigation, etc., where people turn to when they are looking for something;
• online stores - an opportunity to attract buyers who do not spend time shopping, but buy everything through 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 should ensure that its Internet resource meets the requirements. Due to growing user requests, sites have to constantly upgrade and adapt to various devices. It is clear that if a person is inconvenient to be on a particular resource, he cannot get information about the product or price there, place an order, find out about delivery, 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 Android or Ios site will help to do this. To do this, you need to choose one of the above methods of redesign - an adaptive template, creating a new site on a subdomain and switching to it through a redirect, using free templates or creating a mobile application with which the user can more conveniently enter and stay on the page.

Good afternoon! Dear readers and guests of the blog site, the last time I told you how to restore the flash drive, which was written when formatting: The disk is write-protected. Today we’ll switch to another channel and we will analyze how you can see mobile version of the site, with one click. This information will be very relevant for people who have just created their blog or transferred it to a new template and would like to make sure or just see how it displays to the end user. To make everything beautiful and attract more mobile traffic.

How to see the mobile version of a site on a computer

In order to evaluate the display quality of your mobile version of the site, you do not need to have a bunch of mobile devices, you just need to have the right browser and know the magic button in it.

I use the Google Chrome browser for such things, firstly it is convenient and fast, and secondly, it has everything that a web designer and developer need. Open your site in the browser and press the F12 key.

In the upper corner you will see the model of the current phone that displays your resource. By clicking on it you will see an extended list in which both the latest iPhone models and Lumia on Microsoft Windows 10 will be present.

As you can see, I calmly see on my computer a mobile version of the site with iPhone 8

If you click the Edit button, you can select a larger list of mobile devices from previous generations. As you can see, everything is very simple, the main thing to remember is the F12 button. To exit the current mode, you need to press it. If you have questions, then write them in the comments, I will try to answer them.

About 20% of the traffic in Runet falls on mobile operating systems.   And this indicator continues to gain momentum. Is this a reason to think about whether to adapt your site to mobile traffic, because this is a completely different audience.

Responsive design for various screen resolutions of electronic gadgets has long become a modern standard in the development of sites. However, the percentage of such sites on the Internet is still not large. And there are even fewer sites with their mobile version. So is it worth it to create 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?

1. Using the mobile version of the site from smartphones and mobile phones is much more convenient: there is no need for horizontal scrolling, all the functionality works correctly (on some unadapted sites it’s even impossible to put the goods in the basket!).
2. 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.
3. Navigation of such sites is made adapted for the touch screen (Touch screen), which is also much more convenient.
4. The mobile version of the site is lighter, has a less voluminous code, therefore it loads faster, which reduces the user’s expenses for downloading it when paying for mobile traffic.
5. Search engines use mobile search for phones, so the mobile version of the site will be ranked higher in it, which means there will be more conversions to your site.

Types of mobile version of the site

Mobile version may be identical to the main site: repeat structure, content, design. This effect can be achieved even with special services, without resorting to the developers.

Independent mobile version of the site.   Here, the structure and functionality are already changing completely, only style correspondence is repeated, partly elements and content, 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 ease and simplicity.
• Compatibility.   The site should correctly display on the most popular screen resolutions (240x320, 480x320 and some others). On such sites it is better not to use or use a minimum of javascript, use xhtml.
• Content optimization.   This is especially true for pictures: they should be light both in size and in kilobytes.
• Usability.Good navigation is the key to a successful mobile site!

Mobile version or responsive design?

You will not find the exact answer to this question. There are various points of view that rely on the cons of both one and the second option.

The main disadvantages of adaptive design   they attribute the fact that the "weight" of the site remains large, which means that the site will still take a long time to load. In development, the responsive design is simpler than the mobile version, however, it cannot be disabled on the mobile screen, while if the user does not like the mobile version, he will always be able to switch to the standard version of the site.

Which sites need a mobile version?

Studies show 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 have already thought 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% and higher, the answer is obvious!

Figures

You have not decided yet? Then think about these statistics:

1. Mobile phones are used by 87% of the total population. Apparently only young children do not have them!
2. Mobile commerce growth is projected to increase 99 times in the next 5 years!
3. Only 21% of sites are adapted to work with mobile devices. You still have a chance to get your share of traffic!

Useful statistics are shown in the infographic below (clickable).

In the current article, we will discuss how to check the mobile version of a site, its convenience, readability and correct display.

Checking your site for the convenience of displaying on mobile devices can be checked using various web services. In particular, this service   from Google allows you to adequately assess the literacy of your mobile layout.

Recently, Google announced that sites that do not meet the requirements of mobile typesetting will be pessimized in searches carried out using mobile devices. This algorithm is already working and some sites that did not worry about displaying on mobile platforms, were indeed omitted in the search results for mobile devices.

If your site is three times convenient for desktop platforms, you need to check the quality of mobile layout, otherwise you will lose an impressive portion of traffic (the share of mobile platforms in the search is growing rapidly every year), which means losing your customers. Therefore, you need to adapt your sites to mobile devices and check the correct display of sites in mobile browsers.

Checking the quality of mobile layout using Google Chrome

For developers, Google has a great tool for simulating mobile devices. This tool is built into the Google Chrome browser. To access it you need to click F12   in the browser (go to developer mode) and click on the smartphone icon:

The page is converted to device switching mode, where you can choose one of the popular mobile devices, network type (GPRS, 2G, 3G, 4G, etc.), specify strict display settings. This allows you to simulate the site on specific mobile devices. Available devices include various versions of the iPad, iPad Mini, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Samsung Galaxy and some other popular devices.

By choosing a specific device, you can check the site on a mobile device. For example, displaying the Nubex homepage on an iPad 3:

And on the Samsung Galaxy S4:

Here you can not only see the display of the site on a particular device, but also fully work with the site, as if you have the right gadget in front of you. Undoubtedly, this tool is simply indispensable when developing a mobile version of the site, but how your site will be displayed on real devices should be checked on real devices. This is especially important if you need to check the display of the site in "native" browsers (Safari - for iPad / iPhone, IE - for Windows Phone, etc.).