Лучшие инструменты для тестирования адаптивной верстки. Чем тестировать адаптивный дизайн? Проверка адаптивной верстки

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

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

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

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

Быстрая проверка адаптивной верстки

Популярный интернет обозреватель (браузер) Mozilla Firefox оснащен встроенным инструментов проверки дизайна сайта на пригодность к отображению на мобильных устройствах. Чтобы им воспользоваться зайдите в «Меню» — «Разработка» — «Адаптивный дизайн». Либо просто нажмите на клавиатуре одновременно три клавиши ++[M]

Вы должны увидеть примерно следующую картину:

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

Браузер Google Chrome так же имеет встроенную поддержку проверки адаптивности дизайна сайта. Для этого заходим в меню, выбираем пункт «Дополнительные инструменты» и затем «инструменты разработчика» (либо нажимаем клавишу ).

После этого нажимаем иконку адаптивного дизайна (либо одновременно нажимаем на клавиатуре ++[M] ):

В середине экрана вы увидите как будет отображаться ваш сайт на экранах мобильных устройств:

SEO тестирование мобильного дизайна

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

Для проверки адаптивности с помощью сервиса Google заходим по следующему адресу и вбиваем имя своего сайта: https://www.google.com/webmasters/tools/mobile-friendly/ .

Вот так выглядит результат проверки моего блога:

С Яндексом немного сложнее, для проверки надо обязательно зарегистрироваться в сервисе Яндекс.Вебмастер и воспользоваться бета версией интерфейса:

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

Основной задачей этих сервисов презентовать (показать) как будет выглядеть ваш сайт на мобильном устройстве. Сайтов с таким функционалом великое множество. Я приведу лишь некоторые из них. В большинстве случаев они дублируют встроенный функционал FireFox и Chrome.

Google resizer

Начну опять же с Google, у которого есть свой сервис демонстрации адаптивности: http://design.google.com/resizer/#

Quirktools screenfly

Второй симпатичный сервис — это http://quirktools.com/screenfly/ . Он покажет как может выглядеть ваш сайт даже на телевизоре!

Symby.ru adaptest

Ну и чтобы не обидеть «отечественного производителя» приведу пример еще одного сайта: http://symby.ru/adaptest/ . На одной странице вы увидите сразу несколько представлений с различными разрешениями экранов.

Скорость работы мобильной версии сайта

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

PageSpeed Insights

Google как всегда впереди планеты всей: https://developers.google.com/speed/pagespeed/insights/ . Этот сервис покажет как выглядит сайт на экране телефона и даст рекомендации по оптимизации кода для увеличения скорости загрузки на мобильных устройствах.

WebPageTest

И в заключении приведу пример сервиса, который не только покажет как выглядит сайт на мобильном устройстве, но и покажет скорость его работы: http://www.webpagetest.org/

Выводы

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

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

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 сомневаться не приходится.

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

Признаки дружелюбного к мобильным устройствам сайта:

1. Удобно читаемый контент (читается без увеличения), крупные поля форм и кнопки.
2. Отсутствие "тяжелых" картинок, Flash - элементов и излишней анимации.
3. Отсутствие Java-апплетов и Silverlight-плагинов.
4. Отсутствие горизонтальной полосы прокрутки.
5. Минимальная скорость загрузки сайта.
6. Максимально простая навигация.
7. Прописан мета-тег viewport.

Сервисы для проверки сайта на "мобильность"

Для демонстрации работы сервисов возьмём сайт моих хороших партнёров - бюро переводов КОНТЕКСТ .

1. Google Mobile Friendly

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

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

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

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

3. Средство проверки Bing

Проверяется общая оптимизация плюс соответствие 4 пунктам.

Также отображается то, как сайт выглядит на экране смартфона (конечно же, на OS windows, в то время предыдущие сервисы отображали android-смартфон =)).

4. Mobile Checker от W3C

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

Ждал минут 5, в то время как остальные сервисы справлялись за 5-20 секунд.

5. Responsinator

В отличии от остальных не даёт каких-либо оценок, но отображает как выглядит ваш сайт на 6 различных устройствах в двух ориентациях на IOS и Android, что очень круто.

UPD1: 20.07.2017:

6. Adaptivator

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

UPD2: 3.11.2017:

7. iloveadaptive.ru

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

Вывод

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

Поэтому всем, кто хочет быть ближе к клиенту и иметь больше посещений\лидов, рекомендую как можно быстрее адаптировать свои сайты. Задать мне вопрос -

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

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

О влиянии этого фактора на позиции сайта 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 и новый кабинет вебмастера в Яндекс).