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

В апреле 2015 года вышло обновление поискового алгоритма Google под неофициальным названием «Mobilegeddon», а в феврале 2016 Яндекс объявил о работе похожего алгоритма под названием «Владивосток». Их суть похожа - в мобильном поиске предпочтение отдается тем сайтам, которые адаптированы для просмотра на мобильных устройствах. Это означает, что игнорировать мобильную адаптацию больше нельзя.

И дело не только в требованиях поисковых систем. Глобальный мобильный трафик догнал десктопный еще в начале 2014 года. А сегодня уже около 67% трафика в Рунете приходится именно на мобильные устройства. Учитывая потребности наших читателей, мы проводим работу по мобилизации блога. Совсем скоро вы увидите наш обновленный ресурс, который будет очень удобно читать на различных устройствах.

1. Проанализируйте целевую аудиторию

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

• демография (пол и возраст);
• география (из каких регионов больше всего переходов);
• устройства (какие устройства наиболее популярны среди ваших посетителей - десктопы, мобильные телефоны или планшеты);
• операционная система (Android, iOS, Windows Phone, Windows 7 и т. д.);
• поведение на сайте (глубина просмотра, время на сайте, отказы и т. п.).

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

2. Адаптируйте шаблон для просмотра на мобильных устройствах

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

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

В этом случае будет 2 сайта: десктопный и мобильный. Версия для мобильных размещается на новом домене (типа m.site.ru ).

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

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

Недостатки :

• необходимость полноценного администрирования нового сайта;
• из-за раздельного обслуживания растут затраты при внесении изменений.

Мобильную версию на отдельном домене имеет магазин trial-sport.ru

Динамический показ

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

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

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

Недостаток - возможны проблемы при отображении на устройствах, размеры экранов которых не совпадают с указанными разработчиками.

Сайт decathlon.ru использует один URL с разным набором HTML-кода

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

В этом случае макет сайта точно подгоняется под любой размер дисплея.

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

• корректное отображение на всех устройствах;
• нет необходимости отдельно вносить изменения в мобильную версию.

Недостатки :

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

Сайт компании Восток-Сервис использует адаптивный дизайн, который подстраивается под любые экраны устройств

Помимо указанных способов адаптации можно использовать плагины для популярных CMS. Например, для WordPress есть WPtouch и WP Mobile Edition. Это дешевое решение, но корректность работы сайтов оставляет желать лучшего. И если для блогов это выход, то для сложных проектов такое решение неприемлемо.

3. Упростите дизайн

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

Пример минимализма в дизайне

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

4. Поработайте над улучшением юзабилити

При разработке навигации, прежде всего, думайте о пользователе и его удобстве. Любая страница должна быть доступна в пару шагов — без сложных фильтров и списков. Для совершения звонка в одно нажатие правильно прописывайте формат номера с кодом страны и города +7 495 … . Предусмотрите авторизацию в один клик через соцсети. Одним словом — старайтесь минимизировать любые действия посетителей до цели.

Вместо курсора мышки на смартфоне используется палец, так что все элементы должны быть достаточного размера. Человек не должен увеличивать изображение, чтобы кликнуть по какому-либо элементу. Не используйте шрифты с засечками, завитушками, курсив. Оптимальный размер шрифта - 16 пикселей, высота строки - 1,2 em.

5. Ускорьте загрузку страниц

Ускорение загрузки, с одной стороны, улучшает поведенческие факторы, а с другой, позитивно влияет на ранжирование. Используйте различные сервисы сжатия:

• HTML и скриптов (HTML compressor или Gzip);
• кода CSS (CSS minifier или CSS compressor);
• JS кода (Javascriptcompressor , jscompress и др.);
• изображений (Optimizilla , Resizepiconline , EWWW Image Optimizer и др.);
• используйте кеш браузера.

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

6. Используйте социальные кнопки

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

7. Оптимизируйте контент

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

Следуйте таким правилам:

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

8. Не ограничивайте доступ к контенту

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

9. Оставайтесь в тренде

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

• модульный дизайн (контент группируется в блоки, которые выстраиваются в одну ленту или несколько лент в зависимости от размера экрана);
• плоский дизайн (тени, полутени, объем - это все осталось в прошлом);
• подход mobile first (раньше сайты делали для ПК, а потом в силу необходимости адаптировали для мобильных - сегодня все наоборот).

10. Не забывайте анализировать сайт на мобилопригодность

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

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

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

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

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

Введение

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

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

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

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

Итак, на что же обращает внимание тест на мобильную совместимость от Google?

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

1. Конфигурация окна просмотра

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

2. Четкость шрифта

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

3. Избегайте использования плагинов

Flash, Java и Silverlight доставляют много неудобств пользователям мобильных устройств. Делайте выбор в пользу родных веб-технологий (например, HTML5).

4. Размер содержимого

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

5. Размер кнопок и ссылок

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

Некоторая справочная информация

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

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

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

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

Ну что ж, давайте попробуем сделать это.

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

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

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

Итак,

*У вас есть существующий сайт;

*Вы хотите внести минимальные изменения в HTML и CSS веб-сайта.

В таком случае у вас есть несколько вариантов:

Измените шаблон вашего сайта

Многие сегодняшние CMS позволяют менять тему, или шаблон. И многие из шаблонов – адаптивные, то есть подстраиваются под нужную ширину экрана.

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

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

Плюсы

Возможность менять дизайн мгновенно.

Доступно несколько тысяч тем (некоторые бесплатно).

Минусы

Не все предыдущее содержимое может быть видно на новом шаблоне без дополнительной работы.

Новая конструкция не всегда может соответствовать вашему бренду.

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

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

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

Трафик мобильных устройств в Рунете на 2017г. по данным Digital Report составляет 75%, а в 2018г. повысится до 79%.

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

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

• Как узнать, нужно ли заказывать мобильную оптимизацию сайта прямо сейчас?
• Как самостоятельно проверить mobile-friendly свойства и показатели веб-проекта?
• Насколько готов ваш сайт/магазин к приему mobile-трафика?

Мобильная оптимизация сайта: 5 бесплатных тестов

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

1. Нужна ли вам mobile-оптимизация прямо сейчас.
2. Насколько удобно вашим mobile-клиентам.
3. Какие ошибки скрывает ваш сайт.

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

Мы одновременно работаем с десктопной и mobile (адаптивной) версией, чтобы по максимуму раскрутить сайт или интернет-магазин в ТОП-10, привести к вам покупателей.

Степень оптимизации мобильного сайта отображается в 2-х параметрах:

• Mobile Friendless (дружественность, юзабилити - 96/100)
• Mobile Speed (скорость - 53/100)

В примере выше протестированный сайт 100% нуждается в мобильной оптимизации скорости. Зато с адаптивностью (удобством) все хорошо. На скриншоте видно, что проекту также требуется ускорение десктопной версии (Desktop Speed - 66/100).

Если тест покажет «красные» или «желтые» цифры в отчете, срочно исправьте ошибки.

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

Посмотреть текущий процент mobile-трафика можно в статистике Яндекс.Метрики :

Отчеты -> Стандартные отчеты -> Технологии -> Устройства

В этом примере квартального отчета 64,9% общего трафика приходится на ПК (десктопные персональные компьютеры), а остальные 35,1% - это мобильные переходы:

• смартфоны - 31,6%
• планшеты - 3,5%

Если mobile-трафик более 10%, то мобильная оптимизация сайта в результате повысит продажи. Но полное отсутствие мобильных визитов - проблема...

Нулевой mobile-трафик свидетельствует о серьезных ошибках. Вероятно ваш web-проект:

• не прошел мобильную оптимизацию
• теряет mobile-клиентов и прибыль
• имеет низкую конкурентоспособность в мобильной выдаче поиска Яндекс и Гугл

Чтобы оценить тенденции роста mobile-визитов с течением времени и на перспективу, нужно слегка перестроить отчет Яндекс.Метрики.

Выберите на той же странице отчета период - «ГОД» и отображение - «Линии» или «Области»:

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

Учтите, что конкуренты не спят!

Если конкурентные сайты лучше подготовлены к мобильным визитам, заточены под mobile-трафик, удобны и быстры в эксплуатации, вы теряете клиентов и деньги. Даже 10% мобильного трафика - существенная коммерческая величина, которой нельзя пренебрегать.

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

5. Аудит мобильной оптимизации сайта

Самый простой способ проверить ваш веб-ресурс на готовность к mobile-визитам - заказать аудит в нашей компании «ОПТИМИЗАТОР». В этом случае вы:

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

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

Из чего состоит мобильная оптимизация сайта

1. Работа с ключевыми словами

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

2. Оформление

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

• шрифты и стили
• блоки и модули
• цвета и фоны
• структура и навигация
• меню и виджеты
• поля и отступы

3. Ускорение

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

4. ГЕО-параметры

Поисковые системы в mobile-выдаче для платформ Android и iOS учитывают ГЕО-локацию, показывают пользователям ближайшие предложения по их региону. Мобильная оптимизация сайта невозможна без настройки GEO-параметров.

Как минимум, нужно добавить проект в популярные ГЕО-сервисы, справочные службы Яндекса и местные карты типа 2GIS.

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

6. Mobile-юзабилити

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

− Адаптивная верстка (дизайн автоматически подстраивается под разные экраны гаджетов) или...

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

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

Ведь это не очень дорого, а все расходы окупятся в ближайшие 2-3 месяца. Жмите кнопку и вперед - к высоким продажам!

Гугл декларирует, что учитывает в своем поиске оптимизацию сайта для мобильных устройств. Если вы добавили свой ресурс в google webmasters , то возможно у него появилась пометка «Сайт не оптимизирован для мобильных устройств». Это означает, что нужно провести работу по улучшению видимости ресурса в глазах google и адаптировать сайт под мобильные устройства. Нижеприведенные инструкции применимы не только для WordPress ресурсов, но и для любых других движков.

Для проверки отображения сайта на адаптивность будем пользоваться сервисом google https://developers.google.com/speed/pagespeed/insights .

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

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

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

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

По ссылке «Настройте область просмотра» приведена , разъясняющая, как использовать этот тег. Детально разбираться с ним не будем. Просто воспользуемся указанием google о том, что на сайте в блоке head нужно указать инструкцию:

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

Видим рост с 69 до 80%.

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

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

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

#wrapper { width: 1000px; }

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

Мы будем исправлять эту проблему с помощью следующего приема. Перепишем приведенные выше стили следующим образом:

#wrapper { max-width: 1000px; width: 100%; }

Броузер при формировании страницы в качестве ширины элемента будет использовать минимальное значение из двух: max-width и width. В этом случае, если ширина экрана пользователя превышает 1000px, то будет использоваться значение 1000, а если ширина экрана меньше 1000px, будет использоваться значение, равное ширине экрана (100%).