Недавно мы писали про адаптивный дизайн. Там мы разобрали, зачем нужен адаптивный дизайн, какие от него плюсы. Как следует из статьи, адаптивный дизайн нужен, и нужен всем. Сегодня же мы рассмотрим, что лучше для сайта: адаптивный дизайн или отдельная мобильная версия.
Читайте такжеЗачем нужна адаптивность для сайта?Мобильная версия
Мобильная версия сайта — это отдельная его версия, предназначенная для смартфонов и планшетов. Как правило, имеет дизайн, оптимизированный под мобильные устройства, чтобы контент подавался в удобочитаемом виде и загрузка происходила почти мгновенно. Обычно выносится на поддомен в виде m.site.ru или mobile.site.ru.
Преимущества
Удобство
Пользователям не надо скролить вперед-назад и по диагонали в поисках нужного контента, увеличивать-уменьшать для того, чтобы прочитать нужный текст. Весь сайт подается в одной колонке, которую нужно прокручивать сверху вниз. Весь контент, как правило, структурирован и разбит на логические блоки.
Скорость загрузки
Как правило, дизайн мобильной версии очень упрощен, а код и скрипты минимизированы, благодаря чему достигается очень быстрая загрузка сайта на мобильных устройствах.
Правки по сайту
Мобильная версия по факту является отдельным сайтом, а значит внести правки не представляет труда. Не надо заботиться и переживать, как сделать, чтобы изменения коснулись только мобильной версии и не затронули десктопную.
Переход на основную версию
В большинстве случаев пользователь сможет без проблем перейти на основную версию сайта, если ему надо будет воспользоваться функционалом, недоступным в мобильной версии.
Недостатки
Дублирование
Дублирование контента на разных поддоменах негативно сказывается на поисковом продвижении. Как правило, созданием мобильной версии занимаются программисты, а продвижением – SEO-специалисты. И даже если на тестовом варианте учтены все пожелания SEO-специалистов, не факт, что на боевой вариант они перекочуют в исходном виде. Часто при переносе что-то меняется, что-то добавляется. В итоге можем получить проблемы с ранжированием из-за дублей в мобильной версии.
Обновление
Весь контент, добавленный на основной сайт, придется дублировать и на мобильной версии. А если сайт, например, является новостным порталом и обновляется ежедневно, это может стать вполне затратным процессом.
Ограничение функционала
В мобильной версии зачастую не переносятся тяжелые решения функциональности. Обычно перед созданием мобильного сайта анализируются запросы и поведение пользователей с мобильных устройств и на основании этих данных дается лишь то, что и правда важно для мобильных посетителей.
Мобильная версия себя хорошо зарекомендовала и до сих пор часто используется веб-мастерами. То же самое можно отнести и к мобильным приложениям. Но это уже очень затратно, и обычный среднестатистический сайт не может позволить себе разработку мобильных приложений.
Адаптивная верстка
Адаптивно сверстанный сайт одинаково удобно отображается как на десктопе, так и на мобильных устройствах.
Преимущества
Удобство реализации
Как правило, при адаптивной верстке ширина экрана подгоняется под нужный размер дисплея. Все это можно реализовать посредством HTML и CSS. А современные CMS и фреймворки позволяют сделать это буквально в пару кликов. Да и современные шаблоны уже сразу предоставляют адаптивный дизайн. Остается только его установить? и за пару минут у вас адаптивный дизайн, который удобен для любой аудитории.
SEO
Если в мобильной версии мы сталкиваемся с дублированием контента на разных поддоменах, то здесь подобной проблемы нет. У страницы будет один адрес (URL)? и при изменении разрешения экрана либо устройства у нас не будет ломаться дизайн или нас не будут перенаправлять на мобильную версию. Этот вариант лучше решает проблему дублирования контента, нежели атрибуты rel="canonical" или запреты в robots.txt на мобильной версии.
Недостатки
Тяжеловесность
Обычно при адаптивности оставляют весь функционал, доступный пользователям. А значит мобильные посетители могут столкнуться с нагромождением скриптов и большим количеством информации, которую будет сложно сразу охватить на небольшом дисплее смартфона. Если для десктопа нормально иметь размер в 200-250 Кб, то мобильная обычно занимает менее 50 Кб.
Цели посещения
Зачастую пользователи заходят на сайт, чтобы узнать контактные данные, схему проезда, наличие филиалов и т.д. И на некоторых сайтах им придется перейти по нескольким тяжелым страницам, чтобы достичь своей цели.
Нет выбора
На мобильной версии, если программист криво наверстал блок и скрыл телефоны за логотипом, вы всегда можете переключиться в десктопную версию и хоть с масштабированием, но посмотреть контактные данные. Если же программист накосячит при адаптивной верстке, то вам придется постараться, чтобы узнать то, что вы хотите, да и не каждый это сможет. Поэтому адаптивный дизайн надо изначально очень хорошо и грамотно верстать, а потом так же грамотно тестировать.
Итог: адаптивная верстка или мобильная версия?
Нет здесь единого правильного ответа. Под каждые задачи выбирается оптимальный вариант. И адаптивный дизайн, который идеально подходит для одного сайта, в другом случае вызовет лишь проблемы, связанные с удобством пользования сайтом. Крупным игрокам и громоздким сайтам, возможно, вообще проще сделать мобильное приложение, в котором будет только нужный для пользователей функционал.
Наше мнение, что если у вас только информационный сайт, то отлично подойдет адаптивный дизайн. Так как сжимать текст и картинки куда проще, чем решать, как же переверстать огромный калькулятор на сайте без потери юзабилити.
А вот если у вас на сайте присутствует личный кабинет с огромным функционалом или его сайт будет тяжело перенести на адаптивный дизайн, то проще сделать мобильную версию, где удобно расположить все инструменты для пользователей.
Ну, а если у вас еще нет сайта, и вы только задумываетесь над его созданием, то лучше сразу закладывать адаптивный дизайн в разработку.
Хочу написать про создание мобильной версии сайта. Тут конечно много можно рассуждать на тему, что мобильная версия это просто, можно даже закидать тапками насчет того, что там делать работы на пару часов. Я сколько ни ходила по этим форумам, не вычитывала как сделать нормальный адаптивный дизайн сайта. Мне вот ничего не понятно. Да, прописаны все ошибки, прописано как исправить ошибки, а что толку, наверное все равно нужно хоть немного разбираться как создавать то сайт. А мне достался готовый сайт, с просто ужасной мобильной версией, с ошибками и еще кучей всего. Я надумала как исправлять и ничего не поняла.. Обратилась сюда, httр://www.mоbilе-vеrsiоn.ru/не по каким то критериям, просто выбрала. Нормальная цена, быстро делают, общаются в переписке также нормально. Предоставила им в исправление сайт, у меня кстати сайт путешествий, вот все это пришлось им переделывать. По сути исправили очень много ошибок, из непонятного дизайна сделали нормальный, удобочитаемый вариант. Мне все понравилось, сайт быстро грузится, скролингом удобно проматывать вниз, легко зайти и оформить заказ. Картинки видны. Тексты не мелкие, ничего друг на друга не заползает. Все профессионально выполнено.
Зачем нужна адаптация сайта или по другому - мобильная версия сайта? Думаю все предприниматели и держатели интернет-магазинов сталкивались с таким вопросом. Вот и мне удалось столкнуться. Сначала, как только интернет-магазин открылся и я дала хорошую рекламу все было хорошо и покупатели конечно были. Но узнала, что их может быть больше если будет у моего сайта мобильная верстка. И это логично, ведь многие операции мы совершаем не открывая компьютер, удобнее это сделать со своего смартфона, который у каждого всегда под рукой. Решено - буду адаптировать сайт под мобильное устройство - подумала я. Стала искать компании, которые этим занимаются. Но цены огого, а гарантий никаких и отзывы не лестные. Нашла ваш сайт. Почитала ваш блог, изучила информацию. Заинтересовала эта компания потому что не нашла о ней ничего плохого, а цены и описание работ, которые они делают вполне меня устроили. Обратилась сюда. О стоимости я уже говорила, она не высокая. Но порадовало еще и то, что ребята сделали работу в кратчайший срок, за два дня у меня уже была готова мобильная версия моего сайта. Спасибо, ребят!
Здравствуйте. Спасибо большое за развернутый отзыв. Мы рады, когда наши клиенты довольны. Всегда можете рассчитывать на нашу помощь.
Спасибо вам за информационную и довольно интересную статью!
Какой плагин вы порекомендуете для адаптации сайта на Вордпрессе?
Существует множество плагинов для адаптации сайта под мобильные устройства. Например, WPtouch, Any Mobile Theme Switcher, JetPack. Но, все же, лучший плагин для качественной адаптации - это умелые руки специалиста!
Для мобильной версии пункт "Обновление" вообще из каких годов взяли - когда сайты статические были? Мобильная версия это не отдельный сайт, а отдельный фронтенд. Бэкенд при этом один и тот же как для полной версии так и для мобильной. И вся информация должна тянуться из одного общего API, а не храниться в разных базах на разных доменах.
Мы рады, что вы идете в ногу со временем, но мы до сих пор встречаем разработчиков, которые делают мобильную версию отдельным сайтом, с отдельной БД. Как правило, к нам уже приходят готовые сайты, а не в стадии разработки. Поэтому и приходится работать с тем, что имеем, переделывая функционал под нынешние реалии веб-разработки.