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 Типографика, вайб, скролл — всё очень аутентично

7 комментариев

Кирилл Казаков

05.03.2020

А вы не могли бы прогнать материал через типограф? В редакторе сверху есть кнопка с волшебной палочкой, это он. Будут красивые тире и кавычки (только надо нажать несколько раз)

Ответить

ivan krapivin

Об этом в бюро Артема Горбунова ребята еще не прочитали.

Алексей из LOADING.express

Пожалуйста, не советуйте инструменты, если не в теме. Pingdom не измеряет скорость загрузки. У них давно всё сломано и они не знают, когда починят. Креплю официальный ответ от них.

Гугл знает о скорости всё и показывает правильные замеры.
А 99% разработчиков не умеют работать с этими рекомендациями и говорят, что Гугл бредит.

Не делайте так.

Сергей Сергеев

Не могу представить, чтобы я заказал что-то у компании, которая обращается ко мне на ты на своем сайте. Как будто я пацан соседский.

Но заставлять людей смотреть портфолио на Бехансе — это вообще плевок в лицо.

Bers Diesel

06.03.2020

С практикой всё больше складывается личное мнение, что "скорость сайта согласно метрикам" - это очередные цифры, за которые клиентам нужно платить. Очень удобно, кстати. Имхо, реальная скорость сайта и показатели PSI - не совсем синонимы.

P.S. Особенно про "кнопочку Minify" понравилось.

Всё верно, синтетический замер всегда на одинаковых параметрах мощности устройства и соединения.

А реальные люди ходят кто с айфоном, кто с андроидом старым. У кого-то LTE шпарит, а кто-то на 3G Slow сидит.
Именно поэтому вы абсолютно правы. Синтетические замеры это для общего градуса оценка.
НО!
Гугл собирает БИГДАТУ о ваших посетителях с Хром.
Каждый кто заходит на сайт из Chrome Гугл измеряет и фиксирует все показатели скорости загрузки и другие.

Так вот. Если вы правильно смотрите показания от PSI, то вы смотрите и реальные данные исторические и синтетический замер тоже.
На скриншоте отметил вам где реалдата. Обратите туда внимание.
Писал про Гугл как он замеряет и что происходит здесь https://vc.ru/services/104633-pochemu-google-pagespeed-insights-daet-nizkie-pokazateli-moemu-saytu
И здесь описывал про их реалдату https://vc.ru/seo/91251-google-vyvel-pokazateli-skorosti-zagruzki-sayta-v-search-console, которую они и выводят в Search Console.