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

На дворе 2020-й. Уже 52,02% интернет-пользователей выходят в интернет с мобильных устройств. Google грозится с сентября перейти на ранжирование сайтов в поисковой выдаче в зависимости от качества мобильных версий сайта. Так что, если вы до сих пор не задумывались о важности и качестве мобильной версии сайта, то самое время это исправить.

Исторически сложилось, что создание любого сайта начинается с версии для большого экрана. После дизайн и функционал адаптируются под разные разрешения и гаджеты. При таком раскладе продукт неизбежно теряет часть функционала, деградирует, так как приходится убирать те функции, которые не так важны, а большую часть необходимых — прятать. То же происходит с контентом и дизайном.

Противоположный традиционному — процессу разработки по принципу mobile-first. То есть, дизайн проектируют сначала под самый маленький размер экрана — телефон. Но переход к mobile-first в разработке не самый простой с точки зрения трудозатратности, а значит и стоимости.

Даже работая с адаптивным дизайном можно создать хорошую мобильную версию, и вот что для этого нужно:
1. Скорость загрузки

Ключевой фактор для тех, кто заходит на сайт с телефона. Слишком долгое ожидание провоцирует отказы. Для контроля скорости загрузки можно воспользоваться Google Page Speed. Оптимальный показатель — около 80.

Как улучшить: убрать ненужные изображения и иллюстрации, нужные — сжать, сократить код и оптимизировать анимацию.
2. Интерактивные элементы

Одна из самых частых проблем в мобильных интерфейсах — неудобные кнопки и формы. Если пользователю приходится целиться в кнопку или пролистывать огромную простыню полей, то вам есть над чем поработать.

Как улучшить: не делать интерактивные элементы меньше 44х44px, не размещать их слишком близко к другу, сокращать формы до минимального количества полей или разбивать на этапы.
3. Текст

Основной полезный контент большинства сайтов — текстовый. Чем быстрее пользователь изучить сайт, тем быстрее он достигнет желаемого на сайте. Это значит, что контент должен легко восприниматься и на маленьком экране, что не всегда легко сделать.

Как улучшить: не использовать кегль меньше 16px, следить за отступами между блоками текста и контрастностью заголовков: при 16px подойдет заголовок 32px, уменьшить количество стилей при необходимости.

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