Наверняка вы уже слышали, что мобильная оптимизация сайта влияет на скорость и эффективность продвижения в 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 месяца. Жмите кнопку и вперед - к высоким продажам!

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

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

Viewport

Тег meta viewport – это обыкновенный HTML-код, который отвечает за отображение сайта на экране мобильного устройства и изменении масштаба страницы. Этот тег позволяет прописать масштаб страницы при первой загрузке сайта, а также указать максимальное значение масштабирования страницы или полностью отключить увеличение страницы.

meta viewport выглядит примерно так:

Meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1.0;">

initial-scale указывает масштаб сайта при первом посещении сайта в окне мобильного браузера,

maximum-scale указывает максимальное значение увеличения страницы сайта.

Для разработки адаптивного шаблона этот тег просто незаменимый, однако его можно применять и в неадаптивных шаблонах. Этот мета тег необходимо использовать в паре с спецификацией Media Queries.

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

Встроить Media Queries можно прямо в шаблон страницы:

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

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

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

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

Владельцы продукции компании Apple – IPhone или IPad могут добавлять иконки сайтов на главный экран. Добавить иконку сайта для продукции Apple не составит труда.

Реализовать отображение иконки с помощью следующего кода:

Данный код необходимо вставить в раздел head. При этом необходимо добавить изображение иконки в корень сайта. Название файла должно начинаться с фразы apple-touch-icon-.

Экран заставки

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

Добавить заставку можно путем вставки следующего кода в шапку сайта:

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

Проверьте себя, все ли вы делаете для высокого ранжирования в мобильной выдаче?

Содержание статьи:
-
-
-
-
-
-
-

1. Специфика мобильной оптимизации

Мобильная оптимизации имеет свои особенности и сложности, состоящие в том, что удобство и простота взаимодействия пользователя с сайтом является самым важным показателем качества мобильного сайта. Кроме того, результаты мобильного поиска локализированы, то есть привязаны к местоположению пользователя, поэтому мобильный трафик, зачастую, это региональный трафик. Также несколько усложняет мобильную оптимизацию, тот момент, что частотность запросов в мобильном поиске отличается от частотности в обычном поиске и статистику запросов мобильной выдачи приходится собирать отдельно, таким образом и семантическое ядро мобильной версии сайта будет отличаться. Кстати, проверить частоту запросов в мобильной выдаче можно с помощью Yandex.Wordstat . А проанализировать список запросов в мобильной выдаче поиска, по которым ваш сайт показывается в мобильной выдаче, вы можете с помощью Google Webmaster Tools и Google Analytics.

Как проверить мобильность сайта?

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

• Основной инструмент - Page Speed Insights – не только проверяет лояльность сайта к пользователям мобильных, но и дает рекомендации по ускорению и оптимизации сайта под мобильные.
• – с помощью это инструмента вы сможете увидеть как мобильный робот поисковой системы Google видит ваш сайт.
• - внутренний сервис поисковой системы, проверяющий насколько ваш сайт соответствует требованиям мобилопригодности.
• TestMySite - внешний сервис, красиво и наглядно проверяет мобайлфрендли, мобильную скорость сайта и скорость загрузки на десктопных устройствах.
• W3 mobile checker - инструмент для веб - разработчиков, которые хотят сделать свои веб - страницы или веб - приложение лучше работающим на мобильных. Пока находится на доработке.
• Resizer - интерактивная программа просмотра, которая помогает дизайнерам тестировать контент сайта на настольных компьютерах, мобильных и планшетах
• Quirktools - сервис для просмотра сайта на разных устройствах: мобильных, планшетах, компьютерах и даже телевизорах.
• Проверка мобильных страниц в Яндекс.Вебмастер – также проверяет лояльность сайта к мобильным пользователям

3. Какие особенности различных способов мобильной оптимизации?

• Мобильная версия - когда и URL, и код изменяются. Сервер определяет тип устройства, а потом перенаправляет на нужную страницу - m.site.com (для смартфонов), t.site.com (для планшетов), phone.site.com – для телефонов попроще. Для разных типов устройств используются разные варианты кода и разные URL страниц.
Плюсы: в альтернативную мобильную версию легко вносить правки, не затрагивая основной сайт; простота и удобство для пользователей, быстрая загрузка.Минусы: отличающийся от основного URL, есть вероятность дублирования контента и 404 ошибки, упрощение функционала ведет к ограничению нужного контента.
• Динамический показ (RESS - Responsive Design + Server Side) - один URL, разный код под разные user-agents. Сервер отправляет в ответ на запрос определенного URL различные варианты кода HTML и CSS. Какой именно код отправлять, определяется за счет сканирования поисковым роботом, размещенного HTTP-заголовка Vary, который помогает выбирать именно тот контент на сайте, который оптимизирован для мобильных.
Плюсы: ненужные JavaScript можно удалить из HTML; можно настроить для каждого устройства свою верстку и свои приложения. Минусы: сложный в разработке и не отработанно до конца определение типов мобильных устройств.
• Адаптивный дизайн - когда URL и код не изменяются. Сервер отправляет всем устройствам и мобильным, и десктопным одинаковый HTML- код, который адаптируется в зависимости от размеров экрана с помощью CSS. В этом случае, нужно проследить, чтобы были открыты для индексации нужные файлы CSS, JavaScript и изображения.
Плюсы: относительно легкий в разработке и то что URL не изменяется.Минусы: медленная скорость загрузки и безальтернативность.

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

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

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

5. Как правильно оптимизировать сайт под мобильные устройства?

<1> Скорость загрузки страницы, для мобильных пользователей важнее, чем для пользователей десктопов. Она не должна превышать 3-и секунды, однако страницы из мобильной выдачи на устройстве пользователя грузятся в среднем целых 22 секунды. Чтобы понять, как вы можете облегчить и сжать свой сайт, воспользуйтесь сервисом Page Speed Insights – в нем вы найдете подробные рекомендации по ускорению своего сайта под мобильные. А именно, сжатию или вынесению в отдельный файл JavaScript и CSS, анализатор дает их детальный список. Не забывайте, что можно использовать асинхронноую загрузку скриптов , чтобы пользователи не теряя времени и не уходя с вашего сайта во время загрузки скриптов в фоновом режиме.

<2> JavaScript, CSS и изображения нельзя блокировать. Проверить блокировку, вы можете в Google Search Console в разделе Индекс Google >> Заблокированные ресурсы. Блокировка JavaScript, CSS и картинок может привести к низким позициям в мобильной выдаче.

<3> Не должно быть «ошибок 404» на страницах, которые показываются мобильным веб-серферам. Бывает такое, что страница может нормально отображаться на десктопах, но выдает "ошибка 404" на смартфонах, например, или на планшетах. Проверить на наличие ошибок вы сможете с помощью программ Xenu, ScreamingFrog или с помощью Google Search Console в разделе Сканирование >> Ошибки сканирования.

<4> Если у вас мобильная версия, то для того, чтобы контент основной и мобильной версии не дублировался, нужно правильно настроить их индексацию. Если мобильная версия на поддомене попадает в обычную выдачу поисковиков, то не нужно создавать отдельный robots.txt и указывать: User-agent: * Disallow: / Лучше прописать на страницах m.site.com/page-1 следующий код - а на страницах основного сайта и поисковая система поймет, какой урл основной.

<5> Для мобильных версий страниц сайта нужно правильно настроить редирект для каждой из них, так как переадресация например на главную будет расцениваться поисковиками как ошибка. Однако, на мобильных страницах не должно быть больше 5-ти редиректов, так как считается, что уже после пятого редиректа поисковики не индексируют их.

<6> Если на мобильной версии сайта есть анимация в формате Flash или видео с проприетарным проигрывателем, то нужно заменить их на теги HTML5, так как этот способ поддерживается всеми браузерами. Например, создать подобную анимацию можно с помощью Google Web Designer .

Вместо заключения

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

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

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

В апреле 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, или у которых изменение дизайна невозможно.