Платон Щукин

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

7 июня 2016, 13:39

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

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

1. Какие бывают мобильные сайты

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

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

Поисковые роботы с одинаковым приоритетом воспринимают перечисленные выше типы адаптации, поэтому выбор полностью за вами. Но стоит обратить внимание на несколько нюансов.
Во-первых, я бы не рекомендовал создавать мобильную версию сайта в отдельной папке (директории), так как робот может некорректно её воспринять.
Во-вторых, если вы остановились на варианте с поддоменом, выбирайте простое и понятное для пользователей доменное имя с явным указанием на мобильный сайт. Например, m.site.com , а в случае наличия регионального поддомена - m.novosib.site.com. Такая прямая зависимость поможет пользователям и поисковым системам связать основную и мобильную версию вашего сайта.
В-третьих, при перенаправлении пользователей на мобильную версию важно, чтобы с десктопной версии страницы стоял редирект только на соответствующую страницу мобильной версии, а не на весь сайт.

2. Несколько слов о создании сайта.

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

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

3. Как проверить сайт на мобилопригодность

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

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

4. Что делать, если обнаружены ошибки

Хочу поподробнее остановиться на тех замечаниях, которые вы можете увидеть в сервисе Яндекс.Вебмастер:

Горизонтальная прокрутка

Если при проверке сайта в Яндекс.Вебмастере выявлена горизонтальная прокрутка, возможно, ширина его страниц больше среднего. Как правило, большинство пользователей использует смартфоны c разрешением 320 px, вы можете ориентироваться на эту величину. Заметьте, некоторые браузеры могут автоматически сжимать страницу под размеры мобильного устройства, поэтому вы можете и не обнаружить прокрутки при просмотре сайта, чего может не произойти у посетителя вашего сайта, и он увидит полосу прокрутки. Вместе с этим следует проверить отступы, встроенные картинки и логотипы – возможно, именно из-за них меняется итоговая ширина той или иной страницы.

Много мелкого текста

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

Отсутствие мета-тега «viewport»

Не меньшее внимание стоит уделять мета-тегу «viewport», который необходим для того, чтобы браузер мобильного устройства знал, что на сайте есть адаптивная верстка. Если выявлено, что на вашем сайте отсутствует данный мета-тег, проверьте, что он расположен именно в контейнере <head>, что соответствует стандарту HTML. Кроме того, мы советуем устанавливать динамическую область просмотра в зависимости от ширины экрана устройства:

<meta name="viewport" content="width=device-width, initial-scale=1">

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

Наличие Flash-элементов

Если на вашем сайте размещены видеоролики, убедитесь, что они корректно воспроизводятся с мобильных устройств и имеют формат HTML5. К сожалению, форматы Flash, Silverlight и Applet большинство мобильных браузеров не воспринимает, поэтому старайтесь не использовать их.

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

20 комментариев
У меня адаптивный сайт.
В мобильной версии я не показываю пользователю сайдбар, футер, шапку, убираю из тела статьи интерактивные блоки, которые не нужны мобильному пользователю.
Может ли робот Яндекса посчитать всё это за клоакинг? Ведь я выдаю мобильному пользователю около 50% имеющейся на странице информации.
И влияет ли на ранжирование в мобильном поиске то, что я не показываю часть информации мобильному пользователю?
mr-qwerty-2008,
  это естественно, что мобильный юзер получает меньше информации чем на той же странице с десктопа, этот момент яндекс знает и клоакингом не считает, я уже задавал им такой вопрос =)
Если Вашей целью является предоставление пользователю только нужной и важной информации, то Вы спокойно можете скрыть лишние, на Ваш взгляд элементы, ведь этим Вы сделаете Ваш сайт удобнее и информативнее, нарушением это считаться не будет.
В данном случае не вижу каких-либо предпосылок для ограничений в ранжировании со стороны наших алгоритмов.
Хотелось бы передать благодарность bootstrap'у. Читаю эту статью и горжусь за свой сайт :)
Zempik,
 +1 без него было бы намного хуже, ребята полмира осчастливили
admin@volzsky.ru
8 июня 2016, 08:11
А под "сайты с динамической версткой" вы понимаете "резиновую" вёрстку или именно подмену страниц на стороне сервера?
Под динамической версткой мы подразумеваем, что в зависимости от мобильного устройства сервер отправляет различные варианты кода HTML и CSS, не изменяя при этом URL страницы. Поэтому, скорее всего, ближе к эту понятию будет Ваш первый вариант. 
>>Во-первых, я бы не рекомендовал создавать мобильную версию сайта в отдельной папке (директории), так как робот может некорректно её воспринять.
Вот тут поподробнее, пожалуйста. Для мобильной версии есть у Гугл рекомендация указывать canonical для страниц моб. версии, указывающие на десктопную (чтобы избежать дублирования). Яндекс не воспринимает canonical, если там указан другой домен (то есть с субдомена не получится настроить). Не будет ли для Яндекса проблемы с дублированием контента десктопной версии на моб. версии?
Вы верно заметили: атрибут rel="canonical" игнорируется, если он ведет на другой сайт или поддомен. Однако дублирования сайтов в выдаче происходить не должно, так как как робот отличает основную и мобильную версию и показывает в поиске только тот сайт, который соответствует выдаче. Кроме того, наличие мобильной версии Вы сможете указать при помощи тега rel="alternate", робот так же учтет эту информацию при индексировании. 
platon,
спасибо!
Про 320px у большинства пользователей - неправда.
по данным li, моб.трафик, распределение:

640x480 19.8%
1024x768 5.9%
800x600 2.9%
1280x800 2.5%
1920x1080 0.3%
240x320 0.2%
1152x864 0.1%
elrond-elf,
а остальные 70% приходятся на расширения как раз менее 480
Комментарий удалён
Проверьте, актуальна ли информация в разделе рекомендаций?
Для этого необходимо перейти по ссылке «Ознакомьтесь». Если те страницы, которые там указаны, сейчас успешно проходят проверку инструментом для мобильных страниц, то Вам необходимо заново нажать кнопку «Проверить» в разделе «Диагностика сайта» и дождаться окончания процесса.

Если после этого ситуация не изменится, то напишите в службу поддержки, я постараюсь Вам помочь! 
"Если Вашей целью является предоставление пользователю только нужной и важной информации, то Вы спокойно можете скрыть лишние, на Ваш взгляд элементы, ведь этим Вы сделаете Ваш сайт удобнее и информативнее, нарушением это считаться не будет." 
Вот именно поэтому лично я не люблю мобильные сайты и не захожу на них с мобильного. Это своего рода - "огрызок", а удобней и информативнее сайт должен быть и в обычной версии. 
victor-tribunsky
24 июня 2016, 20:32
Mobile friendly тест Гугла говорит, что сайт http://fithaus.ru/ отлично оптимизирован для мобильных, ни одного замечания. Ваш новый тест показывает целых два замечания. На моих смартфонах никаких горизонтальных прокруток нет. Кому верить?
А viewport мне вообще не нужен. В зависимости от устройства сайт подключает соответствующую CSS, и верстка меняется.
Размещение мета-тега "viewport" носит рекомендательный характер, но его наличие проверяется на любом мобильном сайте. Этот мета-тег сообщает браузеру, как корректно масштабировать страницу на мобильных устройствах, и делает процесс отображения страницы более управляемым.
Так как в Вашем случае страницы на мобильных устройствах отображаются корректно при помощи CSS , то Ваш сайт в целом может быть признан мобилопригодным, однако при проверке страниц инструментом замечание об отсутствии данного мета-тега все же будет отображаться.

Если у Вас есть другие вопросы по замечаниям, выявленным на данном сайте, напишите нам в службу поддержки, чтобы было удобнее вести диалог.
victor-tribunsky
1 июля 2016, 12:35
platon,
Все понятно, Платон. Спасибо.
Есть 2 сайта uogorod.ru и m.uogorod.ru
Как для них настроить Яндекс Метрику?
Нужно ли создавать отдельный счетчик для мобильной версии?
В Вебмастер каждый сайт заносится по отдельности, правильно понимаю?
Добрый день. Подскажите, пожалуйста, верно ли я понимаю, что динамическая верстка мобильного сайта - это то же самое, что называется RESS? Т.е., например, при запросе пользователя мы определяем User-agent (или, например, разрешение экрана) и через php выдаем нужный шаблон? Для компьютера - большой шаблон, для мобильного или планшета - сокращенную версию. Все происходит без перенаправления, на одном url.
Если я верно все понимаю, то нужно ли как-то указывать поисковой системе, что есть 2 варианта верстки сайта или боты найдут все сами? Не получится ли, что скрытая для мобильной версии информация пропадет из индексации основного бота? И не будет ли дублей документов, санкций? Спасибо большое!
aleksei3752,

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