Что лучше: мобильный или адаптивный дизайн сайта?
Сайт – отличный инструмент для развития бизнеса, он позволяет выйти в online-продажи и конвертировать новых клиентов. Еще до начала разработки проекта возникает большое количество вопросов, одним из которых является «С десктопной версией все понятно, а что лучше – мобильная версия или адаптивная?».
Мы – команда DIGIMATIX – считаем, что все зависит от целей и задач клиента. И ответ на этот вопрос у каждого будет разный. В этой статье мы расскажем о том, что такое мобильная версия и адаптивный дизайн, какие ключевые преимущества и недостатки есть у той и другой версии сайта.
По данным аналитиков SlickJump, доля мобильного трафика в российском сегменте интернета достигла рекордных 80% в 2020 году. Эксперты считают, что показатель 80% – далеко не максимальный. «Если темпы прироста мобильного трафика сохранятся, то в 2021 году его доля может составить 88–92%», – говорится в исследовании.
Соответственно, стоит сделать вывод, что мобильный трафик преобладает над десктопным и на российском рынке стоит обращать внимание на трафик со смартфонов и делать акцент на удобстве мобильных версий.
Для начала разберемся, что из себя представляют адаптивный дизайн и мобильная версия сайта, в чем их преимущества и недостатки.
Адаптивный дизайн – это такой вид верстки, который обеспечивает корректное отображение сайта на различных устройствах: компьютере, планшете, смартфоне. Это достигается путем динамического подстраивания всех элементов сайта под необходимый формат экрана, при этом функционал сайта полностью сохраняется. В данном случае разрабатывается только одна версия сайта, и, соответственно, URL-адрес тоже будет один, а значит, будет одна база данных, из которой берется наполнение, что значительно упрощает работу.
Преимущества адаптивного дизайна:
- Использование одного домена для всех устройств, что значительно упрощает работу над SEO-продвижением.
- Корректное отображение всех страниц сайта и его элементов на любых устройствах.
Недостатки адаптивного дизайна:
- Большой вес страниц и, как следствие, долгая загрузка сайта. Если на десктопе есть «тяжелые» элементы, в мобильной версии они могут тормозить загрузку страниц сайта. Чтобы не допускать этого, необходимо дополнительными действиями решать данную задачу.
- Различные цели сайта для десктопной и мобильной версии. При посещении сайта со смартфона иногда приходится долго искать информацию, так как весь функционал и все блоки остаются теми же, что и на десктопной версии. Это может вызвать дополнительное неудобство и раздражение у пользователей.
- Ограничения по добавлению нового функционала. Как мы и говорили выше, адаптивная верстка – это адаптация десктопной версии сайта, поэтому придется делать новый функционал на всех страницах сайта.
Адаптивный дизайн, несомненно, является универсальным вариантом. Если выбор пал на него, перед началом работ обязательно стоит планировать структуру и функционал сайта таким образом, чтобы они были удобны при просмотре с разных устройств и не было необходимости скрывать часть функционала.
Мобильная версия сайта – это отдельная версия сайта, которая разработана исключительно для пользователей смартфонов. В зависимости от того, с какого устройства заходит пользователь, автоматически происходит определение экрана устройства и запускается переадресация на мобильную или на десктопную версию сайта.
Портфолио по данному проекту можно посмотреть на Behance.
Преимущества мобильной версии:
- Проработанный UX-дизайн. Поскольку мобильная версия создается как отдельный сайт, то на этапе дизайна можно корректировать логику взаимодействия и перегруженность страниц, сократив при этом время на совершение целевого действия.
- Быстрая загрузка страниц из-за отсутствия чрезмерного для смартфонов функционала.
- Возможность в любой момент переключиться на десктопную версию сайта, если возникнут какие-либо проблемы.
- Создание полноценного мобильного контента. Контент в таком случае можно публиковать, не оглядываясь на десктопную версию.
Недостаток мобильной версии: увеличение затрат на разработку и SEO-продвижение, так как разрабатывать и продвигать необходимо будет две версии сайта.
Мы рекомендуем разработать мобильную версию, если:
- Вам нужно сделать разную бизнес-логику для пользователей мобильной и десктопной версий.
- Вы ориентируетесь на плотное привлечение органического трафика из поисковых систем Yandex и Google.
- Посещаемость текущей версии с мобильных устройств > 50%.
- Вы планируете создать мобильное приложение с помощью технологии создания PWA-приложений.
- Бюджет позволяет сделать две версии.
В остальных случаях достаточно будет адаптивной версии.
Простите, но статья тупейшая. Вы же создаёте сайты, могли бы спросить у ваших дизайнеров и фронтендеров, как это всё корректно преподнести. Для примера:
Недостатки адаптивного дизайна:
1. «Большой вес страниц и, как следствие, долгая загрузка сайта. Если на десктопе есть «тяжелые» элементы, в мобильной версии они могут тормозить загрузку страниц сайта».
Конечно это не так, зачем вообще показывать «тяжёлые» элементы на мобильных устройствах? просто отключите их видимость и загрузку при помощи css.
2. «При посещении сайта со смартфона иногда приходится долго искать информацию, так как весь функционал и все блоки остаются теми же, что и на десктопной версии».
Тоже нет! Можете менять местами блоки, можете какие-то отображать, какие-то отключать, в зависимости от того, на каком устройстве просматривается сайт.
3. «Ограничения по добавлению нового функционала».
Какие вообще ограничения? Не могу представить такой функционал, который можно сделать на десктопе, но нельзя на планшете, например.
Здравствуйте, отвечая на Ваш комментарий:
1. Представьте, что вся изюминка проекта проекта состоит из таких «тяжёлых” элементов, и если их просто отключить мы не получим такого же опыта и вау эффекта. В пример можно привести сайт студии dogstudio.co. Мы думаем, что если посмотреть на этот прекрасный сайт и с десктопа и с мобильного телефона комментарии не потребуются.
2. Да, действительно, вы правы. Но как правило при разработке адаптивной версии, структура проекта в большинстве случаев повторяет десктопную версию. Если при разработке сайта важен акцент на мобильных устройствах, то стоит разрабатывать мобильную версию.
3. Например, размеры экранов и могут быть препятствием. Допустим, существует бизнес-требование отображать на мобильных устройствах столько же информации, сколько и на десктопной версии. Или в какой-то момент времени потребуется экранная клавиатура для ввода данных, а проект подразумевает WYSIWYG-редактирование. Или сделать такой же детализированный и функциональный слайдер как на десктопной версии.
Что такое адаптивный дизайн, и почему адаптивная верстка сайта дороже?
Адаптивность — одно из ключевых требований, предъявляемых к современным сайтам. Ресурс должен одинаково хорошо демонстрироваться на экране компьютера, планшете, смартфоне. Для этого создается адаптивный дизайн и используется адаптивная верстка. В итоге процесс веб-разработки усложняется, требует дополнительных ресурсов. Но результат стоит вложений: сайт отлично позиционируется на всех основных типах устройств, что гарантирует полноценный охват аудитории.
Адаптивность — это способность сайта «подстраиваться» под различные технические условия (а именно, под размеры экрана пользовательского устройства). Адаптивный сайт хорошо смотрится и на десктопном мониторе (обычный ПК), и на планшетном компьютере, и на экране смартфона. Причем качество отображения не зависит ни от диагонали, ни от позиционирования экрана.
Адаптивная верстка — это такой способ создания веб-страниц, при котором они автоматически подстраиваются под размеры и ориентацию экрана устройства, а их дизайн варьируется в зависимости от действий пользователя.
Цель адаптивной верстки — добиться того, чтобы сайт оставался удобным и обеспечивал конверсию при загрузке на разных устройствах.
Сегодня около 50% пользователей посещают сайты с гаджетов — смартфонов, планшетов. Это удобно, ведь можно серфить по сети, находясь в любой точке пространства (где есть интернет) — лежа в кровати, на улице, в транспорте. Мобильная аудитория постоянно растет, и игнорировать ее потребности нельзя. Вот почему разработчики адаптируют сайты под портативные устройства.
Раньше, когда доля мобильной аудитории была сравнительно невелика, адаптивная верстка не считалась чем-то крайне необходимым. Теперь вопрос об адаптивности поднимается в обязательном порядке — это один из пунктов брифа на разработку сайта, который веб-студия высылает клиенту в самом начале сотрудничества.
Современные сайты конкурируют между собой, борясь за внимание и расположение людей. При этом пользователи все более критично относятся к тому, насколько удобно взаимодействовать с тем или иным ресурсом. Чем проще и комфортнее на сайте — тем больше привлекаемая им аудитория.
Судите сами, останетесь ли вы на страничке, когда на экране отображается лишь ее часть, а отдельные элементы дизайна «наползают» друг на друга? Это мешает, а иногда и не дает воспринимать информацию. Такой сайт раздражает, и как следствие — получает отказ. Пользователь закрывает страницу и переходит к конкуренту.
Не адаптированные (фиксированные) сайты плохо приспособлены к тому, чтобы демонстрироваться на мобильных устройствах. В лучшем случае, чтобы посмотреть страницу полностью, приходится использовать горизонтальную прокрутку. Текст зачастую не читается, а изображения занимают весь экран.
Совершить какое-либо конверсионное действие (например, заполнить форму заявки) на не адаптированном сайте и вовсе проблема.
Сайт, не адаптированный под устройства с небольшим экраном, неизбежно теряет часть мобильных пользователей. А это означает дополнительные отказы. Мало того что сайт теряет аудиторию — так он еще и проигрывает в ранжировании. Поисковые системы (Яндекс, Google) учитывают количество отказов: чем их больше — тем ниже опускается ресурс в выдаче.
Важно! Адаптивность — один из прямых факторов ранжирования. Поисковые системы учитывают, насколько сайт «mobile-friendly», и если нет — понижают его в рейтинге.
С 2018 года Google при ранжировании сайтов следует правилу Mobile-first index. Это означает, что поисковик в первую очередь анализирует тот контент, что отображается на мобильных устройствах. А ранжирование десктопных версий сайтов теперь подчиняется мобильной выдаче. Причем содержимое мобильной и десктопной версий должно быть идентичным, то есть приоритет отдается именно адаптивным ресурсам.
Получается, что из-за отсутствия адаптивности к мобильным устройствам страдает все поисковое продвижение. Не адаптированный для смартфонов и планшетов сайт сложнее найти и с компьютера. Охват аудитории сокращается, и бизнес теряет потенциальных клиентов.
Сайты, адаптированные к мобильным устройствам, обеспечивают более высокие продажи. Ведь около половины посетителей ресурса открывают его с гаджета (смартфона, планшета). И наоборот, «криво» отображающийся на смартфоне сайт теряет львиную долю горячих клиентов из числа мобильных пользователей.
Следует различать адаптивность сайта и создание отдельной мобильной версии.
Адаптивная верстка — это неотъемлемая часть самого сайта. При таком подходе создается один ресурс, предназначенный для разных типов устройств. Он может быть более сложно устроен, содержит несколько разновидностей элементов дизайна. Зато администрировать его проще: например, чтобы поменять цены, достаточно внести изменение в одном месте, и оно будет отображаться везде.
Мобильная версия — это, по сути, отдельный сайт, который создается специально для отображения на маленьких экранах. Он максимально оптимизирован под мобильные устройства. Но администрирование усложняется — ведь теперь приходится вносить изменения не в один, а в два сайта. Это требует дополнительных ресурсов.
Адаптивный сайт в большинстве случаев обходится дороже обычного неадаптированного. Это объясняется большей трудоемкостью разработки.
Во-первых, для адаптивного дизайна необходимо создать несколько вариантов макетов — под разные размеры. Кроме того, требуется дополнительное проектирование для каждой версии. На это уходит больше усилий и времени веб-дизайнера. Следовательно, увеличиваются и сроки, и стоимость разработки.
Во-вторых, адаптивная верстка сложнее. Реализовать ее — более трудоемкий процесс. Для этого существует несколько способов, и разработчик выбирает наиболее подходящее, на его взгляд, решение.
В-третьих, повышается объем тестирования. Прежде чем запустить интернет-проект в мир, его необходимо тщательно протестировать. В случае с адаптивным сайтом, все элементы тестируются последовательно на десктопах, смартфонах и планшетах.
Конечная стоимость адаптивного ресурса может отличаться от неадаптивного на 25-50%, в зависимости от типа и особенностей ресурса, выбранных технических решений и индивидуальных требований заказчика. Цена уточняется после анализа брифа и обсуждения техзадания.
Зачем нужна адаптивность для сайта?
Введение
К нам на продвижение зачастую приходят сайты, сделанные недавно, но новичками-программистами, а потому сверстанные криво и неаккуратно. А также сайты, которые были сделаны 7-10 лет назад, по старым стандартам, с устаревшим дизайном. Но если дизайн — это мнение субъективное, то стандарты меняются со временем и им надо следовать. В эпоху html5 табличная верстка и прописывание стилей inline’ом уже просто неприемлемы. Хотя раньше с помощью таблиц верстались почти все сайты.
Клиенты не хотят в это вникать, они смотрят на сайт, и для них он вполне нормален, но если заглянуть в код, то ошибка на ошибке и ошибкой погоняет. Что уже не нормально для поисковых систем: робот из-за ошибок не может правильно обработать контент. А ведь именно для поискового продвижения заказчики к нам и обращаются. Хотят продвинуть свой сайт. И мы знаем свое дело и выводим сайты в ТОП, вы всегда можете посмотреть наши кейсы по продвижению сайтов. Но что делать, если пришел на продвижение сайт, а у него вот такая ситуация: почти 100 ошибок, табличная верстка и верстали его по старым стандартам, местами забывая закрывать парные теги?
.png)
Ответ очевиден: это надо исправлять. Приводить к общим стандартам html5. Наши программисты без проблем решают подобные задачи.
Адаптивность
Выше мы рассмотрели только одну сторону сайтов, сделанных давно и по древним стандартам. Другая сторона заключается в адаптивности сайтов, и на ней мы остановимся более подробно. Адаптивный дизайн — это когда сайт разрабатывается с учетом того, что он будет одинаково удобен для просмотра с десктопа, планшета или смартфона.
Многие не понимают, насколько это важно, тем не менее с каждым годом поисковые системы ужесточают правила ранжирования для сайтов. И адаптивность уже не бонус или жирный плюс, а норма среди сайтов. И если у сайта нет адаптивного дизайна, он уже начинает проигрывать конкурентам. Google прямо заявляет, что адаптивный дизайн является одним из факторов ранжирования.
Почему так сложилась ситуация?
Тут все просто. Слишком быстрое развитие гаджетов с выходом в интернет. Сотовые телефоны очень быстро превратились в смартфоны — портативные компьютеры, через которые люди играют в игры, смотрят фильмы, ищут информацию в интернете, покупают в интернет-магазинах и т.д. Трафик с мобильных устройств на некоторых сайтах достигает 80% (!).
По прогнозу компании Cisco трафик мобильных устройств к 2021 году достигнет 49 Эксабайт (1 Эксайбайт = 1024 Петабайта = 1024 Терабайта = 1024 Гигабайта)
Поисковые системы должны дать самый лучший и релевантный ответ по запросу пользователя. Поэтому предпочтение отдается тем сайтам, которые имеют адаптивный и удобный для пользователя дизайн. А значит, если сравнивать двух конкурентов, то больше трафика получит тот, у кого дизайн приспособлен и под десктоп, и под мобильные устройства.
В условиях огромной конкуренции каждая мелочь может стать решающей. И потерять, допустим, оптового покупателя лишь потому, что поленились сделать адаптивный дизайн, как минимум нерационально.
А точно ли нужен адаптивный дизайн?
Но порой и вышеприведенные доводы не могут пронять и убедить клиента. Он считает, что у него же не 80% трафика с мобильных устройств, а всего лишь 10%. Подумаешь, 10 клиентов из 100 не дошли до него. Но на самом деле получается так, что эти 10% пользователей превращаются в 10% отказов. А это уже значительный прирост к имеющимся и так отказам. В итоге страдают поведенческие факторы и сайт понижается в позициях.
Данный график показывает, что почти половина посетителей с мобильных устройств покидают сайт сразу, как только видят, что дизайн не адаптивный. Отказов с десктопа всего 4,5%.
Сейчас поисковые системы большое внимание уделяют удобству пользователей, а как его измерить? Правильно, с помощью поведенческих метрик. В итоге имеем вроде красивый и хороший сайт, но без адаптивной верстки, а соответственно, с заниженными позициями. У конкурентов посредственный сайт, но с мобильной версией и ранжируется лучше. Потому что он удобен абсолютно всем посетителям.
Заключение
Данная статья ориентирована прежде всего на клиентов и на тех, кто еще думает, нужен адаптивный дизайн или нет. Наш ответ: однозначно ДА, НУЖЕН! Сейчас те, кто выполняет все рекомендации поисковых систем, находятся в ТОПе, остальные в хвосте выдачи. Если вам безразлично удобство пользователей вашего сайта, то первых позиций не видать.
Всегда думайте о своих посетителях, делайте аудиты по юзабилити, проводите A/B тестирования, просите друзей и знакомых оценить удобство сайта. Только тогда ваш сайт станет действительно полезным для пользователей, а значит, и релевантным со стороны поисковых систем.
Так же обратите внимание на другие наши услуги: