Как мы знаем, что сайты в Сети различаются в зависимости от отображения на различных устройствах. Так, принято выделять:
- мобильные предположения, предназначенные для смартфонов;
- веб-приложения — отдельный тип сайта для мобильных устройств, что выглядит как приложение;
- адаптивный дизайн — внешний вид веб-ресурса преобразуется в зависимости от того, с какого именно устройства его просматривает пользователь;
- полные предположения — предназначены для десктопов и не оптимизированы под мобильный интернет.
В данной статье мы детально разглядим все типы сайтов, чтобы выяснить, недостатки и какие преимущества скрывает каждых из них и что подходит как раз вам.
- Респонсивный Vs адаптивный дизайн: что лучше для пользователя?
Мобильная версия
Мобильные предположения сайтов создаются специально для мобильных устройств. Довольно часто они имеют собственный личный url-адрес (к примеру. m.vk.com) и существенно отличаются от полной версии:
- удалены кое-какие разделы;
- адаптирован внешний вид основной страницы;
- размещен контент, что комфортно просматривать с маленьких экранов;
- дизайн и CTA-кнопки соответствуют размеру экрана, дабы их было комфортно нажимать.
pПо сравнению с тем же адаптивным сайтом, мобильная версия отличается как раз этим — собственным интерфейсом и содержимым.
- Как применять «аккордеон»-меню для мобильной версии лендинга
Веб-приложение
Веб-приложения очень сильно разнятся с уникальным сайтом кроме того если сравнивать с мобильной версией. Это всецело переработанный, кроме того возможно сообщить намерено созданный вариант веб-ресурса. Доступен лишь для мобильных устройств.
Адаптивный дизайн
Адаптивный дизайн является технологией , по которой функционал сайта и внешний вид подстраивается под формат устройства пользователя. В зависимости от этого на экране будет отображаться то, что вписывается в экран конкретного визитёра.
Transport for London (tfl.co.uk) — это пример сайта с адаптивным дизайном. На скриншоте ниже вы видите, как полная версия преобразуется на различных экранах мобильных устройств
Дизайн для планшета (слева) и мобильного устройства (справа) отличается числом колонок, в которых размещается контент
Одним из самых основных недочётов мобильных предположений сайтов, согласно точки зрения многих пользователей, есть как раз функционал и урезанный контент. Адаптивный дизайн как раз-таки решает эту проблему. Минусом, со своей стороны, есть не всегда верная адаптация под конкретное устройство, что может создать настоящие неудобства для пользователей:
Пример адаптивной версии сайта Authenticjobs.com. Полная версия содержит контент, находящийся в колонке справа. К примеру, предложение опубликовать объявление о вакансии, что отсутствует в мобильной
Как видите, в мобильной версии Authenticjobs.com некоего контента нет
Ниже мы попытаемся сравнить эти два варианта.
- Примеры адаптивного дизайна: новая эра мобильного маркетинга
Мобильная версия либо Адаптивный дизайн?
Перечислим пара недостатков и очевидных преимуществ двух подходов:
1. Сайты с адаптивным дизайном поддерживают формат экранов и разные устройства, тогда как мобильная версия разрабатывается лишь для смартфонов и не подходит для работы с ПК.
2. Адаптивный дизайн предполагает наличие всех функций и полного контента, в отличие от мобильной версии, где опции и содержимое ограничено возможностями смартфонов/планшетов и предполагаемого юзабилити.
3. Сайты с адаптивным дизайном довольно часто лучше индексируются поисковыми машинами. С мобильными предположениями, в особенности, если они отличаются еще и URL, сложнее — для их продвижения в поиске пригодится больше времени. Кое-какие веб-мастера находят выход в переадресации визитёра с полной версии на мобильную, но это занимает время, что не всегда нравится пользователю.
4. Сайты с адаптивным дизайном легче модерировать, поскольку снова же не требуется заботиться о разном содержании.
5. Адаптивные сайты, в большинстве случаев, обходятся своим обладателям дороже.
6. Адаптивный дизайн чаще трудится медленнее, чем «шустрая» и подстроенная под устройство мобильная версия. Дело как раз в отличии функционала и контента.
7. Сайты с адаптивным дизайном не отлично интегрируются со сторонними веб-ресурсами. Если вы, к примеру, разрабатываете сайт, что опирается на свободный бекэнд-сервис (к примеру, совокупность бронирования на сайте отеля), будет сложно подстроить интерфейс этого сервиса под адаптивный дизайн.
Основной минус мобильных предположений сайтов — недочёт функционала и контента
Твитнуть цитату
- Создание адаптивной среды для улучшения пользовательского опыта
Полная версия сайта на мобильном устройстве
Кое-какие пользователи говорят, что они предпочитают загружать полную версию сайта, даже если они применяют мобильное устройство. По большей части таковой выбор связан с прошлым неудачным опытом сотрудничества с мобильной версией веб-ресурса (недочёт функций и контента — все то, о чем написано выше). Время от времени это привычки.
Имеется кроме того случаи, в то время, когда визитёры мобильных предположений отказывались от конверсионного действия. Такое случилось с одним из пользователей сайта отеля в Лас-Вегасе. Как позже выяснилось, человек ожидал от гостиницы в таком легендарном городе «более броского сайта».
Разумеется, что мобильная версия не разрешила показать все преимущества. Так неужто нужно будет отказываться от простоты и удобства из-за ожиданий некоторых пользователей?
Нет. Аналитики отмечают, что обращать внимание необходимо на пользовательский опыт, а не на слова. Довольно часто на оптимизированных под мобильные устройства сайтах он выясняется успешнее и действеннее, даже в том случае, если визитёры заявляют обратное.
- Сплит-тест: адаптивный дизайн против стандартного макета мобильного лендинга
Вместо заключения
Как видите, преимущества и недочёты имеет любой из вариантов. Единственно верное ответ, которое вы имеете возможность принять при выборе метода адаптации вашего сайта либо лендинга под мобильные устройства — это совершить сплит-тестирование. Посмотрите, как ведут себя ваши пользователи на ресурсе, и создайте самый удобный вариант как раз для вашей целевой аудитории.
Высоких вам конверсий!
По данным: nngroup.comimage source nuon
Случайные статьи:
Уроки Адаптивного Дизайна 03 | Медиа запросы
Подборка похожих статей:
-
5 Распространенных ошибок юзабилити при разработке мобильной версии лендинга
Представьте, что вы находитесь в незнакомом городе и вам необходимо скоро отыскать определенную данные посредством сотового телефона. Вы наконец находите…
-
Сплит-тест: мобильный дизайн корзины для сайта ecommerce
В данном сплит-тесте, совершённом большим веб-магазином обуви, маркетологи решили узнать, какой из двух вариантов корзины окажется более конверсионным на…
-
Мобильная версия интернет-магазина: делаем правильно
В действительности, перед тем, как вспоминать о создании мобильной версии вебмагазина, направляться изучить информацию о вашей аудитории. Приходит ли…
-
Мобильная версия интернет-магазина: чего ждет пользователь?
Сравнительно не так давно компания eDigital Research совершила изучение, цель которого – узнать, чего пользователи ожидают от мобильных предположений…