Step by step: adapting the site for mobile devices

Step by step: adapting the site for mobile devices

Open your website on mobile and try to place an order or find details about the service. If everything went smoothly, congratulations – your site can to be proud use from a mobile phone. If you had to squint to read small text, or poke your finger several times, trying to hit the right button, then some improvements are needed.

Houston we have a problem

The easiest way to check the adaptation of a site for mobile devices is to open it on these very mobile devices (smartphone, tablet). Clear signs of problems:

The site or some of its parts (pictures, tables) do not fit entirely on the screen:

Everything is too small, it is impossible to hit the button or link with your finger the first time:

Too small print on mobile

You have to scroll through several header screens (or filters) to get to the content:

Directory filter takes up the entire first screen

Pop-up banners (more than 50% of the screen), or too many ads:

Pop-up banner with full-screen advertising

If your smartphone is not at hand or it is not connected to the network, you can use online services from a regular computer:

one. Mobile Friendly by Google: https://search.google.com/test/mobile-friendly

We drive in the site address, click “Check”, we see the result:

Google Mobile Optimization Checker

2. Checking mobile pages from Yandex: https://webmaster.yandex.ru/site/tools/mobile-friendly/ (if your site has already been added to Yandex.Webmaster)

We select the site address, click “Check”, we see the result:

Checking mobile pages in Yandex Webmaster

3. Browser validation in Developer Tools

We open the site in a browser and in the menu (browser) look for the item “Additional tools” – “Developer tools”. Or press F12 on the keyboard. If F12 did not work, press the key combination CTRL + Shift + I. On the right or at the bottom of the browser, the Developer Panel will open to us, on it, click on the icon for switching to mobile devices and select the smartphone model on which we want to check the site:

Checking the responsiveness of the site in the Chrome browser

Start key

So, the problem has been identified, now we need to decide how we want to see our site on mobile devices.

To develop a website layout for mobile, you can contact:

– To professional designers. Talk to them straight away for which screen sizes you need layouts (for example, 320 pixels wide for smartphones and 768 pixels wide for tablets) and for which sections of the site (for example, the home page, a typical internal page, a list of blog articles and an article blog). For more things to check when accepting a layout from a designer, read the article.

– Directly to the layout designers. Some layout designers decide for themselves where and what blocks of the site should be shifted so that the content fits on the screen of a mobile phone. Be prepared for the result that may surprise you – both pleasant and not very pleasant. Therefore, before ordering, ask to show you examples of work to make sure that this layout designer adapts the sites adequately.

– To their own visual skills. If you have an understanding of what you want to get in the end, and this final version does not require a separate design (it uses current solutions), then you can use words and arrows to write down the TOR for the layout designer in the same Word.

Go!

Let’s start adapting the site for mobile.

Step 1. Specify the Viewport tag

We need to tell the browser that the content of our site will adjust to the width of the device (regular computer, tablet or smartphone) and should be displayed at its original scale. To do this, add the viewport meta tag to the section in the site code (you can put it before the title tag):


Mr Red car service: car repair and maintenance in Krasnoyarsk

Here:
width = device-width – tells the browser that the width of its window should be equal to the width of the device,
initial-scale = 1 – the site needs to be shown in the usual scale (without enlargement or reduction).

If you do not specify the viewport tag, then the browser will by default assume the width of the content to be equal to the standard width for the desktop (1024 pixels) – and on a phone with a width of 340 pixels, your site will be reduced by 3 times. Therefore, for the responsive layout to work, be sure to prescribe the viewport with device-width.

Viewport tag for mobile

Step 2. Updating site styles

We take site layouts for mobile devices and add additional rules to the site styles for displaying blocks at different screen widths:

/ *
… standard CSS rules …
for example, we display product cards 4 in a row
* /
@media (max-width: 768px) {
/ *
… rules for tablets …
we display product cards 2 in a row
* /
}
@media (max-width: 320px) {
/ *
… rules for smartphones …
we display product cards one by one in a row
* /
}

Now the browser will look at the width of the device and apply an additional necessary block of rules to display the site.

What additional styles do most often:

– Reduce the number of blocks in one row. For example, on a regular computer, 4 blocks are displayed in a row (product cards). Obviously, on the phone screen, 4 cards simply will not fit in 1 row, so here we will show one card at a time.

Product cards on screens of different widths

– Hide some blocks (completely or under the “Expand” link). For example, a product has an impressive description that takes up almost an entire screen on a computer. On a phone, this description can take up to 10 screens. You will have to scroll through them for a long time and tediously to get to product reviews. In order not to burden the user, we will show on mobile the first paragraph of the description, and hide the rest of the text under the link “Show all”. Whoever wants to read the full description will expand it, while everyone else will be spared the long scrolling.

Hide some content on mobile

– Resize elements. Usually they reduce pictures, indents between blocks of text and too large headings. At the same time, it is worth, on the contrary, to enlarge the small text (otherwise it will be impossible to read it on the phone), the size of the buttons (so that you can hit them with your finger, and not only for children) and the indents between interactive elements (so as not to overshoot between adjacent links or checkboxes).

For mobile phones, we make buttons and fonts larger

– Add horizontal scrolling to tables. If there are many columns in the table, then it will not fit on the phone screen. In this case, it is worth adding rules so that these tables can be scrolled left and right on narrow screens.

Tables on sites across devices

Step 3. Finalizing the website design

Some elements of the site will need more elaboration to be displayed on mobile. As a rule, these are the site header, menus and filters in the product catalog.

– Site header and menu. If you just move all the lines in the site header under each other (to fit in width), then on the phone such a header will take up the entire screen. Passing through the pages of the site, a person will be forced to scroll through the screen with this header over and over again. Add 5-6 menu items here – and the user never scrolls to content.

Therefore, on mobile devices, you need to reduce the number of elements in the header (for example, remove the callback order button and the search form), and hide the menu under the hamburger icon. Then the site header will occupy a maximum of a quarter of the phone screen.

Header and menu of the site for mobile devices

– Filters. In most cases, the product catalog filter is located on the left side of the page. That is, in the site code, first there is a filter, and then a list of products. Because of this, on mobile devices, the block with the list of goods “moves” under the block with the filter – and the site user risks not understanding at all that there is a list of goods on this page (if there are many filters). The problem is solved simply – we hide the filter on mobile phones under the “Filter” button. By clicking it, the user will expand the necessary filters. And by default, the list of products will be immediately visible on the first screen.

Adaptive filter for product catalog

Step 4. Reducing the number of ads and pop-ups

If you have ad units on your site, see if you should cut them a little so as not to take up all the space on the far from endless smartphone screens. It is not necessary to remove all ads, it will be enough just to reduce their number. For example, leave one banner instead of four.

Likewise for pop-ups. If after some time after loading the site a window pops up with a subscription, special offer, etc. and at the same time takes up more than 50% of the screen – either reduce this window to a quarter of the screen, or abandon it altogether. First, on phones, such windows annoy users much more than on ordinary computers. Secondly, search engines can lower the position of sites with “annoying” ads.

Step 5. Reducing the amount of content

If the site contains content that you completely hide from mobile users (not under the buttons “More”, “Filter” and others, but completely hide), then there is no point in downloading this content to a mobile device at all – this is an additional “weight” of the page, and it will increase the website’s precious load time.

Example: in an article on Habré, opened from a regular computer, comments to the article are loaded immediately at the end of the page – https://habr.com/company/mosigra/blog/427133/. And if you open this article from a mobile, then the page will contain only the text of the article, without comments (and they are not hidden, they simply are not displayed for mobile devices). Under the text of the article there is a button “Comments”, and using it you can already get to a separate page with comments to the article. Specifically for Habr, where articles are often and very willingly commented on, this can save 3-5 seconds from page load.

To differentiate content, a programmer can either write his own module or use one of the ready-made solutions for determining the type of device (for example, MobileDetect). Many CMSs already have this functionality built in by default (for example, wp_is_mobile in WordPress).

Step 6. Checking all pages

If the site has up to 200 pages, it is better to really look at all of them. Because 20 product cards can be displayed normally, and in the description of the 21st, someone inserted a video and prescribed it strictly 900 pixels wide – and this video no longer fits on the mobile screen.

However, if you have thousands of pages, then looking at each one is not such a rewarding waste of time. Then it is worth checking only important pages (selling pages, pages with high traffic, etc.), and 10-20 pages in each section of the site (in the product catalog, in the list of articles, etc.).

Outcome

For a site to be adaptive for different devices – how for a person to follow the rules of etiquette. Of course, you can not say “hello” and “goodbye”, “please” and “thank you”, but then do not be offended if there are fewer and fewer people willing to be with you. The same is with the site – if you do not respect your users and are not ready to provide them with a convenient site on any device, do not be offended if they quietly and calmly leave to competitors.

If you have the desire to adapt your site to mobile, but you have no skill, contact us, we will help with adaptability.

After setting up the site for mobile devices, do not forget about technical optimization – there are additional nuances for mobile devices, the details are described in this article.

Leave a Reply

Your email address will not be published. Required fields are marked *