2015-09-11 8204 4 Денис Абдуллин

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

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

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

Screenfly – проверка адаптивности сайта с выбором дейвайса

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

Mattkersley – все размеры на одной странице

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

Responsive.is – проверка адаптивности на нескольких устройствах

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

Лично я не пользуюсь такими сервисами, а просто уменьшаю ширину браузера . Плюс ко всему, сервисы проверки адаптивности сайта делают тоже самое, лучше смотреть свой проект на реальных устройствах, в стандартных браузерах Android и Safari на iPhone.

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

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

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

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

Проверить

Что такое адаптивный сайт?

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

Чем отличается адаптивный сайт от мобильной версии?

Если у сайта есть мобильная версия, то при загрузке такого сайта с мобильного телефона, вас перенаправят на другой адрес: site.ru → m.site.ru. Мобильная версия — это отдельный сайт с другим адресом.

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

Данная проблема решается двумя способами: добавить мобильную версию m.site.ru или НЕ делать отдельный сайт, но добавить вашему основному сайту адаптивности. Это специальные стили и скрипты, которые включаются, если ширина экрана слишком мала: например, спрятать меню, увеличить шрифт, вместо крупных изображений показать маленькие и т.п.

Строго говоря, нельзя сравнивать адаптивный сайт и мобильную версию сайта. По сути адаптивный сайт = полная версия + версия для планшетов + версия для телефонов (мобильная), и всё это в одном флаконе. То есть, одно понятие заключено в другом.

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

Почему ширина телефона в данном сервисе такая маленькая?

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

Какой у меня размер окна браузера?

На устройствах с ретино-подобными дисплеями показанные размеры будут отличаться от реального разрешения в пикселях, которое указано в спецификации устройства. Смартфоны покажут 320×480 или 480×800 пикселей, планшеты — 1280×800.

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

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

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

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

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

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

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

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

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

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

Недостатки

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

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

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

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

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

Недостатки

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

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

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

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

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

Недостатки

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

1. Iloveadaptive - http://iloveadaptive.com/

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

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

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

Недостатки

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

1. http://adaptivator.ru/

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

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

Недостатки

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

Вывод

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

Если же такой возможности нет, то можно воспользоваться http://iloveadaptive.com/ в связке с http://adaptivator.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 и новый кабинет вебмастера в Яндекс).