Уже сейчас через мобильный интернет доступно практически все. Можно не просто найти информацию, товар или услугу — c помощью мобильного интернета можно оплатить такси, заказать билет на самолет и уже вечером отдыхать на берегу океана, так и не садясь за компьютер. Понятное дело, что сайт должен быть оптимизирован под мобильное устройство. И если раньше вы ленились по каким-либо причинам, то не так давно, а именно 2 февраля 2016 года, Яндекс призвал веб-мастеров к адаптации сайта для мобильных устройств, выпустив в свободное плаванье новый алгоритм ранжирования «Владивосток».
Сам Яндекс дал лишь основные рекомендации по оптимизации сайта. Давайте рассмотрим их.
- На сайте не должно быть горизонтально прокрутки. Это весьма логично, так как на обычном ПК она выглядит довольно неудобно, несложно представить какие неудобства она создает на мобильном устройстве, особенно если это сайт с информационными статьями.
- В мобильной версии не должно быть элементов, которые «не дружат» с популярными мобильными платформами, например, флеш-ролики.
Также Яндекс рассказал о том, что из мобильной выдачи убрали видео, ссылаясь на невозможность их просмотра в большинстве браузеров.
И точка. После этого Яндекс будет считать, что ваш сайт оптимизирован под мобильные устройства и приоритет в мобильном поиске повышается для вас. Бесспорно, алгоритм "Владивосток" необходим, но не стоит полагать, что выполнив рекомендации Яндекса можно расслабиться. Это всего лишь основа оптимизации, без которой просмотр сайта будет очень затруднен, ведь мы с вами стремимся в первую очередь предоставить нужную информацию именно для пользователя, робот просто посмотрит на ваш сайт своим неэмоциональным взором. Давайте рассмотрим перечень возможностей, которые помогут адаптировать сайт под мобильные устройства и сделать их приятными для человека.
Следует упомянуть об атрибуте rel="alternate". Данный атрибут может рассказать о разноязычных версиях сайта. В нашем случае мы оповестим робота о мобильной версии, в которой следует указать атрибут rel="canonical", он будет ссылаться на обычную версию.
Мета-тег <viewport>
Если на вашем сайте не задана область просмотра для мобильных устройств, то данный тег позволяет указать настройки отображения на экране: масштаб, ширина и высота. Функционал довольно обширный, но мы разберем наиболее популярные вариации.
html тег viewport необходимо прописывать в head
<meta name="viewport" content="width=device-width">
Самый простой способ. Просто ссылаемся на размер девайса и подбор идет автоматически.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
В данном способе определяется ширина страницы и задается начальный масштаб отображения.
<meta name="MobileOptimized" content="320"/> <meta name="HandheldFriendly" content="true"/>
Дело в том, что не все браузеры распознают тег <viewport>. В таком случае придется использовать старый метод.
| Браузер/платформа | Поддержка <viewport> |
| Android | Да, но до версии 2.2 начальное масштабирование равно 1,0. |
| Symbian/S60, Nokia Series 40, Motorola Internet Browser, NetFront, Openwave (Myriad), Opera Mobile, Opera Mini | нет |
| BlackBerry |
Нет до версии 4.2.1. Да с версии 4.2.1 |
| Internet Explorer | До версии IE6 — нет |
Адаптируйте размер контента для области просмотра, который станет удобным и результат не заставит себя ждать
JavaScript Modernizr
Modernizr — это скрипт, который определяет возможности браузера. Да, есть еще люди, которые сидят с древнейших программ. И если ваш сайт знает, что такое CSS3 и HTML5, то данный скрипт предложит пользователю версию сайта, которая будет правильно работать, позволяя тем самым адаптировать сайт под любые браузеры.
Сенсорное управление на сайте
Предоставьте пользователю возможность пощупать сайт, покрутить в разные стороны, отдаляясь или приближаясь при этом. Тем более что современные дизайны мобильных устройств отказываются от поддержки клавиатур, полностью переходя на сенсорное управление. И этом нам может помочь jQuery-плагин TouchSwipe, который предоставит поддержку сенсорного серфинга по сайту.
Убрать все лишнее
Это сложный процесс. Стоит хорошо задуматься над тем, что стоит удалить в мобильной версии, а что оставить. Чтобы принять правильное решение и грамотно адаптировать сайт под мобильные устройства, лучше придерживаться правила «А если это удалить, то повлияет ли изменение на поведение пользователя». Допустим, посетитель сайта решил купить как-либо вещь. К чему ему тысяча и один параметр фильтра, ведь их можно скрыть, сделав доступными по клику.
Выбрать правильный выпадающий список на сайте
Выпадающие списки подразделяются на два типа: фиксированный и с подстановкой. Необходимо правильно подобрать вид списка, т.к. каждый удобен для определенного случая.
Фиксированный выпадающий список лучше использовать в тех случаях, когда человек знает точно, что он ищет. Например, выбор города или страны. Но если наименования слишком длинные, то название будет отображаться не полностью. В таком случае следует использовать выпадающий список. Также список с подбором стоит применить в «размытом» поиске, когда посетитель знает направление поиска, но нужно уточнить детали.
Повысить скорость загрузки
В подавляющем большинстве сайты имеют небольшие недочеты. Google предоставил замечательный инструмент под названием PageSpeed Insights. С его помощью вы сможете проанализировать проблемные места на сайте, получите рекомендации по исправлению недочетов и узнаете, насколько ваш сайт удобен для пользователей.
Экспертное мнение
Эпоха мобильного интернета началась сравнительно недавно, но уже захватила огромную часть трафика. Человек хочет здесь и сейчас найти/купить то, что его интересует. И настал момент, когда поисковики подошли к этому вопросу серьезно. Конечно «Владивосток» не исключает из выдачи сайты, которые не прошли проверку оптимизации сайта для мобильных устройств, но понизить позиции должен. В настоящее время арсенал веб-мастера растет с каждым днем. А это означает одно, что стоять на месте просто недопустимо. Экспериментируйте, поставьте себя на место пользователя, попробуйте на некоторое время забыть о том, что вы собрались оптимизировать сайт для мобильных устройств и просто ищите минусы и добавляйте то, чего не хватает для удобства.
И помните, что главное звено в этой цепочке именно пользователь. Ведь не будь его и предлагать не имело бы смысла. И если человеку понравился ваш сайт, на который он попал с мобильного телефона, можете быть уверены, что он еще вернется с ПК, возможно, и не раз.
