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

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

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

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

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

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

Использование

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

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

Значение метатега viewport не задано

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

В метатеге viewport должно быть значение device-width

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

Контент шире экрана

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

Слишком мелкий шрифт

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

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

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

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

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

Вывод

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

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

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

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

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

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

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

Am I Responsive?

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

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

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

deviceponsive

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

• 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

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

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

responsive.is

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

Screenqueries

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

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

Screenfly

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

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

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

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