08.09.2016

Адаптация сайта под мобильные устройства: важные «зачем» и «как»

Замечали ли Вы, как неудобно использовать горизонтальную полосу прокрутки во время просмотра web-страницы со смартфона или планшета? Чтение с экрана размером в 960 пикселей или чуть больше превращается в трату времени на поиск меню и масштабирование. Проблема в том, что изначально сайт пишется под экраны мониторов компьютеров. Но с появлением огромного количества карманных девайсов, необходимость использовать исключительно ПК - отпала. Количество пользователей мобильного WWW растет не по дням, а по часам.

Новинки от Yandex, или детальнее о мобильных версиях

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

Предположим: пользователь заходит в сеть с телефона, набирает в поисковой строке Yandex запрос и нажимает «Найти». Алгоритм ранжирует по запросу ресурсы в порядке пригодности и комфортности их использования на конкретном девайсе — адаптация под мобильные устройства гарантирует высшие позиции в поиске, а неадаптированные сайты будут опускаться на низшие. Итог очевиден!

Как «понравиться» алгоритму «Владивосток»? Необходимо соблюдать важные правила адаптации сайта:

  1. Отсутствие горизонтальной прокрутки, или оптимизация под экран.

  2. Не должно быть элементов типа flash, Silverlight-плагины и Java-апплеты, а видеоролики должны обязательно поддерживать html 5.

  3. Текст на страницах должен быть размером не менее 12 px (пикселей). Тестирование показали, что именно такой размер текста максимально комфортен (безопасен для глаз) для чтения на карманных устройствах.

Размер шрифта фактор определения мобилопригодности

Обратимся к статистике

Компания «Google» последние 7 лет ведет статистику пользователей интернет. Согласно собранным данным:

  • В 2010 году приблизительно 92,3% пользователей применяли для выхода в сеть персональный компьютер.

  • В 2013 году лишь 54,2% для выхода в интернет использовали ПК, остальные 45,8% пользовались девайсами.

  • В 2015 году по подсчетам «Google» объем поисковых запросов с гаджетов в разы превысил объем запросов с ПК.

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

Чем грозит потеря мобильного трафика?

Помимо очевидных преимуществ, адаптация дизайна сайта под устройства с маленьким экраном позволит:

  • Бороться за максимальную посещаемость.

  • Стать дружественным для Google, Yandex и другим ПС.

  • Уменьшить показатель отказов на сайте

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

  • Получить трафик своих конкурентов, которые пренебрегли адаптацией.

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

Признаки качественной мобильной адаптации сайта

  1. Быстрая загрузка. Если страница открывается в течение 8-10 секунд — это плохие показатели, проверить скорость загрузки можно в сервисе Google Test Speed. Посетители ресурса не будут ждать, пока грузятся картинки и фото, чтобы прочитать информацию на странице. Они закроют ее и выберут в поиске новый ресурс, который будет грузиться максимум 3-4 секунды. При адаптации убираются все «тяжеловесные» элементы — фото, flash объекты, ненужная графика, улучшающая внешний вид страниц при их просмотре с большого экрана.

    Текст на скорость загрузки сайта Google test speed
  2. Удобочитаемое содержимое страниц. Пользователь не закроет нужную страницу, если ему хорошо видны буквы, ему не нужно выполнять никаких дополнительных манипуляций с экраном или сайтом, чтобы увидеть необходимую информацию. Корректная адаптация под мобильные девайсы позволит сделать страницу максимально дружественной и приятной к просмотру и чтению.

    Удобство просмотра информации на мобильных
  3. Удобные кнопки и меню. Чем удобнее в эксплуатации страница, тем выше конверсия. Добиться удобства использования легко — необходимо устранить «неудобства» использования самого девайса. А именно — вызов маленьких объектов «большими» пальцами. Посетителю должно быть легко: выбирать поле меню, клацать по ссылке, активировать требуемый элемент управления страницей.

    Увеличьте размер активных элементов на странице
  4. Максимальная функциональность. Мобильная версия должна быть такой же функциональной и понятной, как «полновесный» сайт. Профессиональная адаптация шаблона под мобильные устройства предоставит посетителю возможность без затруднений сделать заказ, совершить покупку, связаться с представителем, подписаться на рассылку и так далее.

    адаптация шаблона под мобильные устройства
  5. Комфортное и дружественное usability ресурса. Простота и ясность web-страницы при необходимости выполнить определенное действие — как отличное освещение магазинной витрины. Придя на страницу, пользователь не должен испытывать неудобств: задумываться над тем, как ему что-то увидеть, открыть, заказать. Адаптация создаст визуально видимую в целом страницу с вертикальной прокруткой, понятным навигационным набором, строкой поиска и так далее.

Адаптирован ли сайт — способы проверки

Можно ли и как проверить адаптацию сайта под мобильные устройства без помощи web-мастеров? Существуют несколько методов:

  • Яндекс.Вебмастере от Yandex. Сервис выполняет полную диагностику ресурса и определяет его «мобилопригодность». Проверка мобильной адаптации от Яндекс

  • Удобный инструмент «Screenfly» от Google. Запуск приложения выполняется онлайн по адресу страницы. Инструмент проверки адаптации от Screenfly

  • Mobile-friendly быстрый сервис от Google. Определение по Url странице. Проверка адаптивности от Google

Как создать адаптивный сайт?

Осталось выяснить вопрос: как сделать адаптацию сайта под мобильные устройства? Для всех используемых сегодня CMS (Joomla, WordPress, 1С-Битрикс, Opencart, Drupal, MODX, UMI и многие другие) существуют определенные плагины, с помощью которых web-страницы «переводятся» в мобильные версии. Но к большому сожалению, все они шаблонные.

как сделать адаптацию сайта под мобильные устройства?

Что это значит? Например, width — атрибут html, определяющий ширину объекта, в плагине будет иметь значение «auto». Аналогичные параметры будут установлены и на media screen (атрибут html для показа объекта на screen), CSS (внешний вид документа). Эти параметры не подстраиваются под условия каждого конкретного сайта самостоятельно. Их необходимо индивидуально верстать и доделывать «криво» работающий сайт после установки плагина.

При шаблонных плагинов сайт может:
  • отображаться некорректно;

  • не работать;

  • внешне (портится дизайн) выглядеть неприглядно;

  • отображать некорректно определенные элементы и так далее.

Делать самостоятельно или доверить профессионалам?

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

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

Заказать адаптацию

Возврат к списку

Основные способы обмана клиента при продвижении сайта Основные способы обмана клиента при продвижении сайта 21.09.2016

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

Адаптация сайта под мобильные устройства: важные «зачем» и «как» Адаптация сайта под мобильные устройства: важные «зачем» и «как» 08.09.2016

Замечали ли Вы, как неудобно использовать горизонтальную полосу прокрутки во время...

Как правильно подобрать ключевые слова для сайта Как правильно подобрать ключевые слова для сайта 30.08.2016

Практически каждый владелец сайта знает о том, что для повышения посещаемости ресурса...


22222

Закажите бесплатный экспресс-аудит вашего сайта

Мы проведем бесплатный экспресс-аудит вашего сайта и дадим рекомендации по его улучшению.