Design

Spring

The Russian language is very rich in words related to the seasons and natural phenomena associated with them.

Continue Reading

...

4. Side column

To the side column

5. Footer

In the footer of the page we will place information about copyright, social network buttons and a link to email:

6. General CSS Styles

General styles, reset browser default styles:

*, *:after, *:before ( box-sizing: border-box; padding: 0; margin: 0; transition: .5s ease-in-out; /* add smooth transitions to all page elements*/ ) ul ( list-style: none; ) a ( text-decoration: none; outline: none; ) img ( display: block; width: 100%; ) h1, h2, h3, h4, h5, h6 ( font-family: "Playfair Display"; font-weight: normal; letter-spacing: 1px; ) body ( font-family: "Open Sans", arial, sans-serif; font-size: 14px; line-height: 1; color: #373737; background: #f7f7f7; ) /* add a flow clearer for all containers that have child elements inside them */ header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after ( content: ""; display: table; clear: both; ) /* style class that controls the width of the grid container */ .container ( margin: 0 auto; width: 100%; max-width: 960px; padding: 0 15px ; )

7. Styles for the header and its content

8. Styles for the block with the main content

9. Sidebar Styles

10. Styling the Footer

The site footer is divided into three equal columns:

Footer ( padding: 30px 0; background: #3C3D41; color: white; ) .footer-col ( width: 33.3333333333%; float: left; ).footer-col a ( color: white; ) .footer-col:last- child ( text-align: right; ) .social-bar-wrap ( text-align: center; ) .social-bar-wrap a ( padding: 0 7px; font-size: 18px; )

11. Media Queries

12. Script for mobile menu

The jQuery code that we previously added to the page markup before the closing tag is responsible for showing/hiding the top menu when the button is clicked (the menu height is switched from zero to equal to its content). :

Reading time: 18 minutes

We will send the material to you:

If your site has not been adapted for mobile devices, there is nothing to worry about, however, Yandex ranks those sites that do have such adaptation higher in the search.

From this article you will learn:

1. What is the adaptation of the site for mobile devices
2. How to check it
3. Site adaptation for Google
4. Self-adaptation of the site
5. Best and free plugin for wordpress
6. 6 best services for website adaptation for mobile devices online

Why mobile adaptation is necessary

They are conditionally divided into external and internal. In other words, external PFs are, for example, a click on a link to a site from the results search results, while the number of pages viewed, the total time spent on the site, are internal.

Note that Google uses a similar system. But this search engine went even further, stating that resources that have passed the adaptation of the site for mobile devices will appear higher in the search results.

Next, we will talk about internal PFs. Think for yourself, if it is convenient for a visitor to work with the site, find and order products on it, the probability that he will move to the category of customers is higher.

The same principle works for search engines: the more guests leave the resource in the first seconds of being on it, the lower the indicator of its compliance with the requirements of people. The ratio of user sessions that are less than 10 seconds to the total number of visits to the site is called the bounce rate.

As an example, let's take this indicator of one of the Russian sites:

Look, if the site has not been adapted for mobile devices, that is, the site is displayed incorrectly on them, then the bounce rate from smartphones and tablets is 2-2.5 times higher than from a PC.

Not only do these figures negatively affect the level of PF, they indicate the loss of potential customers who could actually pay for services or goods.

Agree, an increase in the frequency of application mobile internet truly impressive. Easily find out the percentage of guests on any resource using mobile devices, will allow Google Analytics. To view this indicator, you need to take the following steps:

It's no secret that search engines always care about the convenience of users of tablets and other devices, which means that you risk being left without traffic if you refuse to adapt the site for mobile devices.

Remember, because of this mistake, a lot of users will leave you forever, as evidenced by a study by Equation Research. Its experts found out that 46% of people no longer visit the site where they were not satisfied with the level of work with mobile gadgets.

As you understand, as a result, sad consequences await you: the level of productivity of the resource itself will continuously decrease, since the already accumulated audience, accessing from a smartphone or tablet, will not be able to communicate, place orders, receive newsletters, etc.

If you are not satisfied with this development of events, we advise you to adapt the site for mobile devices.

Which is better - responsive design or mobile version

Let's first understand the difference between these two concepts.

Responsive design is used only to give the site such an appearance that will be adequately displayed from the device required by the user.

Whereas the mobile version is fundamentally new version, designed specifically to meet the needs of users of the site using it with portable devices. Now let's talk more about both types.

Adaptive design

This option makes it possible, by investing a small amount of money, to make the site friendly to the guest using it from the gadget.

In fact, when adapting a site for mobile devices, there is a simple combination of page sizes, site elements with sizes specific device. As a result, such sites are easy to use, although you need to be aware of their shortcomings.

First of all, it is the size of the loaded page. Although it will be displayed on a mobile device, its weight will remain the same. Because of this, the page will take a long time to load, because the speed of the mobile Internet is lower than that of the wired one, and the user will get tired of waiting and close the tab.

mobile version

The mobile version is usually located on a subdomain of the main one: m.site.ru, mobile.site.ru. This feature is difficult to attribute to positive, if we talk from the standpoint of SEO, since in this case a lot of conditional redirects from the main version to the mobile version are used. After all, site.ru/page and m.site.ru/page from the point of view of search engines remain different pages.

It is worth saying that the mobile version weighs less, loads faster compared to the adaptive layout, as unnecessary functions are removed here, and the individual design makes interaction with the site easier.

Of course, this version will cost more than the previous one. To make it easier for you to choose which of the options to give preference to, we highlight their features:

• It makes no sense to adapt a small site for mobile devices, if, for example, we are talking about a site for a beauty salon, normal adaptation is enough for it.
• A mobile version will need a powerful site with a lot of loadable pages. This option will be relevant for online media with an audience of several thousand people per day.

In other words, the choice must take into account the possibilities and needs. We also emphasize that both of these options, regardless of the price, turn out to be much more profitable for conversion than their complete absence.

What will the adaptation of the site for mobile devices give you?

Submit your application

How to check website responsiveness for mobile devices

Checking the adaptation of the site for mobile devices, which consists in the fact that you will see it on different devices, can be carried out as follows:

• Quirktools.

Here you can see how the site will look on the screens of different gadgets. To start using the portal, simply enter the URL of the portal in the address bar, select the required device in the horizontal menu.

• ipadpeek.

Allows you to check the appearance of the site on the iPad, iPhone.

• F12.

Always the easiest option is to use the standard trick: press F12, then click on the phone icon.

Website adaptation for mobile devices for Google

If you want to adapt your site for mobile devices on Google, you will need a free tool developers.Google:

Here you need to enter the address of the resource and click the "Analyze" button. In our example, the mobile usability score is 49% out of 100%.

It also provides advice on what needs to be changed to adapt the site to a mobile device, links that are useful in this matter. Thanks to these recommendations, you can easily score 90%, which is the minimum for Google.

Things you can do to make your site mobile friendly

Set the correct form field attributes

If your site uses input fields for username/address, deselect autocorrect, enable autocapitalize:

Your name:

Thanks to this technique, when adapting a site for mobile devices, you will prevent the T9 automated input system from replacing names, for example, " Erwan" on the " Yerevan».

By setting the automatic use of the first capital letters in the words types, you will save the guests of the resource from having to constantly include the capitalization of letters, in other words, a capital letter will be placed at the beginning of each word (for example, " Ken burns" will turn into Ken Burns"):

Use the email field if your site prompts the user for an email so they don't have to type the @ symbol on a mobile device keyboard:

Your email:

Set a suitable width for mobile devices

To do this, open the site in the browser of your computer, reduce the width of the program window until the text is no longer readable. This will give you the minimum allowed width. Set this current value to the @viewport property by setting the meta tag in the head of the page:

If you re-enter the site from a mobile device, the width you specified will be selected automatically, that is, the guest of the resource will not be forced to use the zoom.

In the illustration below, extra space is left on the right edge:

And here the width value is chosen correctly:

Your task becomes much easier if the site is built on the fluid layout and is compatible with all screen sizes. We advise you to experiment with the width while adapting the site for mobile devices, so you allow your resource to look nice and remain readable. Selected value and set to meta tag.

Set image width to 100%

Keep in mind that some of the images will be overly wide after you adjust your site to the selected width. Previously, I didn’t have to deal with such a problem, since desktop monitors have a fairly wide resolution, many pictures fit in width:

You can avoid this problem by setting a maximum width of 100% for your images. Thanks to this, if the pictures are too large for the gadget's screen, they will automatically resize. Don't forget to include the code below in your site's CSS:

img ( max-width: 100% )

If you have set your background image to an image other than the img tag, you just need to set CSS property background-size to contain. So the background size will change if the screen resolution is not enough to render at 100% scale:

.header ( background: url(header.png) 50% no-repeat; background-size: contain )

Do not worry that the image will lose clarity - modern mobile devices will not allow this. The fact is that when a site visitor uses zoom, the browser increases the clarity of the picture. However, you should make sure that your portal does not have the user-scalable=no property in the meta tag, since it does not allow zoom:

Set input fields width to 100%

Once you've set the image width with the max-width property, do the same for the input fields. To do this, simply add to the CSS file - the file of your site:

input, textarea ( max-width:100% )

Now input fields will not go beyond the screen when using the site from a mobile device.

Be Careful When Using Disable for Form Submission Confirmation Buttons

If submit stops being active after the first click on the button, there will be no multiple clicks on the submit button of the form.

But remember that compared to desktop PCs, mobile devices often lose their connection to the Internet.

So when you make a button inactive, you prevent the user from clicking it again, and the problem may not just be a loss of network. Yes, browser similar device will close at incoming call, and the problem of a blocked button will pop up, because it will not allow you to submit the form after filling it out.

If you do decide to deactivate the submit button, do so for a few seconds when adapting the site for mobile devices.

For long lines, use word-wrap

Sometimes you need to use long lines: this includes code examples, links, bank account numbers. If the portal is not wide enough for the entire line, it may end up outside the gadget screen:

Handle this word-wrap, with which the line will wrap when it reaches the edge of the screen. So the site guest will be able to see all the information at once without resorting to scrolling:

Here you will need a password:

435143a1b5fc8bb70a3aa9b10f6673a8

Be careful with spaces

We are all used to the fact that every five characters are separated by spaces if they make up a long string. After all, it will be easier for a person to remember them for further input in another application.

But we note that it is unlikely that a smart user will agree to enter characters on his own - he knows about the clipboard. True, the spaces placed by you, he will have to delete manually. Consider whether it is convenient to clean them on a mobile or tablet?

To make life easier for users, when adapting the site for mobile devices, replace spaces with indents:

Yourthe code: 435143a1b5fc8bb

As you can see, gaps remain between the characters, but they do not need to be dealt with when copying. And it saves time!

Benefits of media queries

You can create custom styles for a site when displayed on mobile devices (or in a small browser window), while on a desktop PC the familiar look of a web page remains. This requires target styles in media queries, here is an example:

Avoid fixed positioning

If the header or sidebar is positioned fixedly and the position CSS property is set to fixed, we advise you to be careful.

In this case, when creating the markup, the size of your title will grow in proportion to the page, that is, it may even take up the entire screen:

The easiest way to adapt the site for mobile devices is to refuse fixed positions when displayed on mobile gadgets.

An example shows how this works in practice:

Use standard fonts

Thanks to custom fonts, the site looks expensive and professional. But at the same time, guests have to upload files with fonts - this operation is performed before the user can see the site.

Typically, such files are characterized by a large volume, that is, on a mobile device, they will take a long time to download. And what will the guest of the portal see? Empty space:

By adapting the site for mobile devices with Google Font Loader, while the custom version is loading, text with a standard font will be displayed. Next, you regenerate the page, and the guest sees the font that was originally selected.

But you will have to write two versions of the CSS rules: one for the default font, and one for the downloaded one.

Believe me, such a solution will be optimal: a person will read everything he needs while the fonts are downloading, and then he will be able to see the design. Use the following code:

We emphasize: the .wf-opensans-n4-active class selector is added dynamically to the site code by the Font Loader, but only when the font is loaded.

Offer users readable content

Typically, mobile device users use the Internet for a specific purpose. For example, if you want to compare the cost of goods in different stores, find salon contacts, instructions for using the medication.

Therefore, they will appear on your site when they are attracted by the title. Next, it is important for them to discover content prepared for reading from a small screen.

To describe this rule in English there is a rather capacious word "snackable" (from the English "snack" - snack). So, the content for such users should be precisely snackable, that is, convenient for quick reading, skimming on the move.

Let's outline the main features that you need to consider when adapting a site for mobile devices for screen readers:

1. Start with a short, concise, eye-catching headline. We advise you to compose it within 10 words, and use a large font.
2. Break text into blocks, each of them must begin with a short, informative subtitle that stands out from the general background.
3. Insert numbered / bulleted lists, to make it convenient for your mobile users to quickly find what they need.
4. Apply visual inserts additionally structuring information and simplifying perception.

Tailor emails for small screen reading

The following mailing tools will help you to adapt email to reading from the screens of mobile devices:

• MailChimp.
• Weber.
• Constant contact.

Replace links with "tapable" buttons

As soon as users get from mobile devices to sites that are not adapted for them, they diagnose themselves with “fat finger syndrome”. It cannot be found among medical terminology; this is slang for specialists in this field, describing errors when trying to hit a specific element with a finger.

What size will be optimal for a button, a navigation element, so that a person does not have problems with them? Here are some tips on how to adapt your site to mobile devices:

• Apple believes that optimal size for buttons, navigation elements starts at a ratio of 44 by 44 pixels.
• Nokia recommends a minimum size of 48 by 48 pixels or 0.7 by 0.7 cm when creating these elements.
• Microsoft recommends 34 by 34 pixel buttons.

Remember, it will be difficult for mobile users to use the site if your text is saturated with links that are close to each other.

In the example shown by us, the menu of the full version of the site is made in the form of links. Here, it will be extremely difficult to immediately get to the desired section on a ten-inch tablet.

To get the so-called mobile-friendly buttons, navigation elements, you can choose two ways: order them with an individual design or use template tools. If you have chosen WordPress, we recommend using the following plugins:

• Standout Color Boxes and Buttons. With it, you can create convenient buttons of different sizes, colors, and context menu adapted for mobile users.
• Responsive menu. This plugin will allow you to create a convenient hamburger menu.

The best and free plugin for mobile adaptation of the site for Wordpress

jetpack

Let's talk about the most simple method adaptation of the site for mobile devices on WordPress itself, while having the most high level efficiency. The JetPack toolkit will do this task with minimal effort from you - just press one button.

And most likely, it is already installed among your base plugins. If so, click on the "JetPack" link in the site admin menu, go to the modules page. Here you only need to activate "Mobile Theme".

MobilePress

It is one of the most common yet simple plugins. Comes with two themes and is useful for further theme creation by mobile developers.

wptouch

This option is considered the next in the list of free website adaptation tools for mobile devices in terms of efficiency. According to statistics, it has been downloaded over 4.3 million times.

Its advantage is that in just a couple of minutes you can create a beautiful, fast mobile site without even writing a line of code. In the paid version, called WPtouch Pro, you will get a separate admin panel, support in the ticket system.

Wapple Architect Mobile Plugin

This plugin is written in the WAPL markup language, specially created for customizing, rendering, delivering web content on various devices and platforms.

It uses its own API for each gadget, and this option is much better than the sniffing method, as it does not touch the address structure of the desktop site. It turns out that this plugin is easy to use and a fairly simple solution.

Mobile Detector

This option of adapting the site for mobile devices is equipped with automatic recognition of conventional mobile phones, smartphones, due to which the site is loaded in a version that is compatible specifically with the user device, that is, its screen resolution, diagonal, etc.

There are seven pre-installed mobile theme options in total. In addition, Mobile Detector independently changes the size and resolution of images in accordance with the display settings. It also offers its own widgets, collection of statistics.

Key Benefits:

1. Automatic gadget recognition using a database of over 5,000 gadgets.
2. The ability to allocate standard phones among advanced devices.
3. Preparation of statistics on mobile users, which includes indicators such as the number of unique visits, search traffic, etc.

WP Mobile Edition

In fact, this is a copy of the version presented before - it has the same advantages, options, but, among other things, supports the Disqus commenting system, mobile card XML with its own generator for sites.

The latter can be useful in search engine optimization. Note that this plugin, designed to adapt the site to mobile devices, generates a mobile version on a subdomain like m.facebook.com, which achieves accelerated caching and support for mobile cookies.

WordPress Mobile Pack

This option of adapting the site for mobile devices supports domain mapping, search agents that allow you to identify popular mobile devices, which allows you to display content in the resolution and quality that they need. Customizable color schemes for a single theme are also provided.

Adaptation of site tables for mobile devices

It's no secret that the most difficult thing when adapting a site for mobile devices, namely for different resolutions, is working with tables. Moreover, this is most relevant for tables with a large amount of information.

Let's talk about two layout options for an adaptive table.

First of all, let's look at the appearance of the table:

Bootstrap responsive table layout

To be honest, it is difficult to call such a table really adaptive. It looks organic on a mobile device, and the layout of the site does not “flow”. This option is suitable if you do not have many tables on the site, so connecting the plugin, writing additional styles will be a waste of time. This is the way Bootstrap uses it.

To put this into practice, the table is wrapped in a div with a maximum width of 100%, overflow: auto.

In addition, when adapting the site for mobile devices, you can choose the maximum height, fix the table header if it is long.

Layout of a truly responsive table

Now let's discuss the situation in which your site is really full of tables - here it is worth resorting to the Footable plugin.

First of all, you need to connect the plugin (download on GitHub / connect from CDN), initialize it:

But there is one subtlety in adapting the site for mobile devices: the script considers the width of the table, and not the width of the viewport. Since we need to fix this error, it is important to “modernize” the script a little:

To do this, in the initialization, we specify the table class or just the table tag, if we want all site tables to be adaptive.

What do we mean? On tablets, the columns "RAM", "Diagonal", "PPI", "Battery" will be hidden. When used on an even smaller, phone screen, "Price" will also hide.

Breakpoints can be set in initialization:

It turns out that in the range 0-720, mobile obeys the rule, 720-1024 - tablet, and above 1024 - desktop. If necessary, you can create large quantity rules.

You also have the option to expand a specific column by default. In this case, specify the data-attribute data-expanded="true":

We have not talked about all the features of the plugin, but this block will be enough to create adaptive tables.

Website adaptation for mobile devices online: 6 best services

1. mobiSiteGalore

This service for adapting the site for mobile devices is rightfully considered the easiest mobile website editor to manage. According to its creators, it will take you only 54 minutes to develop a fully functional mobile version of the website.

Note that most of the existing services are aimed at working with smartphones, while mobiSiteGalore allows you to prepare sites for older phones.

1. MobStac

With MobStac you get a mobile website prepared with HTML5. In addition, you have the opportunity to make changes to the settings or choose a specific template to change the design, which will not be difficult.

We emphasize that MobStac is the only service in existence that offers a built-in mobile website monetization plan. Its minus lies in the fact that the service is still in beta, but you can get an invitation, and then register.

1. Mofuse

Here it will be possible to develop a mobile version of the website using two approaches: do everything yourself with the help of mofuse or adapt the site for mobile devices by ordering it from a team of specialists.

In the first case, you get more opportunities in the field of design, while you have to pay monthly only for the operation of the service. If you hire specialists, all the work will fall on their shoulders.

1. Mobile App America

This option provides an improved SEO aspect to your website. Thanks to its capabilities, you will be ahead of competitors whose portals do not even have a mobile version yet. While this text was being prepared, the application supported iPhone devices, Blackberry, Android.

1. bMobilized

It will allow you to prepare a mobile version of the website in a short time. The application is characterized by fast conversion with advanced settings, which, among other things, make it possible to change the design.

According to the developers, the bMobilized database supports over 13,000 models of mobile devices, including currently popular brands.

But if you are concerned about the cost of adapting a site for mobile devices, this service is for you, because the more websites you host through it, the more discount you get. In other words, bMobilized will be almost ideal for owners of a network of sites that need to be adapted for mobile devices.

1. Mobify

Mobify is recognized as the best service for those who are related to e-commerce. It offers HTML5 functionality to the owners, and its development team, based on your wishes, creates your mobile website.

As practice shows, it takes no more than three weeks to create a fully functioning electronic store from the idea stage. In addition, you have the opportunity to immerse yourself in its development.

If you managed to try all the methods described above, but you are still not satisfied with the result, it's time to resort to the help of professionals.

Array ( => 21 [~ID] => 21 => 09/28/2019 13:01:03 [~TIMESTAMP_X] => 09/28/2019 13:01:03 => 1 [~MODIFIED_BY] => 1 => 09/21. 2019 10:35:17 [~DATE_CREATE] => 09/21/2019 10:35:17 => 1 [~CREATED_BY] => 1 => 6 [~IBLOCK_ID] => 6 => [~IBLOCK_SECTION_ID] => => Y [~ACTIVE] => Y => Y [~GLOBAL_ACTIVE] => Y => 500 [~SORT] => 500 => Articles by Dmitry Svistunov [~NAME] => Articles by Dmitry Svistunov => 11076 [~PICTURE] = > 11076 => 7 [~LEFT_MARGIN] => 7 => 8 [~RIGHT_MARGIN] => 8 => 1 [~DEPTH_LEVEL] => 1 => Dmitry Svistunov [~DESCRIPTION] => Dmitry Svistunov => text [~DESCRIPTION_TYPE ] => text => Dmitry Svistunov's articles Dmitry Svistunov [~SEARCHABLE_CONTENT] => Dmitry Svistunov's articles Dmitry Svistunov => statyi-dmitriya-svistunova [~CODE] => statyi-dmitriya-svistunova => [~XML_ID] => => [~TMP_ID] => => [~DETAIL_PICTURE] => => [~SOCNET_GROUP_ID] => => /blog/index.php?ID=6 [~LIST_PAGE_URL] => /blog/index.php?ID=6 => /blog/list.php? SECTION_ID=21 [~SECTION_PAGE_URL] => /blog/list.php?SECTION_ID=21 => blog [~IBLOCK_TYPE_ID] => blog => blog [~IBLOCK_CODE] => blog => [~IBLOCK_EXTERNAL_ID] => => [ ~EXTERNAL_ID] =>)

Nowadays to have adaptive design this is the sacred duty of any site, especially if your site is commercial. Because the mobile audience is growing at an impressive pace. Yes, you will say that the mobile audience has been growing for a long time, for many years, but now this is a new trend and growth is almost exponential. Smartphones are ubiquitous. If you are selling something, then responsive design is vital for you.

According to statistics from Yandex reports, despite the general mobilization, users buy more from computers than smartphones, but at the same time they choose goods and services more through mobile devices. Google claims that nearly half of its users search for products on their smartphones.

According to MediaScope, the mobile audience is growing faster than others, with an increase of 15% in 2017. The total mobile audience is 66 million people, which is 54% of the total population (2017). At the same time, the number of desktop users is decreasing.

According to the Kommersant newspaper, the audience of Runet in the mobile segment grew in 2017 from 47% to 56%. Moreover, the growth occurs at the expense of the older generation, because among young people the level of Internet use has long reached its maximum limit.

The largest provider of services related to network technologies Cisco is testing 5G networks, which should appear in 2020. Cisco predicted in 2016 that by 2021 mobile traffic will increase sevenfold.

According to the research of the online store Rechi, which sells shoes and accessories, it was noticed that mobile shoppers have become more determined. Users from smartphones began to buy even when they are in line, at lunch or before bed.

What is Responsive Design?

Responsive web design has appeared since 2011, but despite this, a large proportion of sites in RuNet are still crookedly displayed on mobile devices. For example, the menu can clutter up the entire screen, or vice versa, the layout of the site goes beyond the screen and you have to use terribly uncomfortable horizontal scrolling, even flipping the screen will not help you here. Also, without the adaptive version, the text from the smartphone will be very small, it is generally impossible to read it.

Responsive Web Design is the design of the site pages, built in such a way that all elements dynamically adjust to the screen, depending on its size, in order to show only the most important elements on the screen in limited conditions. The smaller the screen, the fewer objects on it, only the most important remain. On large screens, we are used to seeing a bunch of side bars, menus, widgets and other similar things on a website, which, in fact, are used very rarely. Therefore, in the adaptive version, only the really important and functional remains. For example, for an online store, this is a header with a phone, a transformer menu and goods, the rest is superfluous, but this is enough for a purchase.

It is generally accepted that adaptive design for mobile devices needs to be designed in advance, even before the creation of the site, therefore, perhaps the valiant webmaster will be disappointed. But this is a big misconception, so it is not at all necessary to completely change the entire site template just for the sake of adaptability or completely change the entire CMS. You can adapt your current site very quickly without any major changes or complications.

Is there a difference between responsive and responsive website design?

In fact, the concepts of responsive and adaptive have a difference. Once upon a time, when smartphones did not even think about conquering the planet, layout designers and programmers started a dispute. Which optimization method for mobile devices is better: the method (RWD - responsive) or the method (AWD - adaptive). The difference between them is that the responsive method changes the size of elements as a percentage: images, videos, blocks, etc. But responsive design does not rely on the size of the browser, but focuses on the user and has three predefined layouts: for a smartphone, tablet, a laptop.

Now both options are used in adaptive layout, they complement each other. The layout (grid) of the page can be radically rebuilt at control points that correspond to the sizes of the three main types of screens: monitors, tablets, smartphones. Within breakpoints, the layout stretches to fill the empty space with elements. Thus, the website will look optimal, whatever the screen size.

Why should a website be responsive?

Search engines every year focus more and more attention on mobile adaptation of sites. There is already a separate search for mobile devices. For example, Yandex uses the Vladivostok algorithm, which takes into account the suitability of the site for mobile devices, so if your site is not adapted to mobile devices, then a visitor entering a request via a smartphone will not see your site in the search results. And if the site is still in the search results, then far at the very bottom

Without a responsive mobile version, visitors will experience difficulties on your site, which will have a bad effect on the behavioral factors of the entire site. When a visitor opens the full cumbersome version on a smartphone, they will most likely immediately close your site without even trying, and each such visitor will spoil the behavioral factors. Behavioral factors greatly affect positions in SEO, they include time spent on the site, the number of pages viewed. The introduction of the adaptive version solves all these problems, without any side effects. In some projects, site traffic can grow up to 40%.

Convenient analytics system in Google Analytics and Yandex.Metrics. The systems automatically determine the mobility of your site and generate ready-made reports with traffic statistics and conversions made through mobile devices. This is very handy for determining the mobility of your audience.

There are no disadvantages of adaptive layout. Except for one minus: the old generation does not like overly simplified and large elements, they are used to big screens and a huge number of small items on the menu.

Which is better: mobile or adaptive version?

One way to optimize for smartphones is to create a separate mobile version of the website that can only be opened from smartphones. Device type detection occurs on the server side. Recently, it has been used less and less often, because it is much more expensive than adaptive layout, more difficult to develop and maintain. The mobile version is suitable only for very complex and non-standard web services.

Unscrupulous large agencies take advantage of this by swindling customers. After all, the cost of implementing a separate mobile version is several times higher than implementing an adaptive layout, so it’s more profitable for them to dissuade you from an adaptive version.

Why is a responsive website better than a mobile version?

• In adaptive layout, changes in the code will be displayed immediately for all devices. For example, if you need to change or add new important functionality. In the case when the site has a mobile version, you will have to make changes in both versions. And so every time, which doubles the spending on programmers and layout designers.
• In an adaptive site, content is not duplicated, unlike the method when a mobile version of the site is created.
• The address on the page for desktop and smartphone in the adaptive version remains the same, so you do not have to set redirects every time.
• There is no need to generate content each time on separate pages for mobile and standard devices.
• In addition, Google said at one of the Digital October conferences in December 2016 that you need to make an adaptive version, and the mobile version is utter nonsense.

Life hack! Did you know that adapting a website for mobile can be done much cheaper than you think? Because, in fact, it does not require any great effort and the work is done in a short time without any consequences for your site. As a rule, web studios offer bold price tags: from 10,000 ₽ to 20,000 ₽, and in fact, adaptation can be ordered for only 500 ₽ remotely on the Kwork freelance exchange.

How to make a mobile version of the site?

Before implementing adaptive layout to your site, you need to plan the layout, for this you need to determine which elements to leave and which to remove. And do it separately for a smartphone and for a tablet. The place on the smartphone and tablet is limited, so we will have to sacrifice not very important blocks and leave only functional elements and only what helps the visitor.

By the way, on WordPress, most of the new premium themes support the mobile version, as well as amp pages. We have a complete guide " ", read and create responsive WordPress sites.

For example, side bars usually perform an informative function, sliders, etc. The menu is too long, and in the abundant version it turns into an endless party, so it is removed into a separate button. Same thing with the long search field. Elements should not be close to each other to avoid pressing two items at the same time.