ГлавнаяБлогКак сделать мобильную версию сайта правильно: лучшие практики с примерами
Как сделать мобильную версию сайта правильно: лучшие практики с примерами
Мобильные устройства меняют бизнес. Они постоянно эволюционируют, и требования к дизайну и разработке сайта постоянно обновляются. Как адаптировать элементы дизайна и контент, какой способ разработки лучше выбрать? Рассказали в этой статье.
Responsive design, adaptive design или mobile first?
Несмотря на то, что мобильные приложения пользуются большой популярностью и сервисы вкладываются в их разработку, мобильная версия должна быть у каждого сайта. Доля мобильной коммерции продолжает расти. Кроме того, многие пользователи прежде чем скачать приложение, знакомятся с продуктом через мобильную версию. Например, в Северной Европе плохая мобильная верстка является главной причиной брошенных корзин.
В связи с этим, большинство продуктовых компаний использует подход “mobile first” при разработке дизайна. То есть при разработке интерфейса в первую очередь создается мобильная версия интерфейса, затем для дисплеев больших размеров: планшеты, ноутбуки, ПК.
Для того чтобы лучше понять этот подход, разберемся с двумя другими:
1. Responsive Web Design (Отзывчивый дизайн)
Один макет дизайна подстраивается под разные экраны устройств. Весь контент, все изображения и блоки автоматически изменяют размер, благодаря гибкой разметке, сетке сайта, css media. Версия сайта одна, но нужно проверять правильно ли отображаются элементы при добавлении, обновлениях и т.д.
Преимущества:
Существует множество шаблонов на отзывчивом дизайне.
Для адаптации под разные экраны используются разные макеты. Сайт идентифицирует с какого устройства заходит пользователь и перенаправляет на нужную версию сайта. Шаблоны зависят от ширины экранов, обычно это: 320px, 480px, 760px, 960px, 1200px и 1600px. Разработка может потребоваться не для всех вариантов, а только для актуальных устройств.
Преимущества:
Возможность создать лучший пользовательский интерфейс под нужные устройства.
Высокая скорость загрузки сайта.
Больше контроля над элементами дизайна.
Недостатки:
Требуется больше времени для разработки.
Появление устройств с новыми экранами — необходимость разработки новых шаблонов.
Трудности с SEO оптимизацией.
3. Mobile First Design (Сначала мобильный)
Mobile First основывается на прогрессивном продвижении. Сначала разрабатывается версия для маленького экрана, с самыми основными функциями и возможностями. А затем к базовой версии мы добавляем и расширяем функции.
Преимущества:
Удобство для пользователя. Пользовательский путь создается с учетом ограничений небольшого экрана.
Быстрая загрузка страниц. Поскольку размещается только самый важный контент, изображения меньшего размера, отсутствуют “костыли” для адаптации, код более легкий.
Хорошая ранжируемость. С 2016 года Google ввел новый алгоритм для анализа сайтов Mobile First Index, который анализирует удобство пользования сайтом в мобильных версиях.
Недостатки:
Сроки и стоимость разработки. Под каждый экран создается отдельный макет.
Минимализм в визуальном оформлении. Весь контент придется подстраивать под маленький экран, никаких сложных анимаций, длинных и больших текстов, весь фокус отдается на целевые действия. На десктопе это может выглядеть слишком просто.
3 подхода к мобильной разработке
Как проверить, что страницы вашего сайта соответствуют требованиям поисковых систем? Можно воспользоваться сервисом Google Mobile-Friendly Test, он покажет удобна ли страница на мобильных устройствах или что с ней не так. Если вам необходимо проверить весь сайт, то лучше использовать Google Search Console. Там вы найдете описание для каждой страницы, что ухудшает удобство сайта для мобильных посетителей.
Что нужно учесть в разработке дизайна мобильной версии
Мы составили основные правила для разработки мобильной версии сайта. Вне зависимости от того, какой подход к разработке вы выбрали.
1. Иерархия контента
Экран смартфона можно поделить на зоны восприятия, основное внимание попадает на центральную часть, где и следует располагать самые важные элементы.
Центральная часть для самого важного контента.
Пространство над и под основным содержанием для контента второстепенной важности.
Самая верхняя часть экрана для неважной информации и элементов.
Также есть правило “большого пальца”, поскольку большинство людей касаются дисплея только им. В зависимости от того, как большинство людей держит смартфон, есть зоны, до которых легко и сложно “добраться”.
Используйте легкодоступные зоны и располагайте важный контент в нужных местах.
2. Ширина контента
Узкий экран мобильных устройств не дает размахнуться в оформлении страниц. Просмотр страниц осуществляется вверх-вниз — это удобно и ожидаемо для пользователя. Избегайте горизонтальной прокрутки, элементы с фиксированной шириной чаще всего могут вызывать эту ошибку. Старайтесь поместить текст в одну колонку, так легче управлять ограниченным пространством на маленьком экране.
Чем меньше экран, тем меньше колонок можно эффективно отразить.
3. Удобный шрифт
Чтобы пользователю не приходилось увеличивать или уменьшать масштаб, используйте подходящий размер шрифта. Минимальный размер основного текста может быть в пределах от 16рх до 18рх:
Apple в руководстве Human Interface Guidelines рекомендует 17рх.
Google в Material Design рекомендует 16рх.
Но если буквы очень тонкие, можно сделать и 18рх. Выбирайте шрифты, которые хорошо масштабируются и состоят в одном семействе. Например, Noto Serif и Noto Sans, создатели делают так, чтобы они хорошо сочетались между собой. Для подбора шрифтов можно воспользоваться сервисами Fontpair и Fontjoy. Не используйте на сайте больше 3 типов, это будет замедлять загрузку сайта.
Больше – не значит лучше. Соблюдайте баланс и гармонию в отображении текста.
4. Размеры меню
Если на ПК широкая панель навигации со вторым подменю не вызывает затруднений у пользователя, то в мобильной версии это будет крайне неудобно. Меню прячут в иконку гамбургер, выдвигается оно из боковой панели и может занимать часть экрана или весь — это стало золотым правилом. Если меню включает множество подпунктов, лучше чтобы новый список появился поверх предыдущего. Не забудьте сделать меню “липким”, чтобы пользователю не нужно было прокручивать страницу вверх, если необходимо вернуться в каталог.
Сделайте меню компактным.
5. Сократите вторичный контент
В ПК версии можно подробно описывать характеристики, со множеством фотографий, но информация в мобильной версии должна быть лаконичной. К примеру, дополнительную информацию можно свернуть в знак +, если пользователь хочет ознакомиться подробнее, то развернет текст. Объединяйте повторяющийся контент, такой как отзывы. Располагайте их в виде карусели, чтобы оставить место для более важной информации.
Всплывающие поп-апы вызывают раздражение даже на ПК, а в мобильной версии могут просто перекрыть все и пользователь покинет сайт. Минимизируйте всплывающие окна или полностью откажитесь от них.
Отзывы, баннеры, дополнительные описания, составы - это вторичный контент, который можно скрыть.
6. Сделайте заметной возможность связаться
Если посетитель ищет ваши контактные данные, то либо он хочет купить ваш продукт, либо он уже купил продукт и у него возникли проблемы. В обоих случаях, возможность пообщаться с представителем компании должна быть простой и при этом ясной. По статистике, 84% покупателей “обслуживание клиентов” считают ключевым фактором для покупки.
В мобильной версии есть преимущество по способам связи, т.к. вы мгновенно можете перейти в нужный мессенджер, отправить сообщение или совершить звонок.
Чаты, мессенджеры, обратный звонок — через телефон это сделать проще.
7. Адаптируйте формы для заполнения
В мобильной версии нет инструментов упрощающих взаимодействие с формами: горячие клавиши, перетаскивание файлов из разных окон, плагины и прочее. Пользователь, для регистрации и покупки, чаще всего, вводит одну и ту же информацию. Используйте ее для автозаполнения.
Прописывайте шаблон, если есть строгие правила к заполнению или сразу учитывайте регистр текста.
Для входа на сайт можно использовать профили соцсетей.
Минимизируйте количество полей, насколько это возможно.
Примеры хорошего мобильного дизайна
Instagram
Он начинался с мобильной версии и долго существовал только в телефонах. Но по многочисленным просьбам появилась ПК версия, которая практически ничем не отличается в дизайне от мобильной. Инстаграм сохранил простоту, придерживаясь правила Mobile Only, несмотря на то, что продолжают появлятся новые функции.
Предлагает удобный сервис по своим статьям: на главной странице выведена популярная тема, что больше волнует читателей. Размер шрифта в статье представлен 18рх. Как только статья прокручивается до конца, сервис сразу предлагает следующую. Снижая, таким образом, показатель отказов.
Сервис по поиску билетов и отелей по всему миру большое внимание уделяет и приложению и мобильной версии сайта. Ведь в путешествии у вас не всегда может быть под рукой ноутбук. Самая важная информация “поиск билетов” располагается на стартовой странице. Выбрать аэропорт можно по автоподсказкам, при этом достаточно ввести город и даже просто страну. Переключится из поиска билета на поиск отеля можно в один клик, при этом сервис, после выбора билета, спросит нужен ли вам отель. Самые важные кнопки большие и яркие. А дополнительная информация (статьи о местах и городах) перечисляется в слайдере.
Сеть магазинов мягкой мебели сделали нижнее и верхнее меню липким. В нижнем расположили второстепенные кнопки: геолокация, вход и регистрация, возможности связаться. В верхнем: каталог, поиск, избранное и корзина. Все, что нужно для конверсии всегда под рукой, но не отвлекает от выбора и просмотра товаров. В главном меню свернут не только каталог товаров, но и блог со статьями и информация о компании. В каталоге много подкатегорий с вторичной информацией, они открываются поверх предыдущего и углубляют в поиск.
Их мобильная версия сделана по правилам большого пальца. Каталог, корзина, данные об оплате располагаются в нижнем меню. Подкатегорий в меню очень много, поэтому углубление в каталог происходит сменой целых страниц. Вторичная информация о товаре: описание, отзывы, состав, применение — спрятаны под галочками.
Как сделать маркетплейс для аренды С ростом экономики совместного потребления и платформ электронной коммерции многие предприниматели теперь обращают свое внимание на онлайн рынки аренды, как…
Как сделать мобильную версию сайта правильно: лучшие практики с примерами
Мобильные устройства меняют бизнес. Они постоянно эволюционируют, и требования к дизайну и разработке сайта постоянно обновляются. Как адаптировать элементы дизайна и контент, какой способ разработки лучше выбрать? Рассказали в этой статье.
Responsive design, adaptive design или mobile first?
Несмотря на то, что мобильные приложения пользуются большой популярностью и сервисы вкладываются в их разработку, мобильная версия должна быть у каждого сайта. Доля мобильной коммерции продолжает расти. Кроме того, многие пользователи прежде чем скачать приложение, знакомятся с продуктом через мобильную версию. Например, в Северной Европе плохая мобильная верстка является главной причиной брошенных корзин.
В связи с этим, большинство продуктовых компаний использует подход “mobile first” при разработке дизайна. То есть при разработке интерфейса в первую очередь создается мобильная версия интерфейса, затем для дисплеев больших размеров: планшеты, ноутбуки, ПК.
Для того чтобы лучше понять этот подход, разберемся с двумя другими:
1. Responsive Web Design (Отзывчивый дизайн)
Один макет дизайна подстраивается под разные экраны устройств. Весь контент, все изображения и блоки автоматически изменяют размер, благодаря гибкой разметке, сетке сайта, css media. Версия сайта одна, но нужно проверять правильно ли отображаются элементы при добавлении, обновлениях и т.д.
Преимущества:
Недостатки:
2. Adaptive Web Design (Адаптивный дизайн)
Для адаптации под разные экраны используются разные макеты. Сайт идентифицирует с какого устройства заходит пользователь и перенаправляет на нужную версию сайта. Шаблоны зависят от ширины экранов, обычно это: 320px, 480px, 760px, 960px, 1200px и 1600px. Разработка может потребоваться не для всех вариантов, а только для актуальных устройств.
Преимущества:
Недостатки:
3. Mobile First Design (Сначала мобильный)
Mobile First основывается на прогрессивном продвижении. Сначала разрабатывается версия для маленького экрана, с самыми основными функциями и возможностями. А затем к базовой версии мы добавляем и расширяем функции.
Преимущества:
Недостатки:
Как проверить, что страницы вашего сайта соответствуют требованиям поисковых систем? Можно воспользоваться сервисом Google Mobile-Friendly Test, он покажет удобна ли страница на мобильных устройствах или что с ней не так. Если вам необходимо проверить весь сайт, то лучше использовать Google Search Console. Там вы найдете описание для каждой страницы, что ухудшает удобство сайта для мобильных посетителей.
Что нужно учесть в разработке дизайна мобильной версии
Мы составили основные правила для разработки мобильной версии сайта. Вне зависимости от того, какой подход к разработке вы выбрали.
1. Иерархия контента
Экран смартфона можно поделить на зоны восприятия, основное внимание попадает на центральную часть, где и следует располагать самые важные элементы.
Также есть правило “большого пальца”, поскольку большинство людей касаются дисплея только им. В зависимости от того, как большинство людей держит смартфон, есть зоны, до которых легко и сложно “добраться”.
2. Ширина контента
Узкий экран мобильных устройств не дает размахнуться в оформлении страниц. Просмотр страниц осуществляется вверх-вниз — это удобно и ожидаемо для пользователя. Избегайте горизонтальной прокрутки, элементы с фиксированной шириной чаще всего могут вызывать эту ошибку. Старайтесь поместить текст в одну колонку, так легче управлять ограниченным пространством на маленьком экране.
3. Удобный шрифт
Чтобы пользователю не приходилось увеличивать или уменьшать масштаб, используйте подходящий размер шрифта. Минимальный размер основного текста может быть в пределах от 16рх до 18рх:
Но если буквы очень тонкие, можно сделать и 18рх. Выбирайте шрифты, которые хорошо масштабируются и состоят в одном семействе. Например, Noto Serif и Noto Sans, создатели делают так, чтобы они хорошо сочетались между собой. Для подбора шрифтов можно воспользоваться сервисами Fontpair и Fontjoy. Не используйте на сайте больше 3 типов, это будет замедлять загрузку сайта.
4. Размеры меню
Если на ПК широкая панель навигации со вторым подменю не вызывает затруднений у пользователя, то в мобильной версии это будет крайне неудобно. Меню прячут в иконку гамбургер, выдвигается оно из боковой панели и может занимать часть экрана или весь — это стало золотым правилом. Если меню включает множество подпунктов, лучше чтобы новый список появился поверх предыдущего. Не забудьте сделать меню “липким”, чтобы пользователю не нужно было прокручивать страницу вверх, если необходимо вернуться в каталог.
5. Сократите вторичный контент
В ПК версии можно подробно описывать характеристики, со множеством фотографий, но информация в мобильной версии должна быть лаконичной. К примеру, дополнительную информацию можно свернуть в знак +, если пользователь хочет ознакомиться подробнее, то развернет текст.
Объединяйте повторяющийся контент, такой как отзывы. Располагайте их в виде карусели, чтобы оставить место для более важной информации.
Всплывающие поп-апы вызывают раздражение даже на ПК, а в мобильной версии могут просто перекрыть все и пользователь покинет сайт. Минимизируйте всплывающие окна или полностью откажитесь от них.
6. Сделайте заметной возможность связаться
Если посетитель ищет ваши контактные данные, то либо он хочет купить ваш продукт, либо он уже купил продукт и у него возникли проблемы. В обоих случаях, возможность пообщаться с представителем компании должна быть простой и при этом ясной. По статистике, 84% покупателей “обслуживание клиентов” считают ключевым фактором для покупки.
В мобильной версии есть преимущество по способам связи, т.к. вы мгновенно можете перейти в нужный мессенджер, отправить сообщение или совершить звонок.
7. Адаптируйте формы для заполнения
В мобильной версии нет инструментов упрощающих взаимодействие с формами: горячие клавиши, перетаскивание файлов из разных окон, плагины и прочее. Пользователь, для регистрации и покупки, чаще всего, вводит одну и ту же информацию. Используйте ее для автозаполнения.
Примеры хорошего мобильного дизайна
Instagram
Он начинался с мобильной версии и долго существовал только в телефонах. Но по многочисленным просьбам появилась ПК версия, которая практически ничем не отличается в дизайне от мобильной. Инстаграм сохранил простоту, придерживаясь правила Mobile Only, несмотря на то, что продолжают появлятся новые функции.
McKinsey
Предлагает удобный сервис по своим статьям: на главной странице выведена популярная тема, что больше волнует читателей. Размер шрифта в статье представлен 18рх. Как только статья прокручивается до конца, сервис сразу предлагает следующую. Снижая, таким образом, показатель отказов.
Aviasales и Ostrovok
Сервис по поиску билетов и отелей по всему миру большое внимание уделяет и приложению и мобильной версии сайта. Ведь в путешествии у вас не всегда может быть под рукой ноутбук. Самая важная информация “поиск билетов” располагается на стартовой странице. Выбрать аэропорт можно по автоподсказкам, при этом достаточно ввести город и даже просто страну.
Переключится из поиска билета на поиск отеля можно в один клик, при этом сервис, после выбора билета, спросит нужен ли вам отель. Самые важные кнопки большие и яркие. А дополнительная информация (статьи о местах и городах) перечисляется в слайдере.
Divan.ru
Сеть магазинов мягкой мебели сделали нижнее и верхнее меню липким. В нижнем расположили второстепенные кнопки: геолокация, вход и регистрация, возможности связаться. В верхнем: каталог, поиск, избранное и корзина. Все, что нужно для конверсии всегда под рукой, но не отвлекает от выбора и просмотра товаров. В главном меню свернут не только каталог товаров, но и блог со статьями и информация о компании. В каталоге много подкатегорий с вторичной информацией, они открываются поверх предыдущего и углубляют в поиск.
Рив Гош
Их мобильная версия сделана по правилам большого пальца. Каталог, корзина, данные об оплате располагаются в нижнем меню. Подкатегорий в меню очень много, поэтому углубление в каталог происходит сменой целых страниц. Вторичная информация о товаре: описание, отзывы, состав, применение — спрятаны под галочками.
Получите консультацию специалиста по вашему проекту
Получите консультацию специалиста по вашему проекту
Другие статьи этой категории