Главное Свежее Вакансии Образование
4 959 6 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Адаптивный дизайн VS мобильная версия сайта и опыт клиентов Nethouse

Существует два варианта оптимизации сайта для смартфонов и планшетов: адаптивная верстка и мобильная версия. Рассмотрим, чем отличаются эти способы, узнаем их плюсы и минусы, а также опыт клиентов платформы для создания сайтов Nethouse.

С каждым годом посетители все чаще заходят в Интернет и осуществляют покупки с мобильных устройств. С них, согласно данным Яндекс.Метрики от весны 2016 года, в России совершается 29% всех визитов на сайты, и эта цифра постоянно растет.

Поисковые системы, которые всегда ратуют за удобство конечного пользователя, рекомендуют делать свои сайты удобоваримыми для различных устройств. Теперь при ранжировании в мобильной выдаче учитывается, оптимизирована ли страница для смартфонов/планшетов или нет. Поэтому при создании сайта лучше сразу задуматься об этом. Если же сайт уже есть и работает, то необходимо его оптимизировать, чтобы идти в ногу со временем и не терять потенциальных клиентов, использующих мобильные устройства.

Существует два варианта оптимизации сайта для смартфонов и планшетов: адаптивная верстка и мобильная версия. Рассмотрим, чем отличаются эти способы, узнаем их плюсы и минусы.

Адаптивный дизайн

Главная особенность в том, что все элементы интерфейса автоматически подстраиваются под экраны различных размеров. Благодаря этому такие сайты одинаково хорошо и удобно отображаются на персональных компьютерах, ноутбуках, смартфонах и планшетах.

Преимущества:

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

Недостатки:

Основным недостатком этого варианта является то, что он не решает проблему скорости загрузки сайта. И на компьютере, и на мобильном устройстве при открытии адаптивного сайта загружается одинаковый объем информации. Следовательно, важно учитывать, что сайт, который на ПК откроется моментально, на смартфоне или планшете, использующем мобильный интернет, будет открываться медленно.

Мобильная версия

Мобильная версия предполагает, что создается два сайта: основной для просмотра с компьютеров и мобильный для смартфонов и планшетов.

Преимущества:

  • так же, как и адаптивная верстка, мобильная версия лучше ранжируется в мобильной выдаче;
  • возможность размещать на сайте только тот функционал и контент, который необходим для смартфонов и планшетов;
  • меню, навигацию и другие элементы дизайна можно полностью подстроить под нужды мобильных пользователей;
  • основную (для компьютеров) и мобильную версии можно изменять независимо друг от друга;
  • быстрое время загрузки.

Недостатки:

  • необходимость тратить ресурсы на поддержку и управление двумя ресурсами одновременно, следить за актуальностью информации на обоих;
  • при размещении контента необходимо для начала адаптировать его еще и под мобильные устройства, а затем опубликовать дважды: на основной и мобильной версии;
  • необходимость настройки редиректов;
  • проблема с дублированием контента - одна статья имеет два разных адреса, что негативно влияет на показатель уникальности и эффективность отображения в поисковиках;
  • мобильная версия сайта требует больших вложений: нужно учитывать расходы на разработку, обновление мобильной версии и покупку отдельного домена.

Итоги сравнения

Исходя из вышеизложенных преимуществ и недостатков двух вариантов оптимизации сайта под мобильные устройства, мы рекомендуем переходить на адаптивную верстку: этот вариант не только менее затратен по расходам и времени по сравнению с мобильной версией, но и позволяет удобно управлять сайтом.

Опыт платформы для создания сайтов Nethouse

На базе Nethouse сегодня работает более 50 000 активных ресурсов: интернет-магазинов, сайтов фирм и специалистов, лендингов, портфолио и блогов. В декабре 2016 мы запустили новые адаптивные шаблоны и предложили пользователям перейти на них в пару кликов мыши, без потери информации и абсолютно бесплатно.

На сегодняшний день на адаптивные шаблоны перешли около 25% наших пользователей. Давайте посмотрим, как это отразилось на статистике их сайтов.

1. Поисковый трафик.

Некоторые наши пользователи переживали, что переход на адаптивный дизайн может отрицательно повлиять на трафик, и придется ждать, пока он восстановится. По графикам ниже видно, что этого не произошло.

b_58f49146a58f0.jpg

b_58f491515910a.jpg

b_58f49159bf517.jpg

2. Поисковый мобильный трафик.

Поисковые системы ранжируют адаптивные сайты выше в мобильной выдаче, а Google даже в десктопной версии выдачи помечает сайты без адаптивности строкой "Ваша страница не оптимизирована для смартфонов". На графиках ниже видно, что после перехода на адаптивную верстку поисковый трафик со смартфонов постоянно увеличивается.

b_58f4916335327.jpg

b_58f4916c477ba.jpg

b_58f49174aa511.jpg

b_58f4917fcb308.jpg

3. Поведенческие факторы.

Адаптивный дизайн не только отлично выглядит и внешне отвечает всем требованиям современных трендов, но и улучшает поведенческие показатели сайтов, такие как показатель отказов, глубина просмотра и время на сайте, что особенно актуально для трафика с мобильных устройств. На графиках ниже представлены изменения статистики по поведенческим факторам в сравнении периодов "до" смены шаблона и "после".

b_58f49188c1337.jpg

b_58f491923d4d0.jpg

b_58f4919b84582.jpg

Обратите внимание, показатели отказов стали меньше, глубина просмотра и время на сайте увеличились. Поведенческие факторы стали лучше не только у трафика со смартфонов, но и практически со всех устройств.

Вывод:

Переход на адаптивный дизайн позитивно влияет на трафик сайта из поисковых систем и поведенческие факторы. Отрицательных моментов не обнаружено.

В материале использовалась статистика сайтов:

+2
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Артём К
Мягко говоря бред, про управления двумя ресурсами при мобильной версии сайта. Либо мобильная версия разительно будет отличаться от адаптивной версии, что и позволяет сделать вывод о двух разных ресурсах. Либо экономия на спичках при разработке мобильной версии сайта.

Дублирование контента и настройки редериктов это не недостатки мобильной версии, это недостатки компетенций или финансирования.
Ответить
Монарх
Интернет-магазин профессиональной техники и моющих средств для клининга
Виталий Захаров
И как подключить мобильную версию сайта, если у меня интернет-магазин?
Ответить
Nethouse
ведущая российская платформа для создания сайтов
Александр Петренко
Если вы пользователь Nethouse, можно перейти на один из адаптивных шаблонов.
Ответить
Монарх
Интернет-магазин профессиональной техники и моющих средств для клининга
Виталий Захаров
Их там разве не три? Для ИМ подойдут? Очень прошу кинуть ссылку на примеры адаптированных сайтов. Думаю и другим пригодится))))
Ответить
Nethouse
ведущая российская платформа для создания сайтов
Александр Петренко
На сегодняшний день их 5. Вам подойдет один из тех, что в блоке "Профессиональный" (помечены синим ярлычком). Примеры: http://volkoshapka.ru, https://de-walt.ru.
Ответить
Irina Romanova
Статья интересная, но если вы не специалист, то самостоятельно разобраться во всех тонкостях адаптации сайта под мобильные устройства довольно тяжело. У меня уже около полутора лет есть магазин по продаже товаров из Индии и Непала, сейчас эта тематика интересная, посетителей реального магазина довольно много. Но вот около полугода назад постоянные покупатели стали просить меня создать интернет-магазин, чтобы можно было быстро и удобно заказать или забронировать понравившийся товар, узнать о наличии товаров, проводимых скидках и акциях... Да и новых покупателей можно привлечь через интернет-сайт, что важно. Интернет сейчас рулит, конечно. Заказала создание сайта, загрузку контента - всё сделали отлично. Но потом посетители уже созданного сайта стали обращаться ко мне с просьбой сделать возможным мобильную версию сайта, т.е. адаптировать имеющийся сайт для просмотра с мобильных устройств. В имеющейся версии при заходе со смартфона или планшета выходил "перекос" картинки, товары отображались коряво, некоторые пункты меню вообще слетали за границы обзора, шрифт мелкий. У некоторых сайт вообще не загружался или загружался кусочками. Естественно, ни о каком заказе товара, получении информации и речи не было при таком отображении. Так же у меня есть реклама партнёров на сайте, она тоже некорректно отображалась при заходе со смартфона, чем, конечно, партнёры были недовольны. Надо было что-то делать с этим. Обратилась в ту же компанию, которая создавала сайт, но они сказали, что такой услуги не предоставляют. Пробовала разобраться со всем сама, но только впустую потратила свободные часы. Пришлось искать тех, кто может этим заняться. В поисках я на своё счастье нашла сайт http://www.mobile-version.ru Эти ребята адаптируют ваш сайт для мобильных устройств. Подробно всё объяснили, рассказали, что и как будет, чего мне ждать. Сделали всё невероятно быстро! 3 дня! Я дольше думала о том, как это сделать, стоит или нет, кого искать, пробовала сама и т.д. Сайт теперь спокойно открывается и отображается без проблем со всех платформ, и с планшетов, и с мобильников. Есть удобное адаптивное меню. Автоматически масштабируется сайт под размеры устройства, притом благодаря специальной кнопочке можно быстро переключиться с мобильной версии на обычную и наоборот. Шрифт самое то, все важные элементы (контакты, корзина, акции и т.д.) теперь хорошо видны, по ссылке легко пройти, не то, что раньше - фиг попадёшь в нужную строчку. Цена за такую отличную работу низкая, до окончательного решения сотрудничать с http://www.mobile-version.ru сравнивала цены у других разработчиков. Ещё и по скорости эти ребята впереди всех. Сайт после адаптации проходит тесты на мобильность Гугла и Яндекса (проверку можно провести прямо на сайте mobile-version.ru). В поиске со смартфона мой сайт теперь выше по списку, хотя мой сайт моложе других. Благодаря адаптивному дизайну посещаемость сайта и заказы товара выросли в разы! Соответственно, увеличилась прибыль, что мне, как, можно сказать, частному предпринимателю-новичку, огромный бонус. Сайт с адаптацией работает уже долгое время и никаких проблем, сбоев не возникало.
Очень рада сотрудничеству с http://www.mobile-version.ru и жалею, что не обратилась за их услугами раньше. Теперь знаю точно: в сложных ситуациях, работах, где вы новичок, лучше не тратить своё время и нервы, а обратиться за помощью к специалистам.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.