5 главных проблем мобильной версии сайта и 15 способов с ними бороться

52.02% людей заходят на сайты с телефона. Но mobile-first подход в создании сайтов — редкая практика, дизайн начинают с десктопа. Признаемся, мы в Embacy делаем также, а на мобильную версию оставляем 1-2 дня. Чтобы мобилка не превратилась в чудовище, у нас есть внутренний чеклист. На основании него мы написали эту статью.

• Мобильная версия долго грузится
• Слишком много контента на одном экране и наоборот
• Непонятно, как попасть на нужную страницу
• Долго и неудобно заполнять данные
• Огромные или наоборот слишком маленькие интерактивные элементы (кнопки и др)

С июля 2019 Google даёт приоритет в поиске сайтам с удобными мобильными версиями. Ключевой показатель оценки — скорость загрузки. Ещё момент: При времени загрузки страницы от 1 до 10 секунд вероятность отказа повышается на 123%. Даже при задержке до 3 секунд она растёт на треть.

• Добиваемся результата 80+ для мобильной версии в Google Page Speed на основе их же рекомендаций. Альтернативный инструмент — Pingdom
• Убираем лишние элементы. На мобильной версии не так важны фотографии и иллюстрации. Всё, что можно убрать без потери смысла, мы убираем, чтобы не перегрузить страницу.
• То, что убрать не удастся, нужно сжать. Фотографии сохраняем в JPG, а иллюстрации в SVG. Если файлы всё ещё тяжелые - сжимаем в плагине для Figma TinyImage Compressor
• Уменьшаем код. Мы верстаем на Webflow и в его функционале есть кнопка "minify code". На одном она помогла увеличить результат с 69 до 91.
• Облегчаем анимации. У Webflow есть коллаборация с After Effects. Через плагин можно сохранять анимации сразу для Webflow в формате json. Такая анимация почти ничего не весит.

Чем быстрее пользователь изучит сайт, тем быстрее примет решение. А задача дизайнера — подать информацию в удобном виде. Как можно сделать неудобно:

• Контент на сайте сливается в одно пятно
• Блоки слишком разрежены: непонятно есть ли контент дальше. И пользователю нужно больше скролить
• Нужно приближать или отдалять сайт

• Самое важное — используем правило внутреннего и внешнего. Если коротко, то внешние расстояния между внешними элементами должны быть больше внутренних. Как пример: расстояния между строками должно быть больше чем пробелы в словах внутри строки. На первой странице гугла можно найти несколько качественных статей на эту тему и разобраться подробнее. Нам очень нравится статья Бюро Горбунова.
• Смотрим, чтобы заголовки легко отличались от основного текста. Важное делаем большим, неважное убираем, остальное — в порядке приоритета
• Следим, чтобы не было частокола из шрифтов и кеглей. На десктопе его можно не заметить, потому что пространства больше, на мобайле проблема возникает чаще, поэтому лучше не делать больше двух типов заголовков и двух стилей для обычного текста
• Проверяем, не слишком ли мелкий основной текст и легко ли его читать. Простое правило: мы не делаем текст менее 16px, а заголовки менее 32px

Лишние поля в форме снижают конверсию и ухудшают пользовательский опыт

• Если клиент не против — сокращаем лид-форму до 1-3 полей
• Если против, разбиваем на 2-3 этапа.

Взаимодействие с сайтом не должно быть трудным. Плохо, когда нужно целиться в кнопку или промах в несколько пикселей приводит к неожиданным результатам.

Яркий негативный пример, который бесит нашу команду как пользователей — выбор мест в кинотеатре на мобильной версии Афиши. Рекомендуем им добавить возможность приближать места.

• Не ставим две кнопки рядом. На одном из проектов клиент настаивал на таком решении, мы оперативно сверстали тестовую страницу с тем расположением кнопок, которое хотел клиент, созвонились с ним и попросили попасть в нужную с телефона. После этого кнопки стали удобными.
• Придерживаемся рекомендациям по размеру зоны нажатия: Apple рекомендует, чтобы тач-элементы были не меньше 44 px на 44 px.

Если пользователь потеряется на сайте или не сможет найти нужный контент — уйдет.

Самое распространённое решение — «бургер» в верхнем углу экрана. Но у такого решения есть две проблемы.

• Мы осознанно скрываем контент от пользователя
• На больших экранах тяжело дотянуться пальцем до верхних углов экрана, а бургер внизу выглядит будто бы не на своём месте.

Возможное решения для сайтов с глубокой навигацией — вынести важную информацию в отдельное меню внизу экрана.

Разные комбинации из описанных выше способов помогают нам делать удобные и быстрые мобильные версии. За всю историю Embacy не было клиента, у которого результат в Google Page Speed был меньше 80.

Подборка из 15 классных мобильных сайтов

1. http://www.marianopascual.me Мы очень любим десктоп этого сайта, и не знали, что ретро-концепция так красиво перенеслась в мобайл
2. https://samokat.ru/ Стильно, модно, молодежно
   
3. https://www.idrf.online/ Яркая стилистика, не пострадавшая от перехода мобайл, с интересным решением по CTA
   
4. https://coopywriters.ru Отличная концепция, которая в мобайле даже органичнее смотрится
   
5. https://abuk.com.ua/ Аккуратно сверстанный мобайл украинского сервиса
   
6. https://useplink.com/en/ 3D-анимация быстро грузится и органично перенесена в мобайл
   
7. https://emotivefeels.com/ Четкий первый экран мобайла, сложные по исполнению, но лёгкие по весу анимации, чуть затянутый, но отличный копирайт
8. https://binaryblocks.io/ Интересная сетка мобильной верстки и аккуратные анимации
9. https://www.figma.com Выглядит как на компе и создает единый опыт. Бонус — саму фигму можно открыть с телефона
10. https://crypterium.com/ Легкая структура
11. https://itsnotviolent.com Этот сайт хорош как с визуальной точки зрения, так и с точки зрения скорости его работы, несмотря на то что там много анимаций
12. https://www.heytempo.com Очень яркий и разноцветный сайт, который, несмотря на свою яркость, очень понятный и хорошо читается
13. https://www.framer.com/ Хорошо адаптирован под телефон. Замечательные анимации. Не смотря на их обилие — быстро грузится
14. https://www.patreon.com/ Удобное меню. Есть несколько совсем разных страниц, но везде классно выдержан стиль
15. https://www.deburis.it/it-IT Типографика, вайб, скролл — всё очень аутентично