Адаптация сайтов под мобильные устройства

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

adaptaciya_saytov_pod_mobilnye_ustroystva

Новые алгоритмы Google заставят владельцев сайтов пересмотреть свою политику

Как  известно, с апреля 2015 года компания Google ввела новые критерии ранжирования сайтов, согласно их мобильной совместимости. Прогнозируется, что в скором времени позиции сайтов, не имеющих мобильной версии или адаптивного дизайна, заметно упадут в выдаче.  Безусловно, для многих владельцев сайта эти новшества — лишняя проблема и трата денег, но для кого-то — это шанс подняться в рейтинге поисковиков. Так или иначе, вопрос об оптимизации сайтов под мобильные устройства стал как никогда актуальным. Теперь, чтобы пройти тест Google на «мобильную совместимость», нужно учесть множество факторов: размер шрифта, расстояние между гиперссылками, наличие адаптированного дизайна и т. д. Конечно, же тест на «mobile friendliness» – лишь один из нескольких критериев, по которым Google будет определять положение сайта в результатах выдачи. Но, следует сказать, критерий очень серьезный. На официальном блоге Google утверждают, что мобильная совместимость значительно повлияет на положение сайта в выдаче. В частности, данное обновление повлияет на следующие моменты:

  • Мобильная совместимость отразится на позиции сайта в выдаче, если поиск осуществляется через мобильные устройства.
  • Обновление затронет результаты поиска на всех языках во всем мире.
  • Также, обновление повлияет на рейтинг отдельных страниц, а не сайта целиком.

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

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

Адаптивный дизайн уже несколько лет в тренде. Он буквально «адаптирует» изображение страниц сайта к любому дисплею и устройству, которое использует пользователь. Большим плюсом для владельцев сайтов является то, что с адаптивным дизайном нужно создать единственную версию сайта, а затем при помощи CSS и Javascript адаптировать размер и расположение элементов на экране. Но не все так однозначно. Существуют сайты больших компаний и корпораций, с надежной репутацией и довольно объемной структурой, которую сложно адаптировать в неизменном виде для мобильных устройств.

adaptaciya_saytov_pod_mobilnye_ustroystva

Более того, следует понимать, что часто пользователь стационарного компьютера и пользователь мобильного устройства заходят на сайт с абсолютно разной целью. Мобильных пользователей, прежде всего, интересует контактная информация и форма заказа, в то время как для пользователей стационарных компьютеров будет в приоритете описание деталей, визуальный ряд. В таких случаях, действительно, есть смысл делать мобильную версию сайта. Хороший пример — сайт по продаже свадебных платьев. Со стационарного компьютера пользователь зайдет на такой сайт, чтобы повнимательнее ознакомится с коллекцией, увидеть мелкие детали платьев, украшений и т. д. Если же пользователь зашел на этот же сайт с мобильного устройства, то, вероятнее всего, его будет интересовать адрес ближайшего магазина, где можно примерить платья, карта или номер телефона. Чтобы понять, какой вариант подходит Вам — адаптивный дизайн или же полноценная мобильная версия сайта — Вы должны хорошо изучить свою аудиторию, проследить, какие страницы посещают пользователи, зашедшие со стационарных компьютеров и с портативных устройств.

Адаптивная верстка сайтов: плюсы и минусы

При адаптивной верстке создается своего рода «резиновый» дизайн, который учитывает пропорции различных мобильных устройств, приоритет отображаемых элементов и изображений. Также, адаптивный дизайн задает разные стили для различных типов устройств и размеров экранов.

Преимущества адаптивного дизайна:

  • Сайт одинаково хорошо отображается на различных типах устройств.
  • Экономится время на создание других версий сайта. Сайт имеет одинаковую структуру и контент, один набор кодов.
  • Сайт имеет один URL, так как отсутствует переадресация на мобильную версию. Это проще и для пользователя, и для продвижения сайта.
  • Адаптивный дизайн отличают эстетика и лаконичность. Многие эксперты считают, что именно за ним будущее.

Минусы адаптивного дизайна:

  • Скорость загрузки контента может отличаться на различных мобильных устройствах.
  • Ограничение в дизайне, контенте. Нужно понимать, что если сайт будет «тяжелым», со множеством интерактивных элементов, качественных изображений, то это отразится на скорости загрузки с мобильных устройств.
  • Различные задачи: цели мобильных пользователей могут отличаться от целей пользователей стационарных устройств. Так, если Вы знаете, что большая часть мобильных пользователей заходят на Ваш сайт, чтобы заполнить форму, то второстепенные разделы могут оказаться ненужными и вызывающими раздражение. Для таких случаев адаптивный дизайн может быть не лучшим вариантом.

Адаптивный дизайн сайта Adme.ru: так сайт отображается на ПК.

adaptaciya_saytov_pod_mobilnye_ustroystva

 

Адаптивный дизайн сайта Adme.ru: так сайт выглядит на мобильном устройстве.

adaptaciya_saytov_pod_mobilnye_ustroystva

Мобильная версия сайтов: плюсы и минусы

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

Плюсы мобильной верстки:

  • Нет ограничений на дизайн и контент, так как по сути версии сайтов являются отдельными полноценным единицами и их содержание и оформление могут отличаться.
  • Подходит для крупных сайтов, на которых применить адаптивный дизайн без изменения содержания довольно сложно. Так, например, такие сайты-гиганты, как eBay (m.ebay.com) или Walmart (mobile.walmart.com), используют мобильную версию сайта. В их случае, сделать адаптивный дизайн с сохранением всего массива информации практически невозможно. Создание отдельных мобильных версий предпочитают в основном сайты-ретейлеры, на которых содержится большое количество разделов и категорий.
  • Это идеальный вариант, если у Вас уже есть готовый сайт, который Вы бы не хотели менять. В таком случае целесообразнее будет создать отдельную мобильную версию.
  • Быстрая загрузка, благодаря тому, что файлы мобильной версии, как правило, мало весят.
  • Легкость внесения изменений. Так как мобильная версия является независимой от главного сайта, в нее можно вносить любые правки в процессе работы.
adaptaciya_saytov_pod_mobilnye_ustroystva

Минусы мобильной верстки:

  • Дополнительные затраты времени, а также материальные расходы.
  • Необходимо продумать множество деталей, как то: каким образом оптимизировать текст, какой контент «спрятать», а какой выдвинуть на первый план, как правильно построить иерархию отображаемых элементов. Более того, очень важно правильно «скрывать» второстепенные элементы сайта, чтобы Google не заподозрил сайт в клоакинге (термин, используемый «черными» оптимизаторами, обозначает скрытие отдельных элементов страницы от глаз пользователей с целью накрутки просмотров, кликов и т. д.)
  • Наличие разных адресов сайта. И пусть эти адреса отличаются всего небольшой приставкой «m» или дополнительным словом «mobile», «touch» (https://touch.www.linkedin.com) и т.д. это создает неудобство для пользователей, вынужденных запоминать два адреса.
  • Отличия в содержании главного и мобильного сайта. В мобильной версии разработчики часто избавляются он ненужного контента, оставляя полезный минимум. Это может быть быть как плюсом, так и минусом. Чтобы понять, справляется ли мобильная версия  с возложенной на нее миссией, Вам необходимо наблюдать за пользовательским поведением при помощи мобильной аналитики.

Мобильная аналитика: анализируйте мобильный трафик и принимайте верные решения

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

Самый простой способ проверить, насколько Ваш сайт адаптирован для мобильных устройств,  – воспользоваться специальным инструментом для вебмастеров от Google «Проверка удобства просмотра на мобильных устройствах». Но даже если Вы уверены, что Ваш сайт идеально оптимизирован под мобильные устройства, следует регулярную наблюдать за сайтом, чтобы удостовериться, как Google “видит” Ваш сайт и насколько эффективна Ваша сайт-оптимизация в реальности. Для этого в инструментах вебмастера от Google, в категории «Search Traffic» (Поисковый трафик), Вам необходимо установить следующие параметры: Сlicks, Pages, Countries, Devices, Search type, Dates = > Comparison =>Custom => Month. Такая отчетность позволит Вам следить за актуальными изменениями,  происходящими с Вашим сайтом (положение в выдаче, объем трафика, источники трафика и т. д.), в связи с новыми алгоритмами Google.

Также, если Вы открыты к экспериментами и готовы немного потратиться, можете поискать приложения для анализа трафика сторонних разработчиков, их на рынке огромное множество (такие как: pr-cy.ru, seolib.ru, similarweb.com и прочие).

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