Чем тестировать адаптивный дизайн? / Habr
Хватит менять размер окна браузера, хватит его насиловать! Готов спорить, вы не раз слышали это. Хорошо, возможно и не слышали. Но если вы профессионально занимаетесь разработкой адаптивных сайтов, вы понимаете о чем я: любое изменение 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. Ошибки по поводу перевода просьба сообщать в личку.
habr.com
5 отличных сервисов для проверки адаптивного (responsive) дизайна любого сайта
Здравствуйте, дорогие читатели блога. Как уже и не удивительно, что адаптивный дизайн становится всё популярнее в русском интернете. И конечно же верстальщикам нужно изучать его. Так как адаптивный дизайн скоро будет практически на всех сайтах, потому что всё больше лди пользуются мобильными устройствами.
И хочется сказать, что сайты с адаптивным дизайном на много удобнее читать на таких устройствах нежели без него.
Сегодня я хочу представить Вам 5 очень полезных и классных сервисов, с помощью которых Вы сможете проверить сайт на адаптивность.
И так, поехали.
5 сервисов на которых можно проверить сайт на адаптивность.
Хороший сервис для проверки сайтов. Есть множество разрешений экранов как планшетов так и телефонов.
Простой сервис для проверки сайта на адаптивный дизайн от Matt Kersley. Так же доступны все популярные разрешения мобильных девайсов.
Очень классный сервис, который проверит любой сайт. Очень понравилось оформление, а так же функциональность.
Очень красивый и функциональный сервис. Есть возможно даже проверить как будет выглядеть сайт на телевизоре 🙂
Ещё один, уже последний в данной подборке сервис с тоже не плохим функционалом.
Вот и всё, дорогие друзья, теперь Вы можете проверить сайт на адаптивность. Если Вы уже заметили, что блог beloweb.ru тоже имеет адаптивный дизайн и его очень удобно читать на мобильных устройствах. 🙂
До скорых встреч.
beloweb.ru
Как проверить адаптивный дизайн сайта — Технический блог
10 июля 2016 / HTML & CSSСегодня уже нет нужды убеждать кого-либо в необходимости мобильной версии сайта. Ведь с каждым днем посетителей со смартфонов и планшетов становится все больше и больше. На момент написания этой статьи около 20% посетителей моего блога используют мобильные устройства для просмотра. То есть каждый пятый заходит на мой сайт с телефона или планшета.
Несколько лет назад я даже не думал о таких посетителях, но когда их количество превысило 10% от общего числа я стал использовать адаптивную верстку. Это позволило корректно отображать контент на мобильных устройствах и повысить лояльность к сайту как посетителей, так и поисковых систем.
Мобильная версия сайта и адаптивный дизайн — это не одно и тоже. В данной статье речь пойдет о тестировании адаптивной верстки, когда дизайн сайта, меняется в зависимости от разрешения экрана устройства посетителя.
Чтобы быть уверенным, что ваш сайт правильно отображается на мобильных устройствах необходимо произвести проверку, и для этого существует несколько полезных сервисов и инструментов.
Быстрая проверка адаптивной верстки
Популярный интернет обозреватель (браузер) Mozilla
Вы должны увидеть примерно следующую картину:
Изменяя разрешение и ориентацию экрана можно проверить как будет отображаться ваш сайт у мобильных посетителей.
Браузер Google
После этого нажимаем иконку адаптивного дизайна (либо одновременно нажимаем на клавиатуре [Ctrl]+[Shift]+[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. После чего, конечно же, необходимо проверить лояльность поисковых систем к вашему дизайну. А уже потом, для успокоения души или чтобы похвастаться, можно воспользоваться онлайн сервисами.
moonback.ru
Адаптация сайта под мобильные
Откройте свой сайт на мобильном и попробуйте оставить заказ или найти подробности об услуге. Если все прошло гладко, поздравляю – вашим сайтом можно гордиться пользоваться с мобильника. Если же пришлось прищуриваться, чтобы прочитать мелкий текст, или тыкать пальцем несколько раз, пытаясь попасть в нужную кнопку – значит, нужны доработки.
Хьюстон, у нас проблема
Самый простой способ проверить адаптацию сайта под мобильные устройства – открыть его на этих самых мобильных (смартфон, планшет). Явные признаки проблем:
Сайт или какие-то его части (картинки, таблицы) не помещаются целиком в экран:
Всё слишком мелкое, не получается с первого раза попасть пальцем в кнопку или ссылку:
Приходится прокручивать несколько экранов шапки (или фильтров), чтобы добраться до контента:
Всплывающие баннеры (более 50% экрана), либо слишком много рекламы:
Если смартфона под рукой нет или он не подключен к сети, можно воспользоваться онлайн-сервисами с обычного компьютера:
1. Mobile Friendly от Google: https://search.google.com/test/mobile-friendly
Вбиваем адрес сайта, жмем «Проверить», видим результат:
2. Проверка мобильных страниц от Яндекса: https://webmaster.yandex.ru/site/tools/mobile-friendly/ (если ваш сайт уже добавлен в Яндекс.Вебмастер)
Выбираем адрес сайта, жмем «Проверить», видим результат:
3. Проверка в браузере в Инструментах разработчика
Открываем сайт в браузере и в меню (браузера) ищем пункт «Дополнительные инструменты» – «Инструменты разработчика». Либо жмем на клавиатуре F12. Если не сработало F12, жмем сочетание клавиш CTRL + Shift + I. Справа или внизу браузера нам откроется Панель разработчика, на ней жмем на иконку переключения на мобильные устройства и выбираем модель смартфона, на которой хотим проверить сайт:
Ключ на старт
Итак, проблема выявлена, теперь нужно определиться, каким мы хотим видеть свой сайт на мобильных устройствах.
Для разработки макета сайта для мобильных можно обратиться:
– К профессиональным дизайнерам. С ними сразу оговорите, для каких размеров экрана вам нужны макеты (например, 320 пикселей в ширину для смартфонов и 768 пикселей в ширину для планшетов) и для каких разделов сайта (например, главная страница, типовая внутренняя страница, список статей в блоге и статья блога). Что еще стоит проверять, принимая макет от дизайнера, читайте в статье.
– Сразу к верстальщикам. Некоторые верстальщики сами решают, куда и какие блоки сайта смещать, чтобы контент помещался в экран мобильника. Будьте готовы к тому, что результат может вас удивить – как приятно, так и не очень. Поэтому перед заказом попросите показать вам примеры работ, чтобы убедиться, что этот верстальщик адаптирует сайты адекватно.
– К собственным изобразительным способностям. Если у вас есть понимание, что вы хотите получить в итоге, и эта итоговая версия не требует отдельного дизайна (использует текущие решения), то вы можете на словах и стрелочках расписать ТЗ для верстальщика в том же ворде.
Поехали!
Приступаем к адаптации сайта под мобильные.
Шаг 1. Указываем тег Viewport
Нам нужно сообщить браузеру, что контент нашего сайта будет подстраиваться под ширину устройства (обычного компьютера, планшета или смартфона) и должен показываться в оригинальном масштабе. Для этого добавляем мета-тег viewport в секцию <head> в коде сайта (можно поставить перед тегом title):
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<title>Автосервис Mr Red: ремонт и обслуживание автомобилей в Красноярске</title>
Здесь:
width=device-width – говорит браузеру, что ширина его окна должна быть равна ширине устройства,
initial-scale=1 – сайт нужно показать в обычном масштабе (без увеличения или уменьшения).
Если не указать тег viewport, то браузер будет по умолчанию считать ширину контента равной стандартной ширине для десктопа (1024 пикселя) – и на телефоне с шириной 340 пикселей ваш сайт будет уменьшен в 3 раза. Поэтому чтобы адаптивная верстка сработала, обязательно прописываем viewport с device-width.
Шаг 2. Обновляем стили сайта
Берем макеты сайта для мобильных устройств и добавляем в стили сайта дополнительные правила для отображения блоков на разной ширине экрана:
/*
… стандартные правила CSS …
например, выводим карточки товаров по 4 в ряд
*/
@media (max-width:768px) {
/*
… правила для планшетов …
выводим карточки товаров по 2 в ряд
*/
}
@media (max-width:320px) {
/*
… правила для смартфонов …
выводим карточки товаров по 1 в ряд
*/
}
Теперь браузер будет смотреть на ширину устройства и применять дополнительно нужный блок правил для отображения сайта.
Что чаще всего делают дополнительные стили:
– Уменьшают число блоков в одном ряду. Например, на обычном компьютере выводится 4 блока в ряд (карточки товаров). Очевидно, что на экране телефона 4 карточки просто не поместятся в 1 ряд, так что здесь будем показывать по одной карточке.
– Скрывают какие-то блоки (совсем или под ссылку «Развернуть»). Например, у товара внушительное описание, которое на компьютере занимает почти целый экран. На телефоне такое описание может занять до 10 экранов. Их придется долго и нудно пролистывать, чтобы добраться до отзывов о товаре. Чтобы не нагружать пользователя, покажем на мобильных первый абзац описания, а остальной текст спрячем под ссылку «Показать все». Кто захочет прочитать полное описание, развернет его, в то время как все остальные будут избавлены от долгого пролистывания.
– Изменяют размеры элементов. Уменьшают обычно картинки, отступы между блоками текста и слишком крупные заголовки. В то же время стоит, наоборот, увеличить мелкий текст (иначе его будет невозможно прочитать на телефоне), размеры кнопок (чтобы можно было попасть в них пальцем, и не только детским) и отступы между интерактивными элементами (чтобы не промахиваться между рядом стоящими ссылками или чекбоксами).
– Добавляют горизонтальную прокрутку таблицам. Если в таблице много столбцов, то она не поместится на экране телефона. В таком случае стоит добавить правила, чтобы эти таблицы можно было прокручивать вправо-влево на узких экранах.
Шаг 3. Дорабатываем дизайн сайта
Для некоторых элементов сайта понадобится более серьезная проработка для показа на мобильных. Как правило, это шапка сайта, меню и фильтры в каталоге товаров.
– Шапка сайта и меню. Если просто переместить все строчки в шапке сайта друг под друга (чтобы поместилось в ширину), то на телефоне такая шапка займет весь экран. Переходя по страницам сайта, человек будет вынужден раз за разом пролистывать экран с этой шапкой. Добавьте сюда 5-6 пунктов меню – и пользователь никогда не долистает до контента.
Поэтому на мобильных нужно сократить число элементов в шапке (например, убрать кнопку заказа обратного звонка и форму для поиска), а меню спрятать под иконку «гамбургера». Тогда шапка сайта будет занимать максимум четверть экрана телефона.
– Фильтры. В большинстве случаев фильтр по каталогу товаров располагают в левой части страницы. То есть в коде сайта сначала идет фильтр, а потом список товаров. Из-за этого на мобильных устройствах блок со списком товаров «переезжает» под блок с фильтром – и пользователь сайта рискует вообще не понять, что список товаров на этой странице есть (если фильтров много). Решается проблема просто – скрываем фильтр на мобильных под кнопку «Фильтр». Нажав ее, пользователь развернет необходимые фильтры. А по умолчанию список товаров будет виден сразу в первом экране.
Шаг 4. Сокращаем количество рекламы и всплывающих окон
Если у вас на сайте есть рекламные блоки, посмотрите, не стоит ли их чуть «подрезать», чтобы не занимать все место на отнюдь не бесконечных экранах смартфонов. Не обязательно убирать всю рекламу, достаточно будет лишь сократить ее количество. Например, оставить один баннер вместо четырех.
Аналогично и для всплывающих окон. Если спустя какое-то время после загрузки сайта «всплывает» окно с подпиской, спецпредложением и т.п. и при этом занимает более 50% экрана – либо уменьшите это окно до четверти экрана, либо вообще откажитесь от него. Во-первых, на телефонах такие окна раздражают пользователей гораздо сильнее, чем на обычных компьютерах. Во-вторых, поисковые системы могут понижать позиции сайтов с «назойливой» рекламой.
Шаг 5. Сокращаем количество контента
Если на сайте есть контент, который вы полностью скрываете от мобильных пользователей (не под кнопки «Подробнее», «Фильтр» и прочие, а совсем скрываете), то нет смысла вообще загружать этот контент на мобильное устройство – это дополнительный «вес» страницы, и он будет увеличивать драгоценное время загрузки сайта.
Пример: в статье на Хабре, открываемой с обычного компьютера, комментарии к статье загружаются сразу же в конце страницы – https://habr.com/company/mosigra/blog/427133/. А если открыть эту статью с мобильного, то страница будет содержать только текст статьи, без комментариев (и они не скрыты, они просто не выводятся для мобильных устройств). Под текстом статьи стоит кнопка «Комментарии», и по ней уже можно попасть на отдельную страницу с комментариями к статье. Конкретно для Хабра, где статьи часто и весьма охотно комментируют, это может экономить 3-5 секунд от загрузки страницы.
Для разграничения контента программист может как написать свой модуль, так и воспользоваться одним из готовых решений по определению типа устройства (например, MobileDetect). Во многие CMS такая функция уже встроена по умолчанию (например, wp_is_mobile в WordPress).
Шаг 6. Проверяем все страницы
Если на сайте до 200 страниц – лучше действительно отсмотреть их все. Потому что 20 карточек товаров могут отображаться нормально, а в описание 21-й кто-нибудь вставил видеоролик и прописал у него строго ширину в 900 пикселей – и вот этот ролик уже не помещается в экран мобильного.
Впрочем, если у вас тысячи страниц, то отсматривать каждую – не такая уж полезная трата времени. Тогда стоит проверить только важные страницы (продающие страницы, страницы с высоким трафиком и т.п.), и по 10-20 страниц в каждом разделе сайта (в каталоге товаров, в списке статей и т.д.).
Итог
Для сайта быть адаптивным под разные устройства – как для человека соблюдать правила этикета. Конечно, вы можете не говорить «здравствуйте» и «до свидания», «пожалуйста» и «спасибо», но тогда не обижайтесь, если желающих находиться рядом с вами будет становиться все меньше и меньше. Так же и с сайтом – если вы не уважаете своих пользователей и не готовы предоставить им удобный сайт на любых устройствах, не обижайтесь, если они тихо и спокойно уйдут к конкурентам.
Если стремление адаптировать свой сайт к мобильным есть, а умения нет – обращайтесь к нам, поможем с адаптивностью.
После настройки сайта под мобильные устройства не забудьте про техническую оптимизацию – для мобильных есть свои дополнительные нюансы, подробности расписали в этой статье.
1ps.ru
Об онлайн сервисе ADAPTIVATOR.RU — бесплатная проверка сайта на адаптивность
ADAPTIVATOR.RU — это бесплатный сервис, предоставляющий возможность быстро проверить сайт на адаптивность онлайн.
С его помощью Вы сможете не только визуально просмотреть как будет выглядеть сайт на различных разрешениях портативных и мобильных устройств, но и получить оценку адаптивности тестируемого ресурса, вместе с рекомендациями по устранению выявленных недостатков. И все это на одной странице!
Обширные настройки сервиса позволяют отображать одновременно необходимые устройства в требуемых ориентациях, и даже, при необходимости, в нужных цветовых решениях.
Также сервис позволяет скопировать прямую ссылку на результат проверки, чтобы ею можно было поделиться и продемонстрировать все адаптивные возможности Вашего сайта.
Для выполнения проверки сайта на адаптивность необходимо только «ввести адрес Вашего ресурса» (указать URL) и нажать на кнопку «УЗНАТЬ».
Естественно, в первую очередь сервис создавался для веб-разработчиков, а также владельцев сайтов, заинтересованных в развитии своего интернет-ресурса и не желающие терять свою мобильную целевую аудиторию, использующую в повседневной жизни или на работе планшетные компьютеры или сотовые телефоны для выхода в сеть интернета.
Однако никто не запрещает пользоваться сервисом всем заинтересованным и любопытным лицам 🙂
Ограничения возможны только со стороны владельцев сайтов. Сервис не сможет отобразить как будет выглядеть сайт на выбранных Вами устройствах если установлен запрет на удаленное отображение контента. В этом случае Вы будете извещены об имеющемся ограничении.
С технической точки зрения сервис доступен пользователям и отлично функционирует во всех современных браузерах, начиная с версий: IE 7+, Chrome 3+, Safari 3.2+, Opera 9+, Firefox 3+.
Других ограничений на функционирование или использование сервиса нет.
Если у Вас остались какие-либо вопросы относительно сервиса и его работы, посетите раздел часто задаваемых вопросов, чтобы постараться найти там ответы.
adaptivator.ru
6 бесплатных сервисов, чтобы проверить адаптивность сайта
Современный пользователь просматривает сайты не только с компьютера, но и со смартфона или планшета. Для удобства людей создатели сайта должны сделать его отзывчивым для отображения на всех распространенных устройствах и во всех разрешениях. Поэтому каждый веб-дизайнер и веб-разработчик обязан знать принципы адаптивного дизайна. Для проверки адаптивности сайта существует множество специальных сервисов, из которых мы отобрали наиболее удобные и функциональные, использование которых при этом бесплатно.
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 “mobile-friendly”.
madspark.ru
Практические рекомендации по SEO под мобильные устройства || Блог Megaindex.com
Адаптивность сайта влияет на ранжирование страниц в мобильной и десктопной поисковой выдаче.Но как правильно оптимизировать сайт для соответствия требованиям поисковой системы?
Далее приведены практические советы по оптимизации сайта и ответы на вопросы.
Практические советы по SEO под мобильные устройства
Выполнение комплекса мер по мобильной оптимизации проводится для повышения позиций сайта в поисковой выдаче. В результате рост позиций происходит как в мобильной поисковой выдаче, так и в десктопной.
После улучшения мобилопригодности улучшаются поведенческие факторы страницы и сайта.
1 — Используйте HTTP/2
HTTP/2.0 является улучшенной версией протокола HTTP.
При использовании протокола HTTP/2 уменьшается объем передаваемых данных и скорость загрузки страниц возрастает.
В результате протокол HTTP/2 косвенно влияет на позиции сайта.
В HTTP/2.0 есть ряд улучшений:
- Поддерживается мультиплексирование. Использование мультиплексирования позволяет загружать статические элементы параллельно, как результат повышается скорость загрузки страницы;
- Заголовки передаются в сжатом виде. Уменьшается лаг при открытии страницы и уменьшается объем передаваемых данных;
- Приоритизация позволяет выстроить загрузку страницы сайта так, чтобы основное содержание загружалось в самом начале;
- HTTP2 является бинарным протоколом, что повышает скорость работы на мобильном устройстве и сервере сайта.
2 — Создайте адаптивную версию сайта
Сайт переписывать нет необходимости. Используя CSS и JS разработайте адаптивный шаблон для сайта.
Итак, у сайта будет два CSS стиля:
- Полная версия сайта;
- Мобильная версия.
Верстка страницы в адаптивном стиле:
3 — Откройте CSS и JS для индексации
При анализе страниц поисковые системы анализируют CSS, JS и прочие файлы, поэтому подобные файлы должны быть открыты для индексации в robots.txt и отдавать верный код ответа.
Анализ проводится для создания рендера страницы.
Процесс обработки страницы в виде инфографики представлен далее:
Часто поисковые оптимизаторы закрывают подобные файлы от индексации. Причины разные. К примеру, специалист может использовать данные файлы для скрытия коммерческих блоков от поисковых систем. Такие конструкции следует вынести в отдельные файлы и закрыть доступ именно к ним.
Ссылки на стили и скрипты, которые отвечают за мобилопригодность обязательно должны быть открыты к индексации.
4 — Удалите элементы, которые не поддерживаются мобильными браузерами
Если на сайте есть подобные элементы, то удалите их с адаптивной версии сайта.
Удалите следующие элементы:
- Всплывающие окна, которые препятствуют доступу к странице, включая всплывающие окна с предложениями установить приложение или открыть полную версию сайта;
- Вставки с Silverlight и подобными технологиями.
Поисковая система распознает на страницах всплывающие элементы.
Если элемент перекрывает главный контент, то позиции страницы могут быть понижены в поисковой выдаче. Санкции могут быть применены за использование подобных элементов.
5 — Настройте перелинковку, если для мобильной и десктопной версии используются разные хосты
Адаптивный дизайн сайта является наилучшим решением. Но если создать адаптивный стиль нельзя, то есть смысл создать версию мобильного сайта на отдельном хосте.
Если на сайте используется отдельный адрес для мобильной версии, следует настроить перелинковку.
Добавить разметку следует не только на мобильной, но и на полной версии сайта.
На мобильной версии сайта следует указать:
<link rel="alternate" href="desktop">
В полной версии сайта следует указать:
<link rel="alternate" href="mobile">
Действие кажется простым, но на большинстве сайтов подобная перелинковка не используется.
Если на сайте используется адаптивный дизайн, разметка не требуется.
6 — Замените механизм загрузки дополнительного контента с AJAX на CSS
Поисковая система считает мобильную версию страницы основной версией. И если на мобильной версии контент не выводится, то краулер может не индексировать часть содержания.
Скрытие контента на странице допускается при условии, если контент загружается при открытии документа и далее скрывается посредством стилей.
Поисковой системой Google допускается скрытие контента с использованием стилей:
On the mobile version of the page it can be that you have these kind of tabs and folders and things like that, which we will still treat as normal content on the page. Even if it is hidden on the initial view.
7 — Оптимизируйте скорость загрузки страницы
Google оценивает скорость загрузки сайта. Рекомендуемый ориентир по скорости загрузки страницы на мобильных устройствах составляет 1 секунду.
Это сложно реализовать. Но есть бесплатные инструменты, которые могут помочь достичь амбициозной цели.
Прежде всего, следует использовать инструмент от Google. Ссылка на инструмент — PageSpeed Insights.
Инструмент позволяет провести оценку скорости загрузки сайта и выдает бесплатные рекомендации, которые следует использовать, чтобы ускорить процесс загрузки страницы.
Далее следует проверить сайт посредством WebPageTest.org, выбрав мобильный браузер из меню, так как по умолчанию инструмент будет использовать для оценки скорости загрузки сайта обычный браузер.
Дополнительный инструмент для анализа скорости загрузки от Google называется Test My Site.
Ссылка на сервис — Test My Site.
8 — Оптимизируйте параметры текста
Сделать текст более читаемым на мобильном устройстве можно используя следующие рекомендации:
- Используйте размер шрифта 14 пикселей, лучше 15 или 16;
- Используйте короткие абзацы, 1-2 приложения в абзаце;
- Разбавляйте текст графическими элементами;
- Сделайте контраст между текстом и фоном, пользователи используют телефоны на улице, что может затруднять чтение низкоконтрастного текста на солнце;
- Сделайте интерлиньяж между параграфами в 50 — 60 символов.
9 — Используйте Viewport Content
Если на сайте используется адаптивный дизайн, следует добавить мета-тег viewport.
Тег изменяет размер страницы сайта в зависимости от размера устройства пользователя.
Google рекомендует прописать мета-тег так:
<meta name=viewport content=>
10 — Оптимизируйте первый экран
Выполните 2 простых улучшения:
- Используйте много контрпространства. Контрпространством называется пространство между текстом, кнопками и элементами дизайна;
- Минимизируйте контент, расположенный до заголовка текста.
Если у пользователя возникнут проблемы с чтением контента или с поиском того, что ему нужно, то у сайта будет низкий Dwell Time. Реализация подобных улучшений позволит задержать пользователя на сайте.
Рекомендованный материл в блоге MegaIndex по теме Dwell Time по ссылке далее — Фактор ранжирования Dwell Time — что это и как его оптимизировать для роста позиций в выдаче?
Использование на сайте контрпространства является одним из простых способов улучшить Dwell Time и уменьшить показатель отказов.
11 — Оптимизируйте длину сниппетов
Оптимизация тегов заголовка и описания улучшает показатель переходов из поисковой выдачи на страницу.
Средние значения для выдачи на десктопе:
- Title: 70 символов;
- Description: 155 символов.
Средние значения по выдаче на мобильных устройствах:
- Title: 78 символов;
- Description: 155 символов.
Рекомендованный материал в блоге MegaIndex по теме улучшения сниппетов по ссылке далее — Как увеличить количество переходов на сайт из поисковой выдачи — Создание эффективных сниппетов.
12 — Используйте Accelerated Mobile Pages
Если с внедрением адаптивного дизайна есть сложности, то следует использовать Accelerated Mobile Pages.
AMP страницами называются страницы сайта, предназначенные для быстрой загрузки на мобильных устройствах. В среднем, AMP страницы загружаются в 4 раза быстрее, чем не оптимизированные страницы сайта.
Ссылка на проект AMP — AMP Project.
Технология AMP разрабатывается и поддерживается Google.
Google показывает в поисковой выдаче маленький значок рядом AMP страницами, который может повысить кликабельность сайта:
При открытии страницы, в строке браузера будет выводиться адрес Google. Если на подобные страницы будет размещена внешняя ссылка, то вес будет перетекать к доменному имени google.com.
Пример URL для сайта indexoid.com:
http://google.com/amp/s/indexoid.com
Вопросы и ответы
Что лучше: мобильная или адаптивная версия сайта?
Не рекомендуется использовать отдельную мобильную версию сайта:
При использовании адаптивной версии сайта проще клеить поведенческие факторы. В целях поисковой оптимизации следует использовать адаптивную версию сайта.
Как проверить сайт на адаптивность?
По заявлениям Google, mobile-friendly дизайн повышает удовлетворенность пользователей сайтами и результатами поиска, так как полные версии сайтов было не удобно просматривать и использовать на мобильных устройствах.
Итак, адаптация сайта под мобильные устройства проводится для повышения позиций в Google. Но как провести проверку выполненной работы?
Google разработал специальный инструмент, чтобы помочь оптимизаторам с выполнением проверки сайтов на адаптивность. Инструмент называется Mobile-Friendly Test.
Ссылка на инструмент — Mobile-Friendly Test.
Есть инструмент и в Google Search Console. Ссылка на инструмент — Удобство для мобильных.
Аналогичный инструмент есть в панели веб-мастера в Yandex. Инструмент называется Проверка мобильных страниц.
Ссылка на инструмент — Проверка мобильных страниц.
Почему адаптивность сайта стала фактором ранжирования?
В алгоритме ранжирования поисковых систем отсутствуют лишние элементы. Ничего не внедряется просто так. Любые гипотезы проверяются на практике.
Фактор адаптивности сайта к мобильным устройствам был внедрен по причине роста аудитории на мобильных устройствах в большинстве стран мира.
Факторы ранжирования тестируются на предмет улучшения качества поиска. Конечной целью для поисковой системы является удовлетворенность пользователя. При использовании мобильных устройств для серфинга в интернете, удовлетворенность пользователя зависит от опыта эксплуатации сайта на мобильном устройстве.
Основная задача фактора — отдать приоритет в поисковой выдаче тем сайтам, которые хорошо отображаются на смартфонах и других мобильных устройствах.
По данным Google, на мобильных устройствах выполняется свыше 27,8 миллиарда запросов, что больше, нежели на компьютерах.
Следует заметить 3 аспекта:
- Мобилопригодность влияет на формирование результатов поисковой выдачи;
- Влияние распространяется на результаты поиска на всех языках и по всему миру;
- Поисковый алгоритм оценивает страницу, а не весь сайт в целом.
Что такое мобильные устройства в понимании Google?
В категорию мобильных устройств обычно входят планшеты и смартфоны.
Согласно пониманию Google, мобильными устройствами следует считать и другие типы устройств.
Google:
when we speak of mobile devices, we generally do not include tablets in the definition
Основная идея здесь заключается в оптимизации сайта под любые устройства.
Как называются алгоритмы?
Итак, адаптивность сайта к мобильным устройствам влияет на ранжирование в поисковой выдаче. При ранжировании результатов поисковые системы отдают приоритет сайтам, которые хорошо отображаются на смартфонах и других мобильных устройствах. Поэтому, адаптивность является фактором ранжирования.
Алгоритм ранжирования от Google, который оценивает сайт на предмет адаптивности к мобильным устройствам, в среде поисковых оптимизаторов называется Mobilegeddon.
Алгоритм ранжирования от Yandex, который оценивает сайт на предмет адаптивности к мобильным устройствам, называют Владивосток. Название произошло от имени соответствующего города, поскольку по данным исследования «Развитие интернета в регионах России», Дальний Восток лидировал по доле пользователей мобильного интернета среди всех пользователей России.
Заявление от Yandex:
Поисковую формулу ранжирования, учитывающую пригодность сайта для мобильных устройств, мы назвали «Владивосток» — в честь одного из крупнейших дальневосточных городов.
Есть ли подтверждения на практике?
Сразу после внедрения алгоритма поисковой системой Google было проведено пару исследований.
Специалисты из Search Metrics обнаружили, что в среднем показатель потери позиций для не адаптированных сайтов составил 0,21.
Специалисты Bright Edge исходя из анализа 20,000 страниц обнаружили, что 21% не адаптированных страниц был понижен в поисковой выдаче в рамках топ-30 результатов.
Есть ли влияние на десктопную поисковую выдачу?
Да, адаптивность сайта является фактором ранжирования при формировании поисковой выдачи на любых устройствах.
Еще не следует забывать про поведенческие факторы. Если сайт интересен для целевой аудитории, то трафик улучшает поведенческие факторы страницы и сайта. Значит, также есть опосредованное влияние на результаты обычной поисковой выдачи.
Выводы
Поисковая оптимизация сайта состоит из комплекса внешних и внутренних работ над сайтом. Комплекс мер по адаптации сайта к мобильным устройствам входит в комплекс работ по внутренней оптимизации и является задачей с высоким приоритетом, в случае если трафик из поисковой выдачи для мобильных устройств занимает значимую долю.
Итак, выводы в сжатой форме:
- Поисковые системы используют мобилопригодность страницы как фактор ранжирования при формировании результатов поисковой выдачи;
- Мобилопригодность страницы является одним из многих факторов ранжирования;
- Следует проводить мониторинг позиций как для десктопной, так и для мобильной поисковой выдачи;
- Сайты следует адаптировать под мобильные устройства. На адаптированных страницах не должно быть горизонтальной прокрутки. На сайте не должно быть элементов, которые не поддерживаются многими браузерами: Java-апплеты, Silverlight-плагины и прочее;
- На обеих версиях следует использовать одинаковый текстовый и графический контент;
- Делать сайт адаптивным следует ради пользователей, которые все активнее потребляют контент с мобильных устройств. Способы описаны выше.
Кстати, используя MegaIndex можно провести базовый SEO аудит сайт. Приложение находится в стадии разработки и предоставляется на бесплатной основе. Ссылка на сервис — MegaIndex Аудит.
Остались ли у вас вопросы, мнения, комментарии по теме мобилопригодности сайта?
ru.megaindex.com