Mobile first что это

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

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

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

Не так давно Google сообщил, что с 1 июля 2018 года будет запущен алгоритм, выстраивающий поисковую выдачу по принципу Mobile-first. Что это значит?

До недавнего времени именно десктопная версия сайта являлась основной для систем индексации, ранжирования и сканирования Google. А с появлением новой технологии все поменялось: теперь именно адаптированная версия сайта для мобильного просмотра будет индексироваться в первую очередь. Это аргументируется тем, что в контенте мобильной версии сайта и версии для десктопа может быть множество отличий.


Но это не означает, что будет две версии поисковой выдачи. Вот что говорят по этому поводу представители Google:

«У нас по-прежнему остается одна версия индекса, которую мы используем для обработки результатов поиска. У нас нет «мобильного индекса», который отделен от нашего основного индекса».

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

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

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

Проверьте свой сайт на оптимизацию под мобильные с помощью сервиса Google mobile-friendly.

Какие изменения нас ждут


Согласно справке Google, если ваш сайт еще не оптимизирован под мобильные – надо подготовить его к этому, иначе он может просесть в выдаче.

Если сайт имеет адаптивный дизайн (сайт адаптируется под размеры окна браузера) или полностью создан с использованием HTML с технологией AMP, то готовить ничего не надо, т.к. версии для компьютеров и мобильных устройств одинаковые.

Однако если у вас есть отдельный поддомен, оптимизированный для мобильных (обычно это m.site.ru), одновременно сосуществуют обычные версии и AMP-версии одних и тех же страниц или просто контент меняется в зависимости от устройства (так называемые динамические показы – когда пользователям с мобильных показывается контент, оптимизированный под мобильные, а пользователям с десктопов – под десктопы); то в каждом из этих случаев следует подготовить свой сайт согласно рекомендациям Google, что это за рекомендации такие, скажу чуть позже.

Пруф из справки Google – cвои сайты к переходу на mobile-first индексирование надо подготовить в следующих случаях:

Изменения в принципах индексации Google

Т.е. во всех этих случаях поисковый робот google будет отдавать предпочтение мобильной версии и к этому надо подготовиться. 

Джон Мюллер, специалист отдела качества поиска Google, 29 мая высказался в твиттере, что PDF-файлы не являются mobile friendly форматом, и нет возможности оптимизировать их под мобильную версию. Поэтому Mobile-first индексация не будет учитывать такие файлы. При этом наличие PDF-файлов на странице никак не скажется на индексации и ранжировании страницы.


Твит Джона Мюллера об отношении Mobile-first к PDF файлам

Рекомендации Google для подготовки сайта к индексированию Mobile-first

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

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

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

Страницы мобильных (отдельных) версий сайта

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

Страница https://www.sayen.ru/ не является адаптивной.

Десктопная версия страницы

При небольшом разрешении экрана появляется полоса прокрутки

Десктопная версия страницы с небольшим разрешением экрана

У этого сайта существует мобильная версия сайта, находящаяся по адресу http://m.sayen.ru/


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

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

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

  1. Редирект с помощью PHP

    При обращении к серверу устройство посылает ему информацию о себе в виде текстовой строки, являющейся частью HTTP-запроса, начинающейся со строки User-agent. В ней содержатся данные об устройстве, с которого отправлен запрос: модель устройства, операционная система и т.д.

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

    <?php
    $uagent=$_SERVER[‘HTTP_USER_AGENT&.
    )|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge.
    ile/’);
    ?>

    Здесь учтены почти все User-agent. Данный код вставляется в начало документа, поэтому важно чтобы перед ним не было никаких символов, например, пробела или пропуска строки. Вместо http://site.ru/mobile/ вставляется URL, на который должен переходить мобильный пользователь.

  2. Редирект через .htaccess

    Смысл тот же, что и в пункте выше: берем информацию из User-agent. Данный код необходимо вставлять после строки RewriteEngine On.

    RewriteCond %{HTTP_USER_AGENT}
    (?i:midp|samsung|nokia|j2me|avant|docomo|novarra|palmos|palmsource|opwv|chtml|pda|mmp|blackberry|mib|symbian|wireless|nokia|hand|mobi|phone|cdm|upb|audio|SIE|SEC|samsung|HTC|mot-|mitsu|sagem|sony|alcatel|lg|eric|vx|NEC|philips|mmm|xx|panasonic|sharp|wap|sch|rover|pocket|benq|java|pt|pg|vox|amoi|bird|compal|kg|voda|sany|kdd|dbt|sendo|sgh|gradi|jb|dddi|moto|iphone|android)
    RewriteRule ^.*$ http://m.site.ru/ [R=301,L]

    Вместо http://m.site.ru/ вставляется URL, на который должен переходить мобильный пользователь.


  3. С помощью JavaScript

    Бывают ситуации, когда нет доступа к редактированию файлов на стороне сервера. В этой ситуации можно решить проблему с помощью JavaScript кода:

    <script type=’text/javascript’>
    if(window.innerWidth<600)
    location.href=’http://site.ru/mobile/’;
    </script>

    Вместо http://site.ru/mobile/ вставляется URL, на который должен переходить мобильный пользователь. С его помощью устройства с шириной экрана меньше 600px будут перенаправлены на мобильную версию сайта.

По факту это 2 разные страницы, имеющие 2 разных URL-адреса. Робот поисковых систем определяет, с каким URL-адресом страницы показать пользователю, в зависимости от устройства, которым он пользуется. И с приходом в действие технологии mobile-first index мобильная версия этой страницы будет являться приоритетной для поисковых систем.

Для страниц с разными URL-адресами необходимо соблюдать следующие рекомендации:

  • необходимо добавить обе версии сайта в Search console и следить за сообщениями и рекомендациями в обеих версиях;
  • проверить корректность работы файла robots.txt для обеих версий сайта;
  • проверить на корректность работы атрибуты тегов rel=»canonical» и rel=»alternate» для обеих версий сайта.

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

В настоящее время не рекомендуется создавать мобильные версии страниц с разными URl-адресами, так как это трудозатратный процесс – придется обновлять контент на двух версиях сайта и следить за информацией в вебмастерах.

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

Динамический показ и обычные и AMP-страницы

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

Или настроены динамические показы в зависимости от устройства, при этом URL обеих версий одинаковые. Рекомендации по подготовке к mobile-first индексу полностью совпадают с рекомендациями, если у вас есть поддомен для показа на мобильных:

  • необходимо добавить обе версии сайта в Search console и следить за сообщениями и рекомендациями в обеих версиях;
  • проверить корректность работы файла robots.txt для обеих версий сайта;
  • проверить на корректность работы атрибуты тегов rel=»canonical» и rel=»alternate» для обеих версий сайта.

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

Теперь разберемся, что значит перейти на индексирование Mobile-first.

Переход на индексирование Mobile-first


Поисковая система Google определяет в автоматическом режиме, какой сайт и в какое время включить в Mobile-first indexing, и уведомляет в Search Console владельца ресурса о том, что его сайт перешел на мобильный индекс.

Сообщение о том что сайт перешел на Mobile-first index

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

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

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

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

После проверки оптимизации сайта для мобильных перейдите в Search console, чтобы проверить, как видит вашу мобильную версию сайта Googlebot.

Для этого в Search console необходимо зайти в раздел «Посмотреть как Googlebot»:

Меню search console

Затем выбрать «Mobile: Smartphone» и нажать кнопку «Получить и отобразить»:


Действия для выполнения проверки сайта роботом Mobile

После проверки нужно нажать »

Выполненная проверка search console

Перед вами возникнут два окна: как увидел страницу Googlebot и как увидел страницу пользователь. А также список ресурсов веб-страницы, к которому роботу Google не удалось получить доступ. На основании этих данных можно будет решить, как оптимизировать страницу сайта.

Список ресурсов веб-страницы к которому роботу Google не удалось получить доступ

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

В Search Console есть еще одно средство проверки оптимизации ресурса для мобильных, оно находится в пункте «Удобство просмотра на мобильных устройствах».

Если ошибок не обнаружено, вы увидите сообщение «Не обнаружены проблемы с просмотром сайта на мобильных устройствах».

Сообщение - Не обнаружены проблемы с просмотром сайта на мобильных устройствах

В случае обнаружения проблем, сервис покажет вам их список, а также количество страниц, на которых они обнаружены

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

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

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

Проверка скорости загрузки с помощью PageSpeed Insights

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

Заключение

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

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

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

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

1ps.ru

Андрей Батурин,

Мобильный интернет в России активно растет в последние годы, об этом, к примеру, осенью писали «Ведомости». Еще в 2015 году стало ясно, что мобильные поисковые запросы по количеству перевесили стационарные.

Мобильными устройствами пользуются все и всегда: для просмотра соцсетей, для общения в мессенджерах, для онлайн-покупок, для совершения платежей. Конечно, есть доля трафика, где десктоп никогда не сдаст своих позиций (допустим, просмотр фильмов), а в остальном мобильный интернет рулит! Google добавил ему популярности, когда объявил о запуске мобильного индекса. Хотя изначально все поисковики работали по принципу «десктоп first». Поговорим о mobile first: что важно знать об особенностях такого принципа разработки?

О чем речь

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

Дело в том, что скорость зависит не только от внешних условий (хостинг, качество интернета), но и от внутренних, то есть от построения самой страницы. Когда она разрабатывается под не особо мощные устройства, которыми пользуется большинство, то и загрузка проходит гладко. Иная ситуация, когда страницы, созданные под десктоп, попадают на экраны мобильных. Многие считают, что проблему решает адаптивный дизайн. Это не совсем верно. Для понимания следует выделить отличия между адаптивной версткой и собственно mobile first.

Адаптивность ≠ Mobile first

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

Mobile first не соревнуется с адаптивным дизайном. Можно сказать, что они дополняют друг друга. Адаптивная верстка двигается от большего (экран десктопа) и приходит к уменьшению (экран мобильного).

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

С позиций дизайна и технической реализации

Когда дизайнер начинает работу над оформлением сайта, она обычно ведется под большой экран. И дело тут не в традициях, и не в отрицании тенденций mobile first. А в том, что как бы ни рос мобильный интернет, полный функционал сайта всегда предназначается для десктопных версий. В них заложен максимум возможностей, тогда как мобильное представление подразумевает некие ограничения, отказ от каких-либо опций и сокращение страницы до самого главного. Иначе сайт окажется тяжелым, трудным с точки зрения навигации, а то и совсем непригодным для смартфонов, планшетов.

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

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

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

Учитывается, в первую очередь:

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

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

Плюсы Mobile first

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

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

Другие статьи по тегам

сайты Разработка дизайн сайта

webevolution.ru

Слоны и котики

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

Заказчики, которые любят сайт ещё со временён прототипа, с трудом идут на такие жертвы. Многие не выносят столь жестокого обращения и, думая, что и так сойдёт, оставляют десктопную версию нетронутой и неадаптивной. Но статистика тонко намекает, что нет, не сойдёт. В 2016 году доля мобильного трафика уже составляет 38,6%. Треть пользователей будут страдать и спотыкаться о "хобот" вашего неадаптированного сайта, потирать синяки и бежать на сайты, где им будет удобнее.

Mobile first что это

Плюсы Mobile First

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

В этом и заключается подход Mobile First (буквально «сначала мобильные»). Mobile First решает проблему адаптивных и мобильных сайтов — не нужно ломать голову, как впихнуть "невпихуемое" на экран четвёртого айфона.

Отзывчивый Mobile First сайт fullbottle.co и как он выглядит на десктопах

Отзывчивый Mobile First сайт fullbottle.co и как он выглядит на десктопах

Подход сразу выдаёт симпатичный сайт, который: 

  1. идеально вписывается в маленькие экраны;
  2. не всегда идеально, но всё же помещается на широких мониторах;
  3. лёгкий и быстрый, что оценят те, кто ещё не подключил безлимитный мобильный интернет;
  4. содержит только самое важное и на самом видном месте;
  5. позитивно воспринимается поисковыми системами и легче продвигается, потому что Mobile Friendly.

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

Mobile first что это

Экраны мобильных устройств небольшие, разгуляться дизайнеру особо негде, поэтому избыточные элементы сразу улетают в корзину. Минимум воды, максимум пользы, меню-гамбургер, логотип в уголке и крупная кнопка с призывом к действию — все эти "фишки" кочуют от одного сайта к другому в адаптивных и мобильных версиях. Это уменьшает веб-разнообразие и подрезает крылья креативу. А когда шикануть дизайном нет возможности, главным на сайте становится контент. И это — самый жирный плюс подхода Mobile First.

Контент — "кровавая мозоль" веб-разработки. Заказчики частенько ленятся создавать его для сайта. Зачем, когда есть дизайнер, которой нарисует супер-продающую страничку, где клиент якобы будет чувствовать себя комфортно и с рыбными текстами, и с ворованными фоточками? А если заявки не поступают — так это дизайнер виноват. Недостаточно "продажно" нарисовал. 

В очередной раз откроем страшную правду — люди любят сайты за контент. Если он проседает, никакая анимация и продажные красные кнопки не удержат пользователя. И многие заказчики боятся признать это. Зато с подходом Mobile First у них не остаётся выбора (*злобный смех менеджера проектов*). В результате на выходе получается простенький, но удобный сайт с полезным содержанием.

Минус подхода Mobile First кроется там же, где и плюс — разгуляться с креативом негде. При переносе сайта с мобильного экранчика на 27-дюймовый монитор дизайнер, конечно, развернёт меню-гамбургер в строку, увеличит логотип, посимпатичнее скомпонует блоки. Но на выходе вы получите типичный минимализм. Если вам большего и не нужно — пробуйте Mobile First, ничего не потеряете. И мобильная аудитория будет безмерно благодарна. 

Ещё одна опасность Mobile First — забросить разработку, когда готова только версия для мобильных устройств. Если нет версии для мониторов с высоким разрешением, сайт становится Mobile Only (буквально «только мобильные»). Пример — сайт инстаграмма, где десктопная версия ничем не отличается от мобильной. Это не критично, но пользователи так же сильно не любят Mobile Only, как и неадаптированные сайты. Их раздражает нереализованное пространство по бокам, невнятные иконки (хотя место позволяет сделать понятные надписи) и крупные кнопки.

Поэтому, если решаетесь на разработку по принципу Mobile First, доводите дело до конца и делайте сайт отзывчивым.

geekbrains.ru

Что такое Mobile-First Index от Google?

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

Ранее поисковик применял два индекса:

  1. Для десктопов (персональных компьютеров).
  2. Для мобильных устройств.

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

Раньше для десктопного сканирования поисковый бот указывал такой юзерагент:

Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)

В случае с Mobile-First, робот укажет модель и характеристики смартфона:

Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)

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

Алгоритм Mobile-First Index внедряется постепенно, а оповещение о том, что он коснулся вашего сайта, придет на Search Console и электронную почту, привязанную к профилю.

Mobile-First отличается от Mobile-Only индексации тем, что если у сайта нет мобильной версии, индексироваться будут исключительно страницы, оптимизированные под ПК. Но вебмастерам не следует просто «забить» на данный алгоритм. Дело в том, что сайт, для которого не создана мобильная версия, существенно ухудшит свое положение при ранжировании. И тогда на лидирующих позициях окажутся ресурсы, которые более комфортабельные для пользователей, сидящих в интернете преимущественно со смартфонов.

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

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

Google стимулирует владельцев сайтов, у которых существуют отдельные мобильные аналоги (m.mysite.ru), изменять теги переключения, указывающие на то, что есть мобильный URL веб-ресурса. Для этого нужно прописать тег rel=alternate, и тогда ботам не придется сканировать и сохранять мобильные версии веб-страниц – им достаточно показать соответствующий URL для пользователей, посещающих сайт через смартфон.

Многие годы seo специалисты и маркетологи делали основной упор на оптимизацию проектов под десктопный поиск, так как ранее он был в приоритете. Основные десктопные сайты содержат контент, внешние ссылки, теги, структуру и прочие необходимые параметры в полном объеме, в то время как большинство современных мобильных версий урезанные. Сейчас же с приходом Mobile-First Index необходимо в приоритете следить за мобильной версией сайта.

На кого повлияет и какие последствия?

Mobile-First Index коснется владельцев таких веб-ресурсов:

  • Содержащих разный контент для мобайл и десктоп-версий. Как правило, такие проблемы имеют интернет-магазины, потому что на сайтах, оптимизированных под смартфоны, нет описаний, характеристик товаров и прочих элементов.
  • Имеющих мобильные версии на поддоменах.
  • Совсем не адаптированных для мобильных устройств. Mobile-First индексация создана для того, чтобы вносить в индекс и отображать в результатах поиска сайты, оптимизированные под смартфоны, или которые имеют мобильные версии. В противном случае ресурс может вовсе пропасть из поиска.

Последствия от внедрения современного Гугловского алгоритма для вышеуказанных проектов довольно серьезные.

Пропадет большая часть ссылок

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

Это объясняется особенностями работы мобильных версий веб-страниц. К примеру, если создать архив в качестве «ленивой загрузки» (lazzy loading), то некоторая часть контента будет удалена из индекса или вовсе не попадет в индекс, если там еще не находится. И это даже невзирая на наличие карты сайта. А если материалы и будут проиндексированы, то из-за того, что в них кроме Sitemap нет никаких других ссылок, то и вес у документов будет мизерный, а вес, который передает ссылка, практически нулевой.

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

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

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

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

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

Медленные сайты потеряют еще часть ссылок

С июля месяца 2018 года, ранжирование веб-сайтов во многом зависит и от скорости его работы, к чему тоже привело появление Mobile-First. В ТОП выдачу попадут быстрые ресурсы, функционирующие на протоколе HTTP/2 и применяющие SSL сертификаты. Проблема особенно коснется старых проектов, где размещены ссылки с большим весом. Потеряв прежний рейтинг, их позиции снизятся, траст уменьшится.

Еще несколько проблем для оптимизаторов

На этом головная боль от реализации алгоритма Google не заканчивается. Пока что есть 3 способа работы мобильной версии веб-ресурса, среди которых можно отметить использование поддомена вида: m.mysite.ru.

Пока что неясно, как Google будет воспринимать мобильную версию интернет-проекта – в качестве основного сайта, как отдельный ресурс, или же он будет кэшироваться. Если в роли отдельного интернет-проекта, то основной лишится мобильного кэша, а это негативно повлияет на его трастовость. Если он окажется основным, то что будет с оригинальными страницами?

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

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

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

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

Еще задумайтесь, способен ли ваш веб-сайт справиться с ускоренными мобильными страницами, загружающимися за миллисекунды?

С реализацией Mobile-First Index, в поисковой выдаче произойдут существенные изменения. Совсем скоро старые ресурсы с неправильно организованной стратегией, направленные на развитие на основе устаревших факторов ранжирования, уступят свои позиции свежим, продвинутым проектам, соответствующим современным правилам поисковиков.

Что делать и как улучшить свой сайт для Mobile-First Index?

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

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

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

Контент

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

Мета-данные

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

Структурированные данные

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

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

Теги Hreflang и Alternate

Если у вас интернациональный ресурс, вам понадобится атрибут rel=”alternate” и rel=”hreflang” в элементах link для создания контента на различных языках. Атрибуты нужно указать для всех версий страниц. Десктопные URL необходимо указывать на версии для ПК, а мобильные URL – на версии для смартфонов.

Пагинация

В мобильной версии пользователям куда проще скролить страницу, чем использовать постраничную навигацию. Поэтому подстраницы в случае с объемной статьей использовать не стоит. Просто перепроверьте, не исчезли ли у вас определенные фрагменты текста, разделенного пагинацией. Если вы хотите оставить нумерацию для фрагментов содержимого, пропишите атрибуты rel=”prev” и rel=”next”.

Файл Robots

Для самостоятельной мобильной версии на поддомене нужно правильно настроить robots.txt, в данном случае расположенному по адресу m.mysite.ru/robots.txt. Раньше сайтостроители закрывали доступ к некоторым элементам, таким как JavaScript и CSS. Но сегодня лучше ничего не скрывать, чтобы робот просканировал документ полностью, проанализировав, насколько хорошо он адаптирован для мобильных устройств.

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

Внутренние ссылки

Обходя сайты, поисковые боты подобно живым пользователям переходят по ссылкам. Как мы уже упоминали, ссылкам отводится одна из важнейших ролей в процессе ранжирования, и в Mobile-First индексации они по-прежнему останутся решающими. Поддерживайте удовлетворительную структуру мобильного веб-сайта, так как она влияет на PageRank всех страниц.

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

Расположение ссылки на странице

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

Скорость загрузки ресурса

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

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

Еще лучше воспользоваться инструментами WebPageTest или PageSpeed Insights, чтобы узнать скорость и в случае необходимости воспользоваться советами по улучшению работоспособности сайта.

Всплывающие окна

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

Карта сайта

Проверьте, чтобы доступ ко все ссылкам на Sitemap был и с мобильной версии.

Search Console

Подтвердите на площадке обе версии веб-сайта.

Заключение

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

Не стоит недооценивать тему внедрения Mobile-First индексации. Придет время, и вам понадобится тщательно оптимизированная мобильная версия проекта, которая ничуть не хуже десктопного сайта. Это позволит вам не только остаться на плаву и не пропасть из индекса, но и попасть в ТОП, оставив позади старые ресурсы, многие годы занимающие лидирующие позиции в результатах выдачи.

webmasterie.ru

Что же такое mobile-first index?

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

Как было раньше: Если пользователь искал информацию в интернете из мобильного устройства, то ему показывались результаты из мобильного индекса. И, наоборот, если из десктопного устройства — то видел десктопные результаты.

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

Что Google подразумевает под мобильными устройствами?

Разные люди по-разному трактуют понятие “мобильное устройство”. Для понимания того, что именно Google вкладывает в это понятие, мы должны обратиться к документации гугла https://developers.google.com/search/mobile-sites/mobile-seo/:

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

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

Сам Google предлагает три способа адаптации сайта под мобильные устройства:

Нам очень редко попадались проекты, где для адаптации использовался динамический показ. Чаще это были сайты с адаптивным дизайном (его же и рекомендует Google) и сайты с мобильной версией на поддомене. Поэтому на них подробнее и остановимся.

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

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

Это не единственное преимущество, есть ещё:

  1. Удобство разработки — при адаптивной верстке вся структура сайта автоматически подстраивается под различную ширину экрана. А если вы хотите, чтобы ваш контент/статью увидели пользователи разных устройств, то достаточно один раз сверстать и опубликовать. Отпадает необходимость менять разметку под разные устройства.
  2. Не нужно настраивать редиректы, так как url один. Пользователю будет легче запомнить адрес. К тому же, это решит и проблему дублирования контента.
  3. Удобный мониторинг сайта с помощью систем аналитики. Мобильный трафик и десктопный можно отследить в одном месте.

Конечно, как и у всего, есть и другая сторона адаптивной верстки:

Возможны проблемы с загрузкой сайта на мобильных устройствах. Дело в том, что и на компьютерах, и на телефонах загружается одинаковый контент. Он может быть перегружен какими-то активными элементами, которые мобильные устройства будут загружать дольше десктопных. Это основная проблема, но мы уверены, что разработчики смогут найти золотую середину для сайта в разных представлениях. А остальные недостатки — это уже философия))

Отдельная мобильная версия

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

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

  1. Любые элементы на сайте можно адаптировать под мобильные устройства.
  2. Можно размещать только тот контент, который предназначен именно для мобильной аудитории. В результате упрощения, сайт начинает быстрее грузиться.

Недостатки:

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

  • надо добавить соответствующие атрибуты:

Что в итоге предлагаем?

Мы бы рекомендовали использовать адаптивный дизайн. Это самый оптимальный вариант и, к тому же, менее затратный во всех смыслах. Важно, чтобы изначально разработчики делали акцент на скорость загрузки как десктопной версии, так и адаптивной. И будет всё хорошо:-) А ниже обозначенные рекомендации помогут Вам сделать адаптивный дизайн правильно.

Что же делать владельцам сайтов?

Must have:

  1. Любой сайт должен иметь адаптивную верстку или, как вариант мобильную версию сайта

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

Подробнее здесь: https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

Как вы можете проверить скорость сайта на мобильных устройствах:

  1. с помощью Google Analytics (средний показатель, ориентироваться только на него не стоит)
  2. с помощью  https://www.thinkwithgoogle.com/feature/mobile/?network=3G (есть возможность выбрать регион)

3. с помощью https://www.webpagetest.org/ (для CША есть возможность выбрать тип устройства и регион)

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

Желательно использовать SSL сертификат, так как Chrome помечает сайты на http как небезопасные. Это актуально особенно для сайтов, где вводятся данные пользователей.

Правила юзабилити отображения сайта на мобильных устройствах:

  • Не забудьте и про интерактивные элементы: кнопки,  ссылки, меню. Для улучшения юзабилити мобильной версии сайта рекомендуется применять более крупные шрифт, кнопки социальных сетей, пункты меню. Важно, чтобы пользователи могли легко попадать по нужному пункту пальцем.
  • размер шрифта на мобильных устройствах должен быть таким, чтобы пользователям не приходилось всматриваться. Делайте 16 кегль и не прогадаете.
  • если на страницах используется большой кусок текста, то можете часть его спрятать за кнопкой “Читать подробнее”.
  • обратите внимание, чтобы текст не выходил за видимую часть экрана. Горизонтального скрола также не должно быть.
  • если страница длинная, то обязательно должна быть кнопка прокрутки вверх.
  • картинки лучше делать меньше, но чтобы при нажатии они увеличивались.
  • меню размещайте в верхнем левом углу и лучше, если оно будет в виде иконки.
  • не загромождайте мобильного пользователя pop up и всякими всплывающими окнами.
  • Обратите внимание на цвет шрифта. Многие сайты используют серый шрифт, который не выделяется достаточно хорошо на фоне сайта. Это может ухудшить поведенческие характеристики.

Лайфхак по юзабилити: мы никогда не полагаемся только на инструменты анализа адаптивности сайта под мобильный устройства. Мы забираем телефоны у сотрудников (iphone,android) и тестим всё вручную.

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

Разместите на каждой странице для компьютеров специальный тег link с атрибутом rel=»alternate», который будет вести на соответствующую страницу мобильного сайта. Это поможет роботу Googlebot найти контент, оптимизированный для мобильных устройств.

На странице для мобильных устройств добавьте тег link rel=»canonical» со ссылкой на соответствующую обычную страницу.

  1. Контент мобильной версии должен быть идентичным десктопной.
  2. На всех страницах должны быть мета-теги и заголовки.
  3. Если на десктопной версии используется микроразметка, то ее надо включить и в мобильную версию сайта.
  4. Для мобильной версии сайта должен быть свой robots.txt. Стили и скрипты в роботс лучше не закрывать, чтобы сайт отображался для пользователей и роботов корректно.
  5. В Search Console необходимо внести кроме десктопной версии, еще и мобильную.
  6. Также обратите внимание на реализацию пагинации. Чтобы не появились дубли и поисковые системы данные страницы гугл дублями не считал, внедрите атрибуты атрибутах rel=»prev» и rel=»next» и уникализируйте мета-теги указанием номеров страниц.

AMP

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

Официальную документацию и инструкции по созданию AMP вы найдете здесь.

Что такое AMP?  — это технология ускоренных мобильных страниц, которая активно используется не только в Google, но и в:

  • Bing
  • Yahoo
  • Baidu
  • Twitter
  • Pinterest
  • LinkedIn

Если говорить конкретно о ПС Google, то преимущество использования AMP в их более высоком ранжировании и мгновенной загрузке.

Загружаются они быстро за счет того, что хранятся в кэше Google и загружаются на устройство пользователей прям оттуда. Более того, данные страницы используют урезанный HTML со своим набором тегов и JS-библиотекой, что позволяет их сделать более легкими. Кроме того, такие страницы ранжируются выше, чем страницы без использования AMP.

Если разметить AMP-страницы структурированными данными, то вы увеличите вероятность попадания таких страниц в карусель ПС Google:

Микроразметка для AMP должна быть представлена в JSON-LD и одержать картинку предпросмотра, краткое описание, дату изменения страницы.

Во избежание дублирования контента на amp страницах и страницах основного сайта, используйте  rel=»canonical» на основной странице сайта:

<link rel=»amphtml» href=»https://www.example.com/url/to/amp/document.html»>

а на AMP страницу добавьте каноническую страницу основной страницы сайта:

<link rel=»canonical» href=»https://www.example.com/url/to/full/document.html«>

Проверяем, как новый индекс видит сайт

Сделать это легко:

  1. Заходим  в Google Webmaster Tool
  2. Выбираем “Mobile:Smartphone”
  3. Нажимаем сканировать (по умолчанию стоит на скан главная страница)
  4. То же самое проделываем и с другими страницами сайта, без обозначения корневого домена

В заключение

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

На что обращать внимание рассказывалось в разделе “Что же делать владельцам сайтов”.

Если вы сомневаетесь, что лучше использовать: мобильную версию или адаптивный дизайн, то выбирайте второй вариант. Он оптимальный. Мы также рекомендуем обратить внимание на AMP. Если раньше данная технология могла быть применима больше для новостных сайтов, то сейчас уже это актуально и для интернет-магазинов.

А что вы думаете по этому поводу? Давайте обсудим в комментариях!)

seoprofy.ua

Пользуясь мобильным интернетом, вы, возможно, замечали, что некоторые сайты выглядят лучше, чем другие, а какие-то и вовсе не работают. Может быть, вы даже обратили внимание на такой интересный момент — независимо от количества контента, одни страницы грузятся быстро, а какие-то, наоборот, очень медленно. Странно, правда?

Конечно, скорость интернета, как и хостинг, могут играть определенную роль, но чаще всего скорость загрузки страницы зависит от того, как она была построена.

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

В статье будет рассмотрено создание оптимизированного сайта для различных мобильных устройств, так называемый подход Mobile first (сначала мобильные).

Стратегия Mobile First

Есть два спорных вопроса, которые обсуждают в связи с Mobile First: философия дизайна и техническая реализация. Очень важно рассматривать эти два вопроса отдельно, чтобы не возникло путаницы при использовании таких терминов, как «адаптивный дизайн».

  • Мега-гид по трендам мобильного маркетинга в 2016 году

Философия дизайна

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

Недостатком такого подхода является то, что по существу приоритет отдается пользователям компьютеров и ноутбуков, хотя по данным последних исследований не менее 25% людей в США сегодня используют только мобильные устройства. В другой части света, например, в сельских районах Китая использование мобильного интернета достигает 45%, согласно данным отчета On Device Research 2013 года.

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

Философия дизайна Mobile first переворачивает прежние представления с ног на голову. Хотя многие разработчики по-прежнему начинают проектирование не с мобильных устройств, но теперь они учитывают возможности и ограничения их экранов, создавая дизайн сайта.

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

Например, представьте, что вы получили письмо от Best Buy, в котором рекламируются акции выходного дня. Переходя по ссылке, указанной в письме, вы увидите две совершенно разные версии сайта в зависимости от того, с какого устройства осуществляется вход:

Best Buy,

Слева – мобильная версия сайта, справа – обычная

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

  • Оптимизация дизайна мобильных устройств: планшеты vs смартфоны

Техническая сторона вопроса

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

Например, со стороны клиента ваш девайс обратится к HTML-разметке и обнаружит CSS-файл, который учтет технические требования, сообщаемые вашим устройством, и загрузит соответствующие стили и другую информацию, что в значительной степени повлияет на юзабилити и время загрузки в зависимости от скорости соединения (WiFi, LTE, 3G и т.д.).

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

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

Почему вам стоит обратить внимание на Mobile first?

Ответ прост — это поможет вам получить больше прибыли. Благодаря Mobile first ваш сайт будет грузиться быстрее, а это дает множество преимуществ.

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

Кроме того, использование Mobile first будет окупать себя за счет денег, сэкономленных на стоимости пропускной способности. Все больше и больше покупок совершается с мобильных устройств. Данные по итогам продаж в Черную пятницу 2015 года показывают, что 36,6% продаж пришлось на мобильные устройства. В Киберпонедельник этот показатель составил 26%.

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

Mobile first что это

Увеличение доли онлайн-продаж в Черную пятницу с 2010 по 2015 год

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

Mobile first что это

Начините с мобильной версии сайта

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

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

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

В то же время, прогрессивное улучшение (progressive enhancement) — это просто другое название адаптивного дизайна. Термин впервые ввел в 2011 году Аарон Густафсон (Aaron Gustafson) в книге «Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement». В книге есть полезные примеры разработки HTML-разметки, CSS и JavaScript, она рекомендуется к прочтению.

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

Mobile first что это

Кнопки, макеты, размеры и меню— все выглядит иначе с этой точки зрения.

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

Эти досадные просчеты, возникающие в при дизайне «сверху вниз» , легко решаются путем реализации Mobile first, или прогрессивного улучшения.

  • Почему LPgenerator не использует адаптивный дизайн для шаблонов лендингов?

Несколько слов об адаптивном дизайне

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

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

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

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

Несколько слов об адаптивном дизайне

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

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

То же самое справедливо и для мобильных устройств. Мобильные телефоны делают доступными особые функции, которых нет у других устройств. Воспользуйтесь ими!

Подумайте об определении местоположения, событиях при нажатиях, фотокамере и т.д.

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

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

Выводы

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

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

Высоких вам конверсий!

По материалам: shopify.ca 

lpgenerator.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector