создание и продвижение сайтов
реклама в Интернет
по всей России

       

+7 (812) 981-18-97
WhatsApp, Viber +7 904 519-45-93

Мобильная версия сайта: зачем она нужна?

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

Прирост аудитории десктопного Интернета в 2015 остановился

По данным, выложенным на сайте «Интернет в России и в мире», в 2015 году прирост аудитории десктопного Интернета, то есть количества людей, выходящих в сеть со стационарных компьютеров, полностью остановился.

Количество пользователей мобильного интернета неуклонно растетВ тоже время, число людей, которые бороздят просторы интернета при помощи мобильных телефонов и планшетов, с каждым годом неуклонно растет. Например, в 2013 году эта цифра составила 56%, в 2014 – 61%, а за пять месяцев 2015 количество пользователей, заходящих на сайты с мобильных устройств, снова увеличилось и составило около 86%.

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

Эти факты не могли быть проигнорированы такими крупнейшими поисковыми платформами как Google и Яндекс.

Новый алгоритм «Mobile-Friendly» от Google

Google помечает в мобильной поисковой выдаче «дружелюбные к мобильным устройствам» сайтыУже с ноября 2014 года Google помечает в мобильной поисковой выдаче «дружелюбные к мобильным устройствам» сайты.

А с 21 апреля 2015 года поисковая система начала понижать в выдаче сайты, неадаптированные под мобильные устройства ресурсы.

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

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

Яндекс пока не требует, но рекомендует

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

Позиция Яндекса по вопросу о необходимости создания мобильной версии сайта на данный момент более лояльнаНа это косвенно указывает и появление раздела в сервисе Яндекс.Вебмастер «Мобильная версия сайта». В разделе рассматриваются способы предупреждения Яндекса об ориентированности сайта на мобильную интернет-аудиторию.

Существуют определённые различия в требованиях Яндекса и Google к «мобильно-ориентированному сайту». В частности, заокеанский поисковик настаивает на едином URL для всех версий сайта. Яндекс же сам использует (например, мобильная версия Яндекса для поиска картинок; Яндекс.Словари) и всем активно рекомендует разделять мобильную и стандартную версию на разные поддомены (седьмой пункт раздела «Индексирование сайта»). Аргумент: так системе будет проще показывать в запросах с различных устройств необходимую версию Вашего сайта.

Зачем вообще нужна мобильная версия сайта?

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

Вот её основные отличия:

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

Особенности разных типов мобильных устройств

  1. Мобильные устройства – это смартфоны на операционных системах iOS, Android и Windows. Браузеры на мобильных устройствах поддерживают большинство функций HTML5.Однако небольшое разрешение экрана создаёт ряд неудобств, в частности, отображение сайта по умолчанию в вертикальном положении, что требует его постоянной прокрутки.
  2. Планшеты стоит выделить в отдельную категорию, так как они зачастую обладают большим экраном и даже неадаптированный сайт будет выглядеть на них вполне прилично и не вызовет дискомфорт.
  3. В мультимедийных телефонах акцент сделан на качестве звука и изображенияВ мультимедийных телефонах акцент сделан на качестве звука и изображения, а также возможностях их обработки. В смартфонах же приоритет отдаётся возможностям коммуникации. Поэтому мультимедийный телефон позволяет отображать страницы стандарта XHTML, HTML5, JavaScript и ECMAscript, однако может не справиться с некоторыми API расширениями в стандарте HTML5.
  4. Обычный телефон часто представляет собой дешёвый, морально-устаревший аппарат, который не имеет возможности устанавливать дополнительные программы и не способен загружать страницы со стандартным HTML-кодом. Они работают с браузерами cHTML (iMode), WML, XHTML-MP.

Как проверить, адаптирован ли сайт для мобильных устройств?

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

  1. Проверка удобства просмотра на мобильных устройствах - ссылка;
  2. Эмулятор для просмотра отображения сайта с IPad или iPhone - ссылка;
  3. Сервис, позволяющий просмотреть сайт с разных устройств и экранов - ссылка;
  4. Сервис для получения информации о том, как ваш сайт будет выглядеть на самых популярных устройствах: iPhone, iPad, Android - ссылка;
  5. Инструмент тестирования сайтов на готовность к отображению на экранах мобильных - ссылка;
  6. Отображение сайта сразу на нескольких мобильных устройствах – ссылка;
  7. Еще один функциональный сервис - ссылка.

Как сообщить поисковой системе, что сайт ориентирован на мобильные устройства?

Если акцентировать внимание поисковика на том, что ваш ресурс является мобильно ориентированным, то это позволит ему безошибочно направить пользователя, выполняющего поиск с мобильного, на вашу страницу.

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

В Google предполагается, что система сама разберётся, является версия страницы мобильной или нет. Чтобы поисковик признал её «мобильно-дружественной», необходимо выполнять ряд рекомендаций, которые дал в своём специальном интервью руководитель отдела по борьбе с поисковым спамом Google Мэтт Каттс, а именно:

  • Отсутствие блокировок JavaScript и CSS.
  • Корректно настроенная переадресация с десктопной версии страницы на мобильную и наоборот.

Мобильная, адаптивная и отзывчивая версия сайта: в чём разница?

В просторечии часто употребляют понятия «мобильная версия сайта» и «адаптивная версия сайта» как полные синонимы. Иногда к этому ряду также добавляют понятие «отзывчивый сайт». Однако такое использование понятий является неправильным. Разберём почему.

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

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

Мобильная версия сайта необходима в современном обществеПреимущества:

  • лёгкость изменений, т.к. мобильная версия сайта не привязана к основной;
  • возможность выбора для пользователя: если не нравится, мобильную версию можно отключить и перейти на обычный домен.

Недостатки:

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

Адаптивная версия сайта

Адаптивный сайт или сайт с адаптивным веб-дизайном (adaptivedesign) – это шаблон, благодаря которому вёрстка автоматически подстраивается (адаптируется) подразмер и особенности экрана устройства, с которого зашли на сайт.

В отличие от так называемого «резинового сайта» (flexible layout), в котором контент просто растягивается по ширине экрана, на сайтес адаптивным веб-дизайном не искривляются изображения и не возникают «дыры» пустого пространства. Кроме того, резиновая вёрстка разрабатывается для десктопов, а адаптивная изначально делается для мобильных устройств, то есть разрабатывается минимальный макет для мобильных устройств и потом происходит наращивание функционала для более высоких разрешений.

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

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

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

Недостатки:

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

Советы:

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

Хорошая адаптация сайта подразумевает сокращение количества HTTP-запросов, минимизацию CSS и JavaScript, а также работу над увеличением скорости загрузки.

Быстрее и дешевле создать единую адаптивную версию, чем создавать несколько вариантов сайтаТакже ресурс должен оставаться доступным для сканирования. Для этого не блокируйте в файле robots.txt доступ к ключевым файлам на сайте (включая объявления), которые непосредственно влияют на отображение страницы. Если Googlebot не получит доступ к CSS и JavaScript изображениям, то ему не удастся определить, как будет выглядеть страница в мобильном браузере.

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

Отзывчивая версия сайта

Иногда между понятиями «отзывчивый веб-дизайн» и «резиновый» макет сайта ставят знак равенства. Действительно, отзывчивая версия сайта базируется на «резиновых» макетах и медиа-элементах на них, что достигается использованием только средств HTML и CSS.

Именно поэтому отзывчивый дизайн сайта представляет собой в определённом смысле часть адаптивного дизайна, так как подразумевает работу только с макетом страницы (медиазапросы, гибкие изображения).

Иначе говоря, адаптивный веб-дизайн — это стратегия создания сайтов и приложений для различных устройств. В то время как отзывчивый веб-дизайн представляет собой лишь технику адаптации макета, которая производится с помощью запроса CSS3 mediaquery, поддерживаемого всеми популярными браузерами (Google Chrome, Mozilla FireFox, Opera).

Сайт с отзывчивым дизайном (responsive design) иногда называют ресурсом с динамическим показом. В этом случае URL используется один и тот же, а вот HTML в разных вариантах. Система, руководствуясь доступной информацией о браузере пользователя, выбирает нужный вариант.

Сайт с отзывчивым дизайном (responsive design) иногда называют ресурсом с динамическим показомВ рамках понятия «отзывчивый дизайн сайта» выделяют также такое понятие как «RESS» (Responsive Design + Server Side). Эта система используется во многих продуктах Google и включает в себя позитивные моменты как отдельной мобильной, так и адаптивной версии сайтов.

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

  • единый адрес (как и в случае с адаптивным дизайном);
  • минимизация траффика за счёт специальной оптимизации html и css, а также удаления ненужных JavaScript;
  • возможность таргетирования (например, для гаджетов с установленным Android предлагается скачать приложение с GooglePlay, а для Apple – с iTunes);
  • возможность сделать свою вёрсткудля каждого типа устройства.

Недостатки:

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

Помощь Google в оптимизации Вашего сайта под мобильные устройства

Сотрудники Google разработали систему подсказок, выполняя которые, можно будет решить проблему адаптации сайта к мобильным устройствам.

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

Перейдя по ссылке, мы увидим ряд рекомендаций, которые разделяются на основные и дополнительные.

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

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

Рядом со вторым пунктом основных рекомендаций расположена кнопка «изучить рекомендации», которая приводит пользователя на страницу-тьюториал.

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

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

Наши работы

Сдан сайт компании Fortis
Создание сайта-визитки туркомплекса
Верстка  сайта-визитки студии «JP»
Редизайн Главной страницы студии звукозаписи
Создание сайта-визитки для компании по вывозу мусора
Создание сайта-визитки для филиала
показать еще

Новости

Сдан сайт компании Fortis

Сдан сайт компании Fortis

Сайт компании Fortis, кроме стандартного набора, снабжен рядом интересных опций.

Аудит для masters-online

Аудит для masters-online

Проведен бесплатный аудит сайта, посвященного ремонту бытовой техники в Краснодаре.

Создан сайт-визитка по шаблону для компании Фонодом.

Создан сайт-визитка по шаблону для компании Фонодом.

Сайт-визитка по шаблону компании Фонодом укомплектован стандартными для данного предложения модулями

Выполнена разовая оптимизация сайта stroyrus.spb.ru

Выполнена разовая оптимизация сайта stroyrus.spb.ru

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

Сдан сайт туристического комплекса в Карелии Белые мосты

Сдан сайт туристического комплекса в Карелии Белые мосты

Сдан сайт туристического комплекса Белые мосты, адаптированный под любые устройства.

Наш новый клиент: компания "АвтоВоз"

Наш новый клиент: компания

Создан сайт для компании АвтоВоз с последующим продвижением.

Web-Садовник приглашает программиста на сдельную работу

Web-Садовник приглашает программиста на сдельную работу

Web-Садовник приглашает программиста на сдельную работу

Компания Web-Садовник открывает вакансию web-маркетолога

Компания Web-Садовник открывает вакансию web-маркетолога

Web-Садовник открывает вакансию web-маркетолога.

Приглашаем на работу рерайтера

Приглашаем на работу рерайтера

Предлагаем работу для ответственного и грамотного рерайтера.

Проведен SEO-аудит сайта samara-consult.ru

Проведен SEO-аудит сайта samara-consult.ru

Нами проведен бесплатный сео-аудит сайта samara-consult.ru

Команда нашего клиента покорила Эльбрус

Команда нашего клиента покорила Эльбрус

Команда Альпгуру совершила восхождение на гору Эльбрус на высоту 5642 метра.

Проведен очередной бесплатный SEO-аудит

Проведен очередной бесплатный SEO-аудит

Мы провели бесплатный аудит сайта adjuster group.ru.

“Web-Садовник”, агентство интернет-маркетинга, 2008 - 2017, реквизиты

Создание сайтов, продвижение сайтов, аудит сайтов, сопровождение сайтов

карта сайта
+7 (812) 981-18-97
WhatsApp, Viber+7 904 519-45-93
вверх