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

Фреймворков, таких как или , которые существенно облегчают и ускоряют верстку страниц.
подразумевает под собой отличное отображение веб страницы на всех устройствах и расширениях мониторов. Наверное, не у каждого верстальщика имеется полный набор девайсов со всеми возможными расширениями дисплеев, для тестирования своей верстки . Это и не удивительно, ведь техника нынче не дешевая.
Итак. Покупать горы мобильников и планшетов, не вариант - разоримся. Что же делать? Для этих задач были разработаны сервисы для тестирования адаптивных сайтов . Принцип работы их очень прост. Чаще всего имеется фрейм определенного размера, где открывается страница. Эффект получается примерно такой же, как и при просмотре на мобильном устройстве. Хочу заметить, что сервис не всегда в точности покажет отображение страницы на телефоне или планшете. При верстке следует тестировать с помощью сервисов, но после завершения, по возможности, протестировать на наиболее распространенных устройствах.
Итак. К вашему вниманию лучшие инструменты для тестирования адаптивных сайтов .

Инструмент для тестирования адаптивных сайтов от компании Adobe. Для его использования требуется установить себе на компьютер.
Программа позволяет синхронизировать ваши устройства по WIFI и просматривать сайт так, как он будет отображаться на вашем девайсе. На данный момент поддерживаются устройства с такими ОС: iOS, Android, Kindle Fire.

Время прочтения 6 минут

Почему так важно проверять сайты на адаптивность? По данным Яндекс.Метрики, количество людей, пользующихся мобильными устройствами в России, приближается к 50% и постоянно растёт.

В связи с этим поисковые системы стремятся сделать мобильную выдачу удобнее для пользователей. В феврале 2015 г. Google заявляет, что наличие адаптивной или мобильной версии положительно сказывается на ранжировании. Ровно через год, в феврале 2016-го, Яндекс объявляет то же самое.

Какими качествами должен обладать адаптивный сайт

Отсутствие горизонтальной прокрутки.
Корректно прописан метатег viewport.
Интерактивные элементы (ссылки, кнопки, формы и т.д.) не находятся слишком близко друг к другу.
Отсутствие Flash -элементов, Silverlight- плагинов.
Удобная навигация по разделам.
Контент (текст и картинки) адаптирован под размер экрана и читаются без увеличения.

Сервисы для онлайн-проверки адаптивности сайта

Google Mobile Friendly - https://search.google.com/test/mobile-friendly

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

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

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

Недостатки

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

Яндекс.Вебмастер Mobile Friendly - https://webmaster.yandex.ru/site/tools/mobile-friendly/

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

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

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

Недостатки

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

Quirktools - http://quirktools.com/screenfly/

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

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

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

Недостатки

Не умеет определять наличие мобильной версии
Нет списка ошибок

Iloveadaptive - http://iloveadaptive.com/

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

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

Есть возможность посмотреть, как выглядит сайт на разных операционных системах (IOS и Android)
Сам понимает, есть ли мобильная версия
Расширение для Google Chrome

Недостатки

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

http://adaptivator.ru/

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

Подводит общую оценку качеству оптимизации, дает советы по исправлению ошибок.
«Не видит» мобильную версию.

Недостатки

«Не видит» мобильную версию.
Нет возможности указать свой размер экрана.

Вывод

При наличии доступа к сервисам веб-мастеров (Яндекс.Вебмастер или Google Search Console) проводить тест на адаптивность лучше всего с их помощью. Они отражают наиболее актуальные требования поисковых систем к вашему сайту.

Если же такой возможности нет, то можно воспользоваться http://iloveadaptive.com/ в связке с http://adaptivator.ru/ , так как они дополняют друг друга по функционалу.

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

XRespond

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

Responsinator

Сервис Responsinator позволяет проверить отображение сайта в альбомной и портретной ориентации на смартфонах iPhone, Nexus и планшете iPad. Присутствует также возможность переключения между HTTP и HTTPS.

Responsive design checker

Responsive design checker представляет возможность проверки адаптивности сайта на смартфонах, включая новые телефоны, как, например, Google Pixel, планшетах, разных разрешениях монитора, а также позволяет самому корректировать размеры окна.

Matt Kersley

Дизайнер и разработчик из Англии Мэтт Керсли запустил на своем сайте собственный сервис , где можно проверить адаптивность сайта, где по умолчанию стоит ширина 240 пикселей. Керсли решил не добавлять лишних размеров и ограничился пятью: 240px, 320px, 480px, 768px, 1024px.

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

Am I Responsive?

Am I Responsive? – отличный выбор, если вам нужно быстро проверить адаптивность сайта на нескольких устройствах и продемонстрировать это заказчику на скриншоте.

Mobile-Friendly Test

У Google множество сервисов в помощь веб-мастеру и Mobile-Friendly Test один из них. Mobile-Friendly Test отличается от остальных веб-сервисов из нашего списка – его нельзя использовать для просмотра отображения сайта на различных устройств. Его функция заключается в проверке оптимизации сайта на мобильных устройствах, при этом предоставляя советы по исправлению проблем. В ценности советов Google сомневаться не приходится.

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

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

О влиянии этого фактора на позиции сайта Google официально сообщил 21.04.2015 года. Совсем недавно информация о появилась и в блоге Яндекса. Алгоритм, учитывающий удобство отображения сайта на мобильных устройствах, назвали «Владивосток» и, по словам представителей Яндекса, уже сейчас он активно внедряется в России.

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

Удобен ли сайт на мобильных устройствах?

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

на смартфоне с вертикальной ориентацией экрана (в т.ч. на узких экранах около 300 пикселей в ширину);
на смартфоне с горизонтальной ориентацией экрана (от 480 пикселей в ширину);
на планшетах с вертикальной и горизонтальной ориентацией экрана (от 768 пикселей в ширину).

Вполне естественно, что пробовать сайт на разных устройствах не всегда неудобно. Хотя бы потому, что под рукой может не оказаться всех необходимых для этого гаджетов. Решить эту проблему можно при помощи различных эмуляторов мобильных экранов . Впрочем, обращаться к сторонним сервиса не обязательно: подобный эмулятор предустановлен в Google Chrome. Для того чтобы им воспользоваться, достаточно открыть интересующий сайт, нажать F12 (вызвать консоль разработчика) и нажать иконку с изображением мобильного телефона:

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

предустановленном браузере ОС Android;
Google Chrome mobile;
«быстрых» браузерах – например, Opera Mini или UC Browser;
Safari (например, на iPhone).

Как видят сайт поисковые системы?

Первая автоматическая проверка, которую стоит пройти, если вы заинтересовались проблемой адаптивности своего сайта, – это mobile friendly test от Google . Этот инструмент достаточно прост и дает однозначный вердикт, касающийся оптимизации страницы под мобильные устройства. И если этот ответ отрицательный, практически наверняка сайт считается неудобным для маленьких экранов и на уровне алгоритмов Google – со всеми вытекающими отсюда последствиями.

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

Обратите внимание: скриншот сайта на мобильном экране в результатах проверки может не соответствовать тому, как вы видите его на смартфоне. Чаще всего это связано с тем, что в mobile friendly test участвуют только проиндексированные поисковиком файлы, а файлы стилей (css) и скриптов (js) часто закрыты для индексации на уровне robots.txt. Кстати, в соответствии с последними рекомендациями Google их стоит сделать видимыми для поисковых систем.

Оптимизация сайта под мобильные устройства в кабинете вебмастера Google и Яндекс

Важно отметить, что информацию о том, насколько сайт соответствует представлениям поисковиков об удобстве отображения на мобильных устройствах можно получить в кабинетах вебмастеров – Google Search Console и Яндекс.Вебмастер (пока только в бета-версии нового кабинета).

В Google Search Console результаты текущей проверки страниц доступны здесь: Поисковый трафик => Удобство просмотра на мобильных устройствах. Эта страница дублирует сведения, которые мы можем получить с помощью mobile friendly test, но приводится для всех индексируемых страниц сайта по мере обхода их роботами Google:

В новом кабинете вебмастера в Яндексе данные массовой текущей проверки пока не отображаются. Вместо этого там можно найти инструмент, аналогичный mobile friendly test от Google. С его помощью можно вручную проверить, считают ли алгоритмы поисковика ту или иную страницу удобной для просмотра на смартфонах.

P.S.

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

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

Выводы

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

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

Узнать, как поисковики оценивают удобство отображения сайта на мобильных устройствах, поможет mobile friendly test от Google, а также соответствующий функционал в кабинетах вебмастера (Google Search Console и новый кабинет вебмастера в Яндекс).

Хватит менять размер окна браузера, хватит его насиловать! Готов спорить, вы не раз слышали это. Хорошо, возможно и не слышали. Но если вы профессионально занимаетесь разработкой адаптивных сайтов, вы понимаете о чем я: любое изменение DOM или правка CSS, и вы снова начинаете тянуть край браузера вперед, назад, тестируя изменения и просматривая ничего ли не сломалось.

Целью ваших движений является имитация экранов различных устройств.

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

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

Для тестирования я выбрал реально адаптивный сайт PajamasOnYourFeet.com, сайт построено на основе HTML5 шаблона, бесплатно предоставленным EGrappler.

Am I Responsive?

Am I Responsive , очень простой инструмент, позволяющий быстро просмотреть ваш сайт на 4 устройствах. Все они - IOS и разработчик объясняет это фишкой сайта. В общем никаких настроек, никакого выбора, а очень просто и наглядно.

Доступные размеры:

настольный монитор - 1600 x 992px;
ноутбук - 1280 x 802px;
планшет - 768 x 1024px;
мобильный телефон - 320 x 480px.

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

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

deviceponsive

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

Устройства и доступные разрешения экранов.

Macbook - 1280 x 800
iPad портрет - 768 x 1024
iPad портрет - 1024 x 768
Kindle портрет - 600 x 1024
Kindle альбомная ориентация - 1024 x 600
iPhone портрет - 320 x 480
iPhone альбомная ориентация - 480 x 320
Galaxy портрет - 240 x 320
Galaxy альбомная ориентация - 320 x 240

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

responsive test

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

30 различных разрешений доступно на сайте, начиная от огромного настольного монитора, до того, что они называют «дрянный андроид» (справедливости стоит заметить, что есть и нормальный андроид).

Что касается браузера Firefox, то он немного не корректно работает с данным сайтом. Обратите внимание, что на скриншоте не отображается слайдер между зеленым заголовком и белой областью фонового содержания.

responsive.is

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

Доступные варианты устройств - авто (то как вы видите сайт), настольный комьютер, планшет в альбомной и портретной ориентации, смартфон в портретной и альбомном положении. Задавать произвольные размеры в px, к сожалению нельзя.

Screenqueries

А вот возможности и доступные опции отличают Screenqueries от предыдущих сервисов. 14 телефонов и 12 планшетов представлены здесь, с отдельной возможностью переключения в портретный и альбомный режим. Результаты отображаются на сетке с линейками. Также возможно задать произвольное разрешение, потянув за правый или нижний край.

Интересной особенностью этого сайта, для ряда устройств есть “Trueview” вариант, который показывает ваш сайт в нативном браузере устройства.

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

Screenfly

Screenfly пожалуй наиболее функциональный из всех. Доступно 9 больше чем планшет устройств - от 10" ноутбуков, до 24" мониторов, 5 планшетов, 9 телефонов, 3 телевизионных разрешения, а также произвольное разрешение. Добавьте сюда отдельный переключатель в портретный и альбомный режим, а также опцию показа прокрутки. Также можно поделится ссылкой на тест с помощью одной кнопки.

У каждого устройства в меню указано размер экрана в px., а также в правом верхнем углу отображается фактический размер вашего окна браузера.

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

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

P.S. Ошибки по поводу перевода просьба сообщать в личку.