Улучшение адаптации страниц под мобильные устройства

Что такое адаптивная разметка страниц сайта? 

Это использование специальных приемов разметки, когда контент адаптируется под ширину экрана. 

В итоге сайт хорошо смотрится и на мобильном, планшете, ПК. 

Есть ли у сайт проблемы с адаптивной разметкой?

Самое простое - посмотреть по Яндекс Метрике процент отказов или время на сайте в отчетах Технологии / Разрешение дисплея или Технологии / Браузеры. 

Если процент отказов для малой ширины экрана или мобильных браузеров сильно выше процента отказа чем у ПК версии, то, вероятно, есть что улучшить на сайте в плане удобства на мобильных устройствах. 

Полезные сервисы для проверки сайта в плане адаптивности под мобильные устройства: 

• Google Pagespeed - проверка быстродействия (в том числе и для мобильных)
• Плагин для Chrome Lighthouse
• Плагин для Chrome Web Vitals (для отслеживания важных для Google показателей загрузки сайта). 

Практические советы по разметке страниц

1. Кнопки на мобильном часто лучше сделать на всю ширину (а на ПК версии оставить как есть, например в ряд): 

Используем для кнопок классы d-block d-md-inline-block 

2. Для компонента таблиц используем класс crd2MobCardsHorizontal, который сделает скроллинг вправо строк таблицы. 

<div class="as-table as-panel crd2MobCards crd2MobCardsHorizontal" data-slideout-ignore="1" data-code="table1"></div>

Примечание. Можно глобально установить такие карточки для всех таблиц. В as.systemOptions.js добавить настройку  "table.mobCardsHorizontal": true

3. Зачастую некий блок с большим количеством элементов (например плитка в 4 ряда по 3 в колонке) можно разместить как единый горизонтальный список с прокруткой вправо. 

В этом случае можно использовать разметку: 

<div class="d-flex" style="overflow-x:auto">
    <div style="flex:1;">xx</div>
    <div style="flex:1;">xx</div>
    <div style="flex:1;">xx</div>
    <div style="flex:1;">xx</div>
     ....
</div>

4. Если какой то элемент не нужен на мобильном экране, то применяем классы d-none d-md-block 

5. При использовании row col-XX на мобильном может появлятсья нежелательный горизонтальный скроллинг.
Чтобы не было горизонального скроллинга у row надо ставить no-gutters (и по необходимости добавлять p-1 у вложенных элементов, чтобы они не слипались на ПК экране)

<div class="row no-gutters">
  <div class="col-12 col-lg-6 p-1"></div>
  <div class="col-12 col-lg-6 p-1"></div>
</div>

6. Загрузка картинок

Применяйте lazy loading для картинок, которые загружаются на странице (исключение - первая главная картинка, которая должна загрузиться как можно быстрее. Ей не нужен lazy loading). 

<img src="..." alt="" title="" loading="lazy">

7. Необходимость менять местами колонки (изменить порядок). К примеру у нас есть 2 колонки на ПК версии и мы хотим, чтобы правая колонка на мобильном виде выводилась вверху, а не внизу.

Для этого используем классы типа order-2 order-md-1. Пример:

<div class='row'>
  <div class='col-12 col-lg-9 order-2 order-md-1'>
  </div>
  <div class='col-12 col-lg-3 order-1 order-md-2'>
  </div>
</div>

Что почитать дополнительно: 

https://pr-cy.ru/news/p/7252-chek-list-14-pravil-mobiloprigodnogo-sayta