Категории курсов

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

Содержание [Скрыть]

Каждый владелец сайта хочет видеть на своем интернет-ресурсе как можно больше целевой аудитории. Существует много источников посетителей, и трафик с мобильных устройств – один из самых перспективных, который уже порой перекрывает объем посещений с настольных компьютеров на многих web-сайтах.

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

Хотим, так же оповестить, что Яндекс ввел новый алгоритм, который учитывает мобильность сайта!

Что значит адаптировать сайт "по-мобильному"?

Начнем с того, что определим понятие адаптации сайта под разные устройства и понятие его мобильной версии.

Адаптация или оптимизация сайта под мобильные устройства – это технические мероприятия по модернизации интернет-ресурса для его одинаково удобного визуального восприятия посетителями с настольных и мобильных устройств, которые, как правило, имеют разные разрешения экранов. Другими словами она заключается в разработке адаптированного дизайна для одного сайта практически под любое устройство.

Мобильная версия сайта - это отдельная версия основного сайта, которая имеет разные URL-адреса и структуру дизайна. Другими словами, это отдельный сайт, который обычно доступен на поддомене основного (m.основной-сайт.ru), предназначающийся исключительно для мобильных устройств.

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

А Вы нуждаетесь в "адаптации"?

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

Для понимания можно создать и заполнить сводную таблицу на основе данных одного из популярного интернет-ресурса, которая более наглядно изображать все необходимые данные:

Сайт\Трафик (сеансы) Доля мобильного трафика (смартфоны+ППК) Всего трафика на сайт Всего трафика на сайт с Google Доля трафика Google в общем мобильном трафике Доля мобильного трафика Google в общем трафике Google
www.сайт.ru  11,7% (52 169) 443 951 118 133  26,5% (13 811) 11,7% (13 811)

 

Здесь отображены данные по одному из ресурсов: доля в % и и общее количество под данным Google Analytics.

Далее мы покажем как определить долю мобильного трафика в Google Analytics:

Сперва следует перейти Аудитория - Мобильные устройства - Обзор:

Адаптация сайта

Здесь мы видим сводные данные по пунктам Mobile (смартфоны) и Tablet (планшетные ПК). Их необходимо сложить и высчитать долю от всех посещений. Доля мобильного трафика получилась 11,7% или 52169 посещений.

Далее необходимо знать сколько трафика получил сайт с ПС Google, для этого переходим в отчете Google Analytics Источники трафика - Обзор - Источник/канал

Адаптация сайта

Получаем данные по общему количеству переходов из ПС Google в количестве 118133, вписываем в таблицу.

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

Чтобы узнать этот показатель, необходимо в отчете Google Analytics выбрать и добавить сегмент из предложенного списка с соответствующим названием "Трафик со смартфонов и планшетных ПК":

Адаптация сайта

На основе этого сегмента произведется необходимая нам выборка данных:

Адаптация сайта

Из полученных данных нам стало известно, что мы имеем 13811 сеансов с мобильных устройств с ПС Google. Соответственно доля в общем объеме сеансов с мобильных устройств в ПС Google составила 26,5%. Вписываем в таблицу.

Далее, чтобы окончательно убедиться в корректности отображения нашего сайта на мобильных устройствах,  мы определим долю мобильного трафика ПС Google в общем трафике ПС Google. Если и этот показатель будет ниже нормального (~22%), то это будет служить выводом о том, что нам срочно необходимо адаптировать интернет-ресурс под смартфоны и планшеты.

Для определения этого показателя нам нужно взять количество мобильного трафика ПС Google и высчитать его долю из общего количества сеансов с ПС Google (это число мы получили ранее). В итоге эта доля составила 11,7%. Как Вы видите этот показатель ниже нормального в ~22%, а значит ещё есть над чем потрудиться в развитии сайта для мобильных устройств.

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

У Google есть несколько сервисов по реализации анализа сайта в этом направлении:

  1. Проверка удобства просмотра на мобильных устройствах
  2. Список распространенных ошибок при оптимизации сайта для мобильных устройств

А также ещё один список конкретных ошибок в удобстве просмотра сайта на мобильных устройствах можно найти в личном кабинете Google Webmasters:

Адаптация сайта

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

Первый способ: адаптивный дизайн(картинка с адаптивным дизайном)

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

К плюсам можно отнести:

  1. Простота реализации. Развивая сайт под мобильные устройства с помощью адаптивной верстки, Вам не нужно разрабатывать его заново, а необходимо лишь доработать HTML-код и таблицы стилей.
  2. Информация интернет-ресурса доступна по тем же URL-адресам, что и основной сайт.
  3. При помощи адаптивной верстки сайта под мобильные устройства мы можем как глобально, так и избирательно подходить к выбору ширины экрана, под который адаптируем наш сайт. Другими словами, можно не тратить лишнее время, ресурсы, а выбрать наиболее часто используемые разрешения экранов мобильных устройств и адаптировать сайт только под них.

Но есть и минусы:

  1. Время загрузки сайта - часто адаптивный дизайн увеличивает время загрузки сайта ввиду технических нюансов при его разработке. Но можно минимизировать этот недостаток, выбрав только самые часто встречающиеся разрешения экранов мобильных устройств. Ниже представлен список таковых, Вы можете выделить для себя приоритеты и сверстать сайт под одно из них или несколько:
    • 320 px — для мобильных устройств в портретной ориентации;
    • 480 px — для мобильных устройств в альбомной ориентации;
    • 600 px — планшеты с небольшим размером дисплея и современные смартфоны;
    • 768 px — для планшетов в портретной ориентации и современных смартфонов;
    • 1024 px —для современных планшетов в альбомной ориентации и нетбуков (тот же Apple Ipad mini в пример);
  2. Адаптивный дизайн подойдет далеко не каждому интернет-ресурсу. По статистике, 95% «мобильных» посетителей заходят на сайт с телефона или планшета узнать интересующий адрес или телефон искомого магазина или организации.
  3. Если адаптивный дизайн показался посетителю неудобным, то у него нет выбора другой версии сайта. Например, мобильную версию можно отключить и продолжить изучать исходную версию.

Несмотря на эти недостатки, адаптивная верстка имеет огромную популярность даже среди «поисковых гигантов», например, таких как Google.

Второй способ: отдельная мобильная версия

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

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

  1. Скорость загрузки сайта<в мобильной версиидостаточно быстрая даже для пользователей со слабой скоростью соединения.
  2. Если Вам не по душе интерфейс, или функционал мобильной версии недостаточен для решения вопроса, тоВы всегда сможете отказаться от неё и перейти на основной сайт.
  3. Фактор удобства в навигации, изучения контента – несомненный плюс такой версии сайта. В общем-то для этого она и разрабатывается.
  4. Владельцу или разработчику мобильной версии очень просто редактировать информацию. Ведь обычно она является урезанной версией основного сайта и, соответственно, информации в ней на порядок меньше.

Недостатки:

  1. <Ограничение функционала и информационной части – ввиду создания отдельного сайта для мобильных устройств, приходится избавляться зачастую от многих функций и контентного содержания.
  2. С технической точки зрения, мобильная версия имеет один большой недостаток – это другой URL-адрес. В большинстве случаев он является приставкой к основному доменному имени (m.основнойсайт.ru). Почему недостаток? Потому что велика вероятность дублирования контента с основным сайтом, а также попадание на 404-страницу - щелкая в выдаче по странице основного сайта, ввиду ограниченного функционала мобильной версии, таковой страницы в ней может не существовать. Все эти факторы влияют на отношение к сайту со стороны поисковых систем (ПС), а значит вполне возможно понижение его позиций в выдаче.

    Полезный совет:

    Во избежание санкций со стороны ПС необходимо использовать на страницах с дублированным контентом мета-теги rel=«alternative» и rel=«canonical»

     

  3. "Удвоенное внимание" – имейте ввиду, что редактируя информацию на основном сайте, нельзя забывать и о мобильной версии.

 

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

Третий способ: RESS (Responsive Design + Server Side)

Ещё один из способов адаптации сайта к мобильным устройствам – это технология RESS (Responsive Design + Server Side). Этот метод подразумевает выполнение адаптированного дизайна за счет серверных ресурсов, что увеличит время загрузки сайта, позволит использовать таргетирование и настроить верстку под конкретное мобильное устройство. Но такой способ довольно сложен в реализации и технология определения устройств до сих пор работает несовершенно.

Данный метод подходит большинству интернет-ресурсов.

Рекомендации по адаптации от "поисковых гигантов"

Тот факт, что доля мобильного трафика в июле 2014 года составила 20.8% от общего объема Рунета по сравнению с  показателем 13,5% в том же месяце 2013 года, ярко отражает высокую тенденцию увеличения мобильной аудитории. В связи с этим «гиганты» поисковых систем разрабатывают целые алгоритмы по формированию поисковой выдачи для мобильных устройств.

Например, поисковая система Google разработала целое руководство по темам:

  1. Работа с контентом и структурой сайта
  2. Сделайте дизайн сайта отзывчивым

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

И что в итоге?

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

Реклама. Информация о рекламодателе по ссылкам в статье.

0,00
Оценок – 0
5
0%
4
0%
3
0%
2
0%
1
0%
Добавить комментарий

Оставить комментарий

Пожалуйста, оцените по 5 бальной шкале