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


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

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

  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

Инструменты для мобильных сайтов

Как проверить мобильную версию сайта.

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

  • Google Mobile-Friendly
  • Google PageSpeed Insights;
  • WebPage Test;
  • ScreenFly;
  • WebPage Test;
  • BrowserStack.

Mobile-Friendly

Сервис под названием Mobile-Friendly покажет насколько сайт оптимизирован под мобильные устройства и какие есть ошибки в плане оптимизации:

Ссылка на сервис — google.com/webmasters/tools/mobile-friendl.

PageSpeed Insights

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

Сервис называется просто — PageSpeed Insights.

Ссылка на сервис — developers.google.com/speed/pagespeed/insights.

WebPage Test

Проверку загрузки сайта правильно бы проводить для разных устройств и с разных регионов. Сделать проверку можно используя WebPage Test.

Сервис абсолютно бесплатный.

Ссылка на сервис — webpagetest.org.

ScreenFly

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

Инструмент бесплатный.

Ссылка на сервис — quirktools.com/screenfly.

Adobe Edge Inspect


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

Если использовать специально созданное для открытия сайта на разных устройствах приложение под названием Adobe Edge Inspect, задача упрощается.

Инструмент бесплатный.

Ссылка на приложение — adobe.com/ru/products/edge-inspect.html.

Приложение кросс-платформенное.

BrowserStack

BrowserStack является известным сервисом среди разработчиков сайта. Сервис показывает совместимость сайта на реальных устройствах.

Инструмент платный.

Ссылка на сервис — browserstack.com.

Bing Mobile Test

Проверить бесплатно сайт на соответствие требованиям мобильных устройством можно посредством инструмента Mobile Test от поисковой системы Bing.
Ссылка на сервис — bing.com/webmaster/tools/mobile-friendliness

www.megaindex.org

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

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


Статистика использования сайтов Рунета с мобильных устройств по данным LiveInternet

Сначала Google давал сайтам пометку в сниппетах, что они будут корректно отображаться на мобильниках.

Пометка Google в выдаче для адаптивных сайтов

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

С 21 апреля Google запустил новый алгоритм, на западе его назвали Mobilegeddon. Теперь успешное прохождение теста на Mobile Friendly является одним из seo-факторов, учитываемый гуглом. Пока что сильных изменений в выдаче не наблюдалось, но готовиться можно уже сейчас.

Как же сделать сайт адаптивным с точки зрения гугла? Секрет простой — нужно поставить задачу вашим программистам/верстальщикам. Ну а если нет времени ждать, то … можно использовать MobileCheat ?

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

devaka.ru

Какими признаками обладает хороший мобильный сайт?


Контент должен удобно читаться, чтобы текст не приходилось увеличивать или бесконечно прокручивать вниз;

  1. Элементы интерфейса должны быть контрастными. Если человек читает ваш контент на улице, где экран засвечен, он должен четко видеть текст, картинки и кнопки;
  2. Мобильная версия не должна содержать Flash-элементы и излишнюю анимацию;
  3. Недопустима горизонтальная полоса прокрутки;
  4. Навигация должна быть максимально простой и последовательной;
  5. Сайт должен быстро загружаться;
  6. Тег viewport. При правильных настройках сайт будет отображаться на любых устройствах с любыми размерами экрана.

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

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

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

Лучшие сервисы для проверки страниц на «мобильность»


 1. Google Mobile Friendly

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

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

Для просмотра ошибок переходите во вкладку Google Webmaster Tools. Выбираете в пункте “Поисковый трафик”  — “Удобство просмотра на мобильных устройствах”.

сервис гугл мобайл френдли как ваш сайт выглядит на смартфоне

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

как сделать страницу удобной для мобильных

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

2. Яндекс Вебмастер

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

  • Наличие тега viewport;
  • Горизонтальную прокрутку;
  • Flash – элементы;
  • Java – апплеты;
  • Silverlight – плагины;
  • Удобство чтения.

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

3. Mattkersley

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

4. Bing

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

  • Правильно ли настроено окно просмотра?
  • Соответствует ли ширине экрана содержимое страницы?
  • Читаемый ли текст?
  • Достаточно ли крупны и удобны ссылки и кнопки на сайте.

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

5.Responsinator

Этот сервис, в отличие от других, не дает оценки, но показывает сайт в разных расширениях для 6 разных устройств на IOS и Android.

http://www.responsinator.com/

6.Ipadpeek и iPhone Tester

Эти сервисы позволяют проверить свой сайт прямо с мобильного устройства.


7.Screenfly

Позволяет тестировать сайт на экранах разных телефонов, включая HTC, LG, BlackBerry и Samsung.

8.Gomez

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

9.Testmysite

Этот сервис проверяет сайт не только на адаптивность, но и на скорость загрузки ваших страниц на мобильном устройстве. Именно из-за длительной загрузки теряется половина пользователей.

 проверьте скорость загрузки ваших страниц на мобильном устройстве

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

10. Responsivedesign

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

отображение страниц на телефоне, планшете, ноутбуке и настольном компьютере


http://ami.responsivedesign.is

Выводы

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

Если необходимо увеличить скорость загрузки мобильного сайта, используйте новую технологию Progressive Web Apps.

Узнать больше о PWA

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

 

gravitec.net

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

К чему я веду? А к тому, что необходимо адаптировать свои сайты и делать их удобными для просмотра на мобильных гаджетам.

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

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

То, что сайты будут помечаться информация 100%, остальная информация только предположения.

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

loleknbolek.com

Проверяем качество мобильной вёрстки с помощью Google Chrome

Для разработчиков у Google есть отличный инструмент для имитации мобильных устройств. Этот инструмент встроен в браузер Google Chrome. Для доступа к нему нужно нажать F12 в браузере (перейти в режим разработчика) и нажать на значок смартфона:

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

Страница преобразуется в режим переключения устройства, где вы сможете выбрать одно из популярных мобильных устройств, тип сети (GPRS, 2G, 3G, 4G и т.д.), указать строгие параметры дисплея. Это позволяет имитировать работу сайта на конкретных мобильных девайсах. К числу доступных устройств относятся различные версии iPad, iPad Mini, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Samsung Galaxy и некоторых других популярных устройств.

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

Выбрав определенный девайс вы сможете проверить сайт на мобильном устройстве. Например, отображение главной страницы сайта «Нубекс» на iPad 3:

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

И на Samsung Galaxy S4:

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

Здесь вы сможете не только увидеть отображение сайта на том или ином девайсе, но и полноценно работать с сайтом, будто перед вами находится нужный гаджет. Несомненно, этот инструмент является просто незаменимым при разработке мобильной версии сайта, но как будет отображаться ваш сайт на реальных устройствах — нужно проверять на реальных устройствах. Особенно это важно, если нужно проверить отображение сайта в «родных» браузерах (Safari — для iPad/iPhone, IE — для Windows Phone и т.д.).

nubex.ru

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

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

Об адаптивности сайта (Responsive Web Design) лучше думать еще на этапе его создания. Однако благодаря новым технологиям, например таким как — Media queries уже сегодня существующие ресурсы можно «починить», обратившись к таким специалистам как мы.

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

Принципы создания адаптивного дизайна

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

  • Принцип постепенного совершенствования – от простого к сложному, делая работу в несколько этапов. Когда на экране будет правильно отображаться основная модель сайта, можно приступать к добавлению других элементов.
  • Чтобы сделать «резиновый» шаблон сайта, который будет растягиваться, ширину макета нужно задать в процентах, а не в пикселях.
  • Использование «модульной сетки» поможет согласовать на странице размещение всех элементов, что облегчит разработку дизайна.
  • Масштабирование используемых изображений на сайте нужно делать, ориентируясь на самую большую ширину.
  • Использование медиазапросов.

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

mobile-friendly.su

удобство сайта для мобильных устройствТут такое дело, Гугл скоро (по слухам — с 21 апреля 2015) начнет очень плохо ранжировать сайты, которые не прошли проверку в Google Webmasters на удобство просмотра на мобильных устройствах.

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

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

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

Проверить страницу можно
здесь https://www.google.com/webmasters/tools/mobile-friendly/
а узнать подробнее о косяках
здесь https://developers.google.com/speed/pagespeed/insights/?hl=ru

Расскажу как сделать так:

До После
no-valid yes-valid
  • Первая фишка, которая помогла решить вопрос без дополнительных телодвижений.
  • В robots.txt пропишите строку:
    Allow: /wp-content/themes/Имя_Шаблона/style.css

    (Если файл со стилями находится по другому адресу, то прописываем его. Если файлов со стилями несколько, то втыкаем строчки для каждого файла.)

  • Второй момент, если видим сообщение «Интерактивные элементы расположены слишком близко друг от друга». Показывается в google.com/webmasters/tools/mobile-friendly.
    Просто в стилях нужному классу прописывает побольше отступы для ссылок и кнопок. Хватает margin или padding от 5px.

    В одном случае помогло добавление большего отступа между строк,
    в стили добавил: line-height: 200%;

    Иногда блок Adsense может создавать такую проблему. Возможно нужно вставить блок побольше, или со шрифтом покрупнее.

P.S. Изначально я рассчитываю, что первичная адаптация шаблона под мобильные устройства была вами сделана.

Релевантное про Гугл:

  • Падение и возврат трафика с Google
  • Как увеличить доход с Adsense с помощью Google Analytics
  • На какие фразы покупать ссылки для Google?

seodnevnik.ru


You May Also Like

About the Author: admind

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

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

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