Проверить сайт на адаптивность к мобильным устройствам



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

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

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

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

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

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

Responsive

 

 

Как проверить сайт на адаптивность к различным устройствам?

Все очень просто, нужно только ввести адрес интересующего вас сайта и нажать на кнопку “GO” или нажать Enter.


Responsive-how-to-use

 

Данный сервис предоставляет возможность:

1. Работать с локальным хостом на вашем компе, т.е. он воспринимает ссылки типа http://localhost

2. Вы можете отправить ссылку типа http://ami.responsivedesign.is/?url=https://webcomplex.com.ua, чтобы показать заказчику/исполнителю как все хорошо/плохо смотрится на разных девайсах ?

Responsive-reorder

3. Вы также можете перетаскивать все устройства и сортировать их в нужном вам порядке

Responsive-bookmarck

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


Какие размеры представлены на тестируемых устройствах?

Настольный ПК – 1600x992px
Ноутбук – 1280x802px
Планшет – 768x1024px
Мобильный телефон – 320x480px

 

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

Думаю что и вам он пригодится ?

 

This entry was posted in Online инструменты. Bookmark the permalink.

webcomplex.com.ua

Сервис ami.responsivedesign

Самый первый онлайн-сервис называется ami.responsivedesign. Попадая на главную страницу данного сервиса, прокручиваем вниз и в поле для ввода вставляем адрес сайта, который мы хотим проверить на адаптивность. После чего нажимаем на кнопку «Go».

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

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

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

Сервис deviceponsive


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

На главной странице есть окошко для вставки адреса сайта.

Вставляем адрес и нажимаем кнопку «Go» и ждем, пока загрузится страница.

Далее, прокручиваем вниз и первое устройство, которое мы видим, это MacBook с разрешением 1280х800 пикселей. Здесь мы так же можем прокручивать страницу, кликать на нужных элементах, и проверить адаптивность.

Прокручиваем ниже, и смотрим, как выглядит сайт на других устройствах.
Здесь мы можем проверить адаптивность, на экранах начиная от 1280х800 пикселей и заканчивая 320х240 пикселей.

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

Сервис responsinator.com


На сайте responsinator.com в самом верху есть окошко для вставки ссылки. Вставляем адрес и нажимаем «Go». Ждем, пока загрузится страница, а затем, аналогично предыдущему сервису, просматриваем, как выглядит наш сайт.

На этом сервисе подписана ширина экрана каждого из устройств, и таких устройств здесь достаточно много.

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

Помимо этих трех онлайн-сервисов мы так же можем воспользоваться стандартным функционалом браузеров что бы проверить адаптивный дизайн. Я сейчас покажу вам, как это будет на примере браузера Mozilla Firefox.

Проверить сайт на адаптивность при помощи браузера Mozilla Firefox

Здесь, для того, что бы проверить адаптивность, нам необходимо:

  1. 1.В правом верхнем углу нажать на иконку меню.
  2. 2.Затем выбрать здесь раздел «Разработка» => «Адаптивный дизайн».
  3. 3.После чего у нас окошко немножко изменится. В верхнем левом углу отображается разрешение области, и дальше мы эту область можем, при помощи маркеров, уменьшать, увеличивать, изменять ее пропорции и смотреть, на какой ширине как у нас отображается те или иные элемент.
  4. 4.Так же мы можем здесь вводить разрешение в ручную. Например, если мы хотим увидеть, как будет выглядеть наш сайт при разрешении 320х480, мы вводим нужное значение и нажимаем «Enter».

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

Проверить адаптивность в браузере Google Chrome

Адаптивный дизайн можно проверить и в браузере Google Chrome. Открывается он аналогично:

  1. 1.В правом верхнем углу кликаем на иконку меню.
  2. 2.Здесь выбираем раздел «Дополнительные инструменты» и далее выбираем раздел «Инструменты разработчика».
  3. 3.В нижней или в правой части экрана у вас появиться панель, на которой нам необходимо нажать на кнопку с изображением мобильных телефонов.
  4. 4.Далее, мы можем эту панель немножко опустить вниз. Для этого наводим курсор на границу, зажимаем левую кнопку мышки и протягиваем ниже.
  5. 5.Здесь вы аналогичным образом можете увеличивать или уменьшать ширину экрана.

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


Так же здесь вы сразу же можете изменить ориентацию экрана при помощи кнопки «Rotate».

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

Поэтому при проверке адаптивности я больше ориентируюсь на браузер Mozilla Firefox.

Видеоинструкция

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

С уважением Юлия Гусарь

impuls-web.ru

Общие рекомендации

Ниже представлены рекомендации для вебмастеров вне зависимости от выбранного способа адаптации сайта.

  • Ресурсы должны быть доступны для индексирующего робота Яндекса: Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4 (compatible; YandexBot/3.0; +http://yandex.com/bots). Разрешите в файле robots.txt сканирование CSS, JavaScript, от которых зависит отображение сайта на мобильных устройствах. Иначе страницы сайта могут некорректно отображаться в результатах поиска.

  • Страницы сайта должны отправлять серверу ответ с HTTP-кодом 200 OK. Вы можете проверить ответ сервера в Яндекс.Вебмастере.
  • Не используйте технологии Flash, Silverlight или Applet на страницах, ориентированных на мобильных пользователей — эти технологии могут не поддерживаться на мобильных устройствах.

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

Проверить сайт на адаптивность к мобильным устройствам

Проверить на сколько хорошо сайт адаптирован под мобильные устройства можно в разделе Инструменты → Проверка мобильных страниц Яндекс.Вебмастера.

Вопросы и ответы про мобильные сайты


Может ли отличаться контент мобильной и основной версии сайта?

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

Как избежать дублирования контента?

Основная версия сайта и мобильная воспринимаются роботом Яндекса как отдельные сайты и индексируются отдельно друг от друга.

Чтобы помочь роботу правильно определить мобильную версию сайта, укажите на страницах основного сайта соответствующие URL мобильной версии. Например, с помощью элемента link:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page.html"/>
Надо ли устанавливать перенаправление на мобильную версию сайта?

Вы можете перенаправлять пользователя с основного сайта на мобильную версию, учитывая user-agent устройства, с которого пользователь просматривает сайт.

Надо ли добавлять мобильную версию сайта (домен или поддомен) в Яндекс.Вебмастер?

Вы можете добавить мобильную версию сайта в Яндекс.Вебмастер, чтобы отслеживать статистику индексирования страниц.

Можно ли создать мобильную версию сайта в подкаталоге (папке)?

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

Как сообщить роботу Яндекса о наличии адаптивной версии сайта?

Для сайтов с адаптивным дизайном используйте мета-тег <meta name="viewport" content="width=device-width, initial-scale=1">, чтобы указать область просмотра контента. Подробно см. в разделе Использование HTML-элементов.

Мобильная версия на поддомене стала зеркалом основной версии

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

К следующему разделу

yandex.ru

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

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

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

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

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

1. Google Mobile Friendly

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

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

https://search.google.com/test/mobile-friendly

b_56ebd2b1c623a.jpg

2. Яндекс Вебмастер (beta) — инструмент «проверка мобильных страниц»

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

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

https://beta.webmaster.yandex.ru/

b_56ebd2c64bbf7.jpg

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

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

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

https://www.bing.com/webmaster/tools/mobile-friendliness

b_56ebd34fcaa32.jpg

4. Mobile Checker от W3C

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

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

Пробовал Google chrome и Opera.

https://validator.w3.org/

b_56ebd31f48193.jpg

5. Responsinator

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

http://www.responsinator.com/

b_56ebd33ce86a1.jpg

UPD1: 20.07.2017:

6. Adaptivator

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

http://adaptivator.ru/

b_5970b3bd15854.jpg

UPD2: 3.11.2017:

7. iloveadaptive.ru

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

www.iloveadaptive.ru

spark.ru

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

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

Проверка адаптивности в FireFox

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

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

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

Google Chrome проверка адаптивной верстки

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

Google Chrome проверка адаптивного дизайна

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

Google Chrome проверка мобильной версии сайта

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

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

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

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

Проверка адаптивности Google

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

Проверка адаптивности Яндекс

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

Основной задачей этих сервисов презентовать (показать) как будет выглядеть ваш сайт на мобильном устройстве. Сайтов с таким функционалом великое множество. Я приведу лишь некоторые из них. В большинстве случаев они дублируют встроенный функционал 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/. Этот сервис покажет как выглядит сайт на экране телефона и даст рекомендации по оптимизации кода для увеличения скорости загрузки на мобильных устройствах.

Проверка скорости и адаптивности PageSpeed Insights

WebPageTest

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

Проверка скорости и адаптивности WebPageTest

Выводы

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

moonback.ru

5 сервисов для проверки скорости загрузки сайта

Факт: скорость загрузки влияет и на позиции в поиске, и на конверсии. Первое утверждение из блога Google для вебмастеров, второе – результат исследования Akamai.

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

Список инструментов для анализа скорости загрузки сайта:

1. PageSpeed Insights

PageSpeed Insights от Google оценивает эффективность страниц для мобайла и десктопа, дает рекомендации по оптимизации сайта.

Важно: оценка от 1 до 100 зависит не только от скорости загрузки. Это внутренняя метрика сервиса, основанная на ряде правил. Рекомендации PageSpeed Insights не стоит воспринимать как призывы к действию, о чем предупреждают и сами разработчики.

В общем, тут как с «Главредом» – нельзя слепо подгонять под максимальное количество баллов, надо думать головой.

2. Pingdom Tools

Pingdom Tools показывает оценку Google PageSpeed Insights, время загрузки, количество запросов и размер страницы. Еще в сводке виден результат сравнения с другими тестируемыми сайтами.

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

К сожалению, не получится посмотреть, как быстро страница подгружается в России. Можно выбрать для теста только Швецию, США или Австралию.

3. WebPageTest

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

Еще в сервисе можно включить слайдшоу или видео, чтобы наглядно оценить, как идет загрузка страницы. И, наконец, WebPageTest умеет сравнивать скорость нескольких сайтов: добавляйте URL конкурентов и смотрите, как у них.

4. GTmetrix

Еще один сервис по проверке скорости загрузки сайта. Достоинства в сравнении с WebPageTest:

  • Приятный интерфейс.
  • Возможность выбрать скорость соединения.
  • Дополнительная оценка от Yahoo – пригодится для продвижения за рубежом.
  • Есть выгрузка отчета в PDF.
  • Можно настроить регулярный мониторинг страницы. Бесплатно – не чаще 1 раза в день с сервера в Ванкувере.

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

У GTmetrix есть и платная версия – для тех, кому нужно проверять больше, чаще и детальнее.

5. Sitespeed

Sitespeed позволяет проверить, как сайт загружается сразу с нескольких точек. Наконец-то, русскоязычный сервис и есть сервера РФ и Украины.

Если есть желание помочь проекту, вариант – стать спонсором: добавить свой сервер.

texterra.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.