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

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

1553

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

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

1. Так как поисковые роботы с одинаковым приоритетом воспринимают различные типы адаптации, стоит обратить внимание на несколько нюансов.

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

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

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

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

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

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

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

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

Если при проверке сайта в Яндекс.Вебмастере выявлена горизонтальная прокрутка, возможно, ширина его страниц больше среднего. Как правило, большинство пользователей использует смартфоны 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 большинство мобильных браузеров не воспринимает, поэтому желательно их не использовать.

Журналист, новостной редактор, работает на сайте с 2009 года. Специализация: интернет-маркетинг, SEO, поисковые системы, обзоры профильных мероприятий, отраслевые новости рунета. Языки: румынский, испанский. Кредо: Арфы нет, возьмите бубен.

Прокомментировать

5 Комментарий на "Как сделать сайт удобным для мобильных устройств. Рекомендации Платона Щукина"

Notify of
Sort by:   newest | oldest | most voted
Татьяна Толстухина
Гость

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

Kesarev
Гость

Посмотрите сайт
Все оптимизировано, PHP 7.0, кэши, сжатие, но все же на мобилке не очень быстро грузится. В чем причина???

Сергей Петренко
Администратор

Посмотрели. Судя по тому, что ничего не оптимизировано, вы просто спаммер.

Kesarev
Гость

А что самое главное на ваш взгляд в оптимизации сайта. Куда копать в первую очередь?

Галина Гаджиева
Гость
Этот вопрос сегодня актуален как никогда. У моего блога долгое время не было мобильной версии, да я и не понимала зачем она нужна. А сейчас осознаю, что все сайты должны быть оформлены, чтобы можно было читать и видеть их с телефона, особенно это касается интернет-магазинов. Потому что на себе проверила, что 90% всех покупок я оформила через телефон. Мне мобильную версию мой мастер, который настраивал блог, к сожалению, не сделал, поэтому заказала у http://www.mobile-version.ru . настроили все за 2 дня. и кстати, посещаемость сразу увеличилась. Пошли комментарии, ретвиты и репосты. Я прям рада, что ко мне все-таки пришло осознание того,… Read more »
wpDiscuz