Sales Generator

Reading time: 18 minutes

We will send the material to you on:

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

In this article, you will learn:

1. What does website adaptation for mobile devices give?
2. How to check it
3. Website adaptation for Google
4. Self-adaptation of the site
5. Best & Free Wordpress Plugin
6. 6 best services for website adaptation for mobile devices online

Why is adaptation for mobile devices necessary?

They are conventionally divided into external and internal. In other words, external PFs represent, for example, a click on a link to a site from the 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 site adaptation for mobile devices will be displayed higher in the search results list.

In what follows, we will talk about internal PFs. Think for yourself, if a visitor is comfortable working with a site, finding and ordering products on it, the likelihood that he will go into the category of customers turns out to be higher.

The exact same principle works for search engines: the more guests leave the resource in the first seconds of being on it, the lower the rate of its compliance with the requirements of people. The ratio of user sessions less than 10 seconds to total site visits 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 numbers negatively affect the PF level, they indicate the loss of potential customers who could actually pay for the services or goods.

Agree, the increase in the frequency of mobile Internet use is truly impressive. Google Analytics allows you to easily find out the percentage of guests on any resource using mobile devices. To see 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, this error will cause a lot of users to leave you forever, as evidenced by research from Equation Research. Its experts found out: 46% of people no longer go to 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 developed audience, entering from a smartphone or tablet, will not be able to communicate, place orders, receive mailings, 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 the two.

Responsive design is used only to give the site a look that will be adequately displayed on the device the user needs.

Whereas the mobile version is fundamentally new version designed specifically for the needs of the site users using it from portable devices. Now let's talk in more detail about both types.

Adaptive design

This option makes it possible, with a small investment, 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 the dimensions of a specific device. As a result, these sites are easy to use, although you need to remember about 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, loading the page will take a long time, 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 the main subdomain: m.site.ru, mobile.site.ru. This feature can hardly be attributed to positive, if we talk about SEO, since in this case, many 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 should be said that the mobile version weighs less, loads faster compared to the responsive layout, since 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, let's highlight their features:

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

In other words, when choosing, it is necessary to 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 adaptation of the site for mobile devices give you?

, due to the absence of "heavy" photos, flash, additional design elements.

Intuitive, user-friendly navigation. Used on mobile devices resources are characterized by vertical scrolling, convenient search module, navigation menu Home, "Up", "Back". In addition, the call function is used, or a contact phone number is displayed in front of the user in the header of the site.

Convenient menus, forms... It is important that a person can easily activate the link by clicking on other elements of the site with his finger.

Readable content. It is important for the guest of the resource not to experience any difficulties if he wishes to familiarize himself with the text.

The ability to go to full version site... The portal cannot automatically direct visitors to the home page mobile version when they try to see the full version from the screen of the gadget.

Functionality, the possibility of conversion actions. It is not permissible for the user to experience difficulties when ordering, subscribing to a newsletter, downloading documents when using a mobile device.

Submit your application

How to check site adaptation 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 done as follows:

• Quirktools.

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

• IPadpeek.

Allows you to check the appearance of the site on 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, a free tool will come in handy. Developers.Google:

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

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

Things you can do to customize your site for mobile devices yourself

Set correct attributes for form fields

If your site uses input fields for username / url, discard 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 " Erevan».

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

Use the email field if your site asks the user for an email so that they don't enter the @ symbol from the keyboard of a mobile device:

Your email:

Set a suitable width for mobile devices

To do this, open the site in your computer browser, 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 to 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 has been left on the right edge:

And here the width is correct:

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

Set the width of the pictures to 100%

Remember that some of the images will end up being overly wide after you resize your site to the width you choose. Previously, I did not have to face such a problem, since desktop monitors have a fairly wide resolution, many pictures fit in width:

You can avoid this problem by setting the maximum width to 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 enter the code below into your site's CSS:

img (max-width: 100%)

If you set an image as a background image other than using the img tag, you just need to set the background-size CSS property to contain. This is how the background size will change if the screen resolution is insufficient for transmission 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 point is that when a site visitor uses zoom, the browser sharpens the picture. However, it is worth making sure that your portal does not have the user-scalable = no property in the meta tag, since it does not allow you to use zoom:

Set the width of the input fields to 100%

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

input, textarea (max-width: 100%)

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

Be careful when using Disable on form submit confirmation buttons

If submit is no longer active after the first click on the button, multiple clicks on the submit button will not occur.

But keep in mind that when compared to desktop PCs, mobile devices often experience interruptions to their Internet connection.

Therefore, when you make a button inactive, you deprive the user of the opportunity to press it again, and the problem may be hidden not only in the loss of the Network. So, the browser of such a device will close when incoming call, and the problem of the blocked button will pop up, because it will not allow the form to be submitted after it has been filled out.

If you nevertheless decide to deactivate the submit button, do it for a few seconds while adapting the site for mobile devices.

On long lines, use word-wrap

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

Will deal with this word-wrap, with which the line will wrap, reaching the edge of the screen. So the visitor of the site will be able to see all the information at once without scrolling:

Here you 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, this will make it easier for a person to remember them for further input in another application.

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

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

Yourthe code: 435143a1b5fc8bb

As you can see, there are gaps between the characters, but you don't have to struggle with them when copying. And this saves time!

Benefits of media queries

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

Avoid fixed positioning

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

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

When adapting a site for mobile devices, the easiest way is to abandon 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, these files are large in size, which means it will take a long time to download them on a mobile device. And what will the guest of the portal see? Empty space:

By adapting the site for mobile devices with the Google Font Loader, while the custom version is loading, the text in the standard font will be displayed. Next, you re-generate the page, and the guest sees the initially selected font.

But you have to write two variants of 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 being loaded, and then he will have the opportunity to see the design. Use the following code:

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

Offer users readable content

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

Therefore, they will appear on your site when the title attracts them. Next, it is important for them to find 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" - a snack). So, the content for such users should be snackable, that is, convenient for quick reading, fluent viewing on the move.

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

1. Start with a short, succinct, engaging headline. We advise you to write it within 10 words, and use a large print.
2. Break text into blocks, each of them should start with a short, informative subheading that stands out from the general background.
3. Insert numbered / bulleted lists into the text, to make it convenient for your mobile users to quickly find what they need.
4. Apply visual inserts additionally structuring information and simplifying perception.

Adapt emails to read from the small screen

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

• MailChimp.
• AWeber.
• 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 fingers syndrome”. It cannot be found among medical terminology, it is the slang of 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? Recommendations for adapting the site for mobile devices will help you:

• Apple believes that the optimal size for buttons, navigation elements starts with 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 such 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 get to the desired section right away 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 these plugins:

• Standout Color Boxes and Buttons. With its help you will create convenient buttons of different sizes, colors, and context menu adapted for mobile users.
• Responsive Menu. This plugin will create convenient menu"hamburger".

The best free WordPress mobile WordPress plugin

JetPack

First of all, let's talk about the simplest method of adapting a site for mobile devices on WordPress itself, while having the most high level efficiency. The JetPack Toolkit can do this with as little effort as possible - 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 the "Mobile Theme".

MobilePress

It is one of the common, yet simple plugins. It 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. As statistics show, 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 writing even a line of code. In the paid version, called WPtouch Pro, you 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 customization, rendering, delivery of 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, since it does not deal with 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 for adapting the site for mobile devices is equipped with automatic recognition of ordinary mobile phones, smartphones, due to which the site is loaded in a version that is compatible with the user's device, that is, its screen resolution, diagonal, etc. are taken into account.

In total, there are seven pre-installed mobile theme options. In addition, Mobile Detector automatically resizes and resizes images in accordance with the display parameters. It also offers its own widgets, statistics collection.

Key benefits:

1. Automatic gadget recognition using a database of more than 5000 gadgets.
2. The ability to distinguish standard phones from 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 one presented before this option - 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

In this version of website adaptation for mobile devices, domain mapping, search agents are supported, allowing to identify popular mobile devices, which allows them to display content in the resolution and quality they need. Also provides customizable color schemes for a single theme.

Adaptation of site tables for mobile devices

It's no secret that the most difficult task 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 a responsive table.

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

Bootstrap-style responsive table layout

Frankly speaking, 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 and writing additional styles will be a waste of time. This is the way Bootstrap uses it.

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

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

Layout of a truly responsive spreadsheet

Now let's discuss a 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 calculates the width of the table, not the width of the viewport. Since we need to fix this error, it is important to slightly "modernize" the script:

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

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

In initialization, breakpoints can be set:

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 covered all the features of the plugin, but this block will be enough to create responsive tables.

Website adaptation for mobile devices online: 6 best services

1. mobiSiteGalore

This service for adapting a website for mobile devices is rightfully considered the easiest mobile website editor to manage. According to its creators, it will only take you 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 old phone models.

1. MobStac

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

To emphasize, MobStac is the only service in existence to offer a built-in mobile website monetization plan. Its disadvantage lies in the fact that the service is still in the beta stage, but you can receive 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 using 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 only have to pay monthly 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 for 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, Blackberry, Android devices.

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 thousand models of mobile devices, including brands that are popular today.

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

1. Mobify

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

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

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 => Articles by Dmitry Svistunov Dmitry Svistunov [~ SEARCHABLE_CONTENT] => Articles by Dmitry Svistunov 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] =>)

A site that is correctly displayed on any device by dynamically adjusting to different window sizes in the browser is called a responsive site.

The task of adaptability is the universal display of the site on devices of all types and formats, without creating separate versions of the site for each gadget.

According to the StatCounter study, in 2016, 51.3% of users went online every day using mobile gadgets: there were twice as many exits from smartphones than from tablets. MobilizeToday.ru statistics showed that 46% of users did not re-enter the resource with intuitive navigation, 23% of users, as a rule, left such a site in the first minute, and only 31% continued to work with it.

This data demonstrates that gadgets and Mobile Internet have become an integral part of the user's leisure and work. If you have your own web resource with analytics, you could make sure that the traffic from any mobile device on average makes up 45% of the total traffic.

One of the options to make the work with your resource more efficient is to provide for the launch of its adaptive version. The meaning of responsive design is the correct display of the resource for all mobile users. For the first time the term "responsive website design" was used in 2010 in an article by developer Ethan Marcotte, and after a few years, adaptive layout was introduced into the websites of a number of innovative companies.

How is the price for creating an adaptive formed?

1. The adaptive version provides 3 key ways of placing elements: smartphone, tablet and desktop. They also think over the rules for changing the site for other formats of gadgets, landscape and portrait orientation.
2. The cost of adaptability revision depends on the available design and layout level of the resource. There are types of design that are easy to adapt for mobile devices, but it happens that for the adaptive it is necessary to create an almost new site.
3. There is no exact cost for the adaptive. On the page of our company, the price of creating an adaptive version with a basic list of works is indicated.

Responsive website and mobile version: main differences

1. Mobile site requires launch individual applications for each type operating system... Therefore, the price of developing a mobile version is higher than an adaptive one.
2. To use the app, you need to download it. Adaptive layout does not require any additional effort from the user.
3. divides traffic into: site traffic plus application traffic, which reduces site traffic rates. Adaptive aims to keep the entire traffic volume.
4. The mobile version implies the need to synchronize the content of the main site with the content of the application. And this requires more time and technical resources.
5. Mobile design- minimization of graphic elements to increase the loading speed (it is higher compared to the adaptive version).

The creation of a responsive site allows you to make the resource flexible for the user and eliminates the need to customize the site for each individual gadget. The adaptability of the site makes it possible to automatically fit it to the size of the browser, that is, to make it universal. Surfing the web from any device, be it a smartphone, tablet or TV, becomes almost identical.

The benefits of creating a responsive website don't end there. Let's list the main ones.

• Cost effective - website adaptation will cost less than creating a mobile application.
• Practicality - the development of responsive sites assumes that all pages of the site will be accessible from one URL. And this, in turn, will save you from problems in the matter of SEO promotion.
• Integrity - creating a responsive website means maintaining its structure and recognizable design for a user of any device.
• Profitability - Internet users are becoming more and more every year, which means that the traffic to the resource will increase in the future, increasing the income from the business.
• Loyalty - a modern user, choosing sites in one direction, will stop at a more convenient option, that is, with the option of adapting to his gadget.
• Ranking - creating a responsive website means increasing its chances of getting into the top of search results. By the way, Google systems have been giving preference to resources with adaptations since 2015. To increase the ranking of a web project, you can order adaptability revision.

How to make and improve responsiveness - 5 basic steps

1. Adjusts the screen resolution. Layout a site for each device is quite problematic and time-consuming. This is where the adaptive revision of the site can come to the rescue, namely, the flexible layout. For more details on this information, see Zoe Mickley Gillenwater's Flexible Web Design: Creating Liquid Layouts with CSS.
2. Flexibility of images—- one way to make your site responsive. Responsive layout involves the use of attributes and other CSS features to resize images.
3. Responsive pictures. To do this, you can use the Filament Group technique, with which images are compressed for.

1. Optional content display a, or compression and relocation of elements. The function makes them compact for placement on small screens, simplifies navigation, replaces lists with columns for better content presentation.
2. Customizable page layout- the ability to make a responsive site by changing the arrangement of page elements, implemented using system file with styles.
3. Implementing media queries, or @media. Allows, given a smaller screen size than the specified one, to apply a nested CSS rule.

Features of the development of adaptive design in the KOLORO company

Agency KOLORO offers services for creating a responsive website for mobile, as well as finalizing the website to improve its adaptability.

The programmers, together with the company's marketers, will design an adaptive website that will save money at the stage of project development and increase the conversion of your resource.

In KOLORO, you can not only order the creation of a turnkey adaptive website, but also modify the existing resource, taking into account your wishes and edits.

Still have questions? Tell us about your project and get a free consultation now!

How is your page displayed on mobile?

Go to the page editor and click "Responsiveness settings" in the top panel. In this window, turn on and off the display of the page for the selected devices.
We switch the adaptive modes and see how the page will look in the editor and in the preview mode.

In the editor:

In the preview:

How do I customize the responsiveness of an individual widget?

The responsiveness of some widgets can be adjusted separately. Customize the display of the Columns, Picture, Button and Text widgets on mobile devices.

Columns widget

In the section settings, enable and disable the display of vertical columns for mobile phones. On other devices, the speakers will be horizontal by default.

Picture widget

We set a special image size for mobile. To do this, go to the widget settings and enable "Custom size for phones".

Button widget

Having indicated the "Special position for phones", we change the alignment of the button on the phone: left, center, right, or stretch in width.

Text widget

The text is automatically stretched within its widget. By default, alignment on mobiles is set to center - this setting can be turned off and on.
You can also set the font size for different types of devices.
And set indents.

How do I hide a widget or section?

You can hide widgets and sections that should not be displayed on certain devices.

Important: if the function "hide widget" is active, it must be included in the responsiveness for mobile. Otherwise, the closest responsive version will be displayed.

If you hide the mobile section and forget to enable responsiveness, then when you enter the page, the tablet version will be displayed.

Hide the widget

Hide the Picture widget and Text widget for wide screens. Widgets will be shown only on mobile devices, tablets and laptops, for widescreen devices, widgets will be hidden even in the editor.

Hide the section

For example, hide the first section for wide screens.

Mobile Menu

We use the “Mobile Menu” widget for convenient navigation on mobile devices. On wide screens, the menu will appear as normal.

How to set your menu to mobile?

Let's add a mobile menu to the section, remove the built-in menu from it and move our menu to the "Mobile Menu" widget. It remains to customize the display of the menu on the mobile version and the position of the buttons. Instead of an inscription, we have placed a logo.

Possible errors: parallax - a change in the apparent position of an object relative to a distant background, depending on the position of the observer, not intended for mobile devices.

The contact page is very important, so special attention should be paid to its design. The more convenient the contact page is, the more opportunities open up for the site owner. A contact page, if properly designed, may well have an impact on conversion rates: if a user can easily contact a site manager or administrator, they will have a positive user experience. The easier the process is, the fewer fields or forms the user needs to fill out, the better for conversion.

A good contact page can improve your site as it creates the conditions for a good relationship between your visitors and the site owner. It doesn't matter what kind of site it is, whether it be an online store, a news portal or a web service - feedback is extremely important.

Despite this, many designers underestimate the value of a well-designed contact page, focusing on the design of the main content pages.

It so happens that the user needs to quickly contact the owner of the site or contact customer support. However, nothing works, even if you use the site search. Sometimes the necessary information is present on the site, but it is "hidden", since the designer did not take care of the correct navigation and the user simply does not see the desired link. The desperate user is already ready to make a phone call, but he cannot find it either.

Companies and web services that put a lot of emphasis on the design of their contact pages are acting with extreme caution. Simply because this page doesn't just contain contact information: it contains the information the user needs and is interactive. And most importantly, a good contact page encourages the user to interact with the site over and over again.

The contact page is a kind of platform for communication. If the site owner allows customers to express their opinion, then this is already an invitation to dialogue. Web developers and users can benefit from this collaboration and it is for this reason that it needs to be properly designed.

As you know, functionality in design is one of the key factors. The contact page contains important information, but there is not too much of it, which can sometimes lead to an erroneous assessment of functionality. The site owner thinks that if he placed the address on the page Email and a phone, then that's enough. Sometimes he is right.

However, double checking for functionality can do more good than harm. Broken links or pages that are overloaded with information all hinder interaction. The site owner may not receive an important message, but the worst will happen if he provides outdated or inaccurate information. When designing a contact page, first of all, you need to think about users, because in the end this page is created especially for them.

Location

It is imperative to make sure that the contact page is always available to users. Appearance site, even with an exclusive design, does not mean anything if users cannot find a page with contacts. Sometimes you have to design rather complex contact forms, so you need to take care of the instructions in advance. It will be easier for users to contact the site owner if they have a step-by-step guide.

It is important for a website designer to keep two points in mind:

• Primary navigation should always include a contact page
• Users should find the contact page from the first visit to the site, whichever of the internal pages they come to

Based on the experience gained by designers, users tend to look for contact information on the right side of the page, so it makes sense to place the "Contact" link there. It should be remembered that this information is of secondary importance to the user, so do not make this section of the site too visible or intrusive. The link to the contact page located in the upper right corner of the page works best. Worst of all is the link in the drop-down menu, as users may simply not notice it.

Simple contact forms

For commercial sites, the contact page is very important, as mentioned above. Despite the fact that it may not be as beautiful as other pages on the site, it should be simple, user-friendly and understandable. If information is not structured correctly, functions poorly, or is misleading, then it is unlikely that the site owner will be able to build long-term relationships with their customers.

It often happens that a user who wants to leave a message leaves the site because he cannot fill out the contact form. Or doesn't want to, if it's too long or complicated. Users today don't want to waste time filling out detailed forms, so it might be worth considering simplifying them. The simpler the form, the better, including for the user experience, therefore, you need to focus on collecting basic information.

Exact wording

If we talk about official sites, then on all pages, including not the contact page, you need to adhere to clear and precise formulations about the benefits that the user will receive by becoming a client of the company. What is it for? Cleared of all unnecessary information is the most effective way to attract and retain attention. Nicely summarized data should be concise so that people can easily find what they need.

Also, do not forget about the visual components. And it's not just about eye-catching contact form designs. If the company has a physical address, then you can help users by placing a map on the contact page. For companies located in big cities, it is very important to explain to users how it will be more convenient for them to get to their office, store or warehouse.

Responsiveness of contact pages

For any internet business, responsiveness is everything. This is a hard and fast rule, with no exceptions. Since the Internet is developing at a rapid pace, and more and more new devices appear on the market, this means that contact information must be available regardless of which browser or device a person uses. It is very easy to lose in the competition today - it is enough not to optimize the contact page for display on mobile devices.

Integral components

Which is better: an email address or a contact form? Users need simple ways communication with the providers of the services they need, so you need to meet them halfway. You can focus on communicating by email or posting a contact form - each method has its pros and cons.

Contact Forms

• Contact form should not force users to navigate to another page
• Contact form is not meant to be created account or login via email
• The form should have an autocomplete function, if possible
• The contact form must have functionality for sending messages and notifications

Email

• Email communication must be user-safe
• It is advisable to save all sent data for future use.
• Work with received messages should be carried out systematically, you also need to take care of backup data

Validation form

Check forms are essential when you need to know more about your site's users. In addition, the validation process in some way directs the user in the right direction, as it can draw their attention to erroneously entered data or empty fields. Thus, the verification form saves customers time, since at the end of the filling process the person will be firmly convinced that his message will go to the correct address.

Phone numbers

Many companies do not list on the contact page phone numbers because they fear that constant calls will interfere with the workflow. However, as in the case of the card, the phone numbers on the contact page increase the user's confidence in the brand, customers feel safe, believing that in a difficult situation they will be able to contact a company employee and discuss the problem that has arisen. The phone number shortens the distance between the site owner and the user, this applies to both traditional companies and online services that do not have a physical address.

Social media profiles

Social media buttons are increasingly common on contact pages. This approach can significantly enhance the site's capabilities, especially if customer support is provided 24/7. Many people find it more convenient to get in touch with the company through social network so it's worth considering this way of interacting with the user.

Designing a contact page

Really good contact pages testify to the high skill of the designers who designed them. And the most important part of the design is the visual style of the contact page. In the case of contact forms, this means large fields that make it easier to submit data. If the form looks nice, it works better.

Before embarking on the design, the designer should conduct a detailed study of all contact information provided by the client. All elements must be well organized and harmoniously combined. It should also be remembered that the contact page must match the site's color scheme so that the user can uniquely identify both the site and the brand.

Conclusion

The contact page should always be visible. This applies not only home page, but also all other pages of the site. When designing a contact page, keep in mind that users will be able to contact the site owner or support team only in the way that they see on the "Contacts" tab. Convenience and simplicity are the keys to success in this case. You need to give users what they want. If the user has to enter his personal data on the site, then it is best to ask the basic questions: name, surname, e-mail address. The contact form should not contain extra fields. You also need to take care of the responsiveness of the contact page - they should be displayed in any browser and on any device. If the contact page is designed correctly, the chances of the site for success among users are significantly increased.