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