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

Для адаптации HTML-сайта под мобильные устройства можно предпринять следующие шаги:

1. Решить, какая версия будет базовой — десктопная или мобильная (Mobile First). yandex.ru Если преобладает мобильная аудитория, логичнее придерживаться принципа Mobile First. yandex.ru Если наоборот, то стоит сначала разработать версию для десктопа. yandex.ru
2. Вписать в HTML-код страницы метатег Viewport. yandex.ru www.calltouch.ru Он отвечает за параметры (высота, ширина, масштаб) области отображения. yandex.ru
3. Доработать меню, шапку и стили. rookee.ru www.calltouch.ru Некоторые элементы полноформатных страниц можно скрыть для мобильных устройств либо вместо них выводить другие, более компактные. www.calltouch.ru Например, преобразовать меню в шапке в меню формата «гамбургер» (три полоски в правом или левом верхнем углу). yandex.ru
4. Убрать рекламу и всплывающие окна. rookee.ru www.calltouch.ru Если на сайте есть блоки с рекламой, их нужно уменьшить, чтобы сэкономить место на экране. www.calltouch.ru Например, если в десктопной версии сайта есть пять баннеров, для мобильной можно оставить один или два. www.calltouch.ru
5. Сократить объём контента. rookee.ru www.calltouch.ru Убрать с сайта те элементы, которые полностью скрываются от пользователя. www.calltouch.ru Это увеличит скорость загрузки страницы. www.calltouch.ru Если какой-то контент не очень важен, скройте его под кнопку «Узнать подробнее». www.calltouch.ru

Убедиться, что страницы адаптированы правильно, поможет инструмент «Проверка мобильных страниц» в Яндекс Вебмастере. yandex.ru

Также для адаптации сайта под мобильные устройства можно использовать специальные конструкторы, например, Craftum или «Тильда». rookee.ru