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