Google проверка мобильной версии. Браузер Chrome: версии для мобильных и ПК
В текущей статье речь пойдет о том, как осуществляется проверка мобильной версии сайта, её удобство, читабельность и правильность отображения.
Проверку вашего сайта на удобство отображения на мобильных устройствах можно проверить с помощью различных веб-сервисов. В частности, данный сервис от Google позволяет адекватно оценить грамотность вашей мобильной вёрстки.
Недавно компания Google заявила о том, что сайты, не отвечающие требованиям мобильной вёрстки, будут пессимизироваться в поиске, осуществляемом при помощи мобильных устройств. Этот алгоритм уже работает и некоторые сайты, которые не побеспокоились об отображении на мобильных платформах, действительно, были опущены в поисковой выдаче для мобильных устройств.
Будь ваш сайт трижды удобен для десктопных платформ, нужно проверять качество мобильной вёрстки, иначе вы будете терять внушительную часть трафика (доля мобильных платформ в поиске стремительно растет с каждым годом), а значит - терять своих клиентов. Поэтому нужно адаптировать свои сайты для мобильных устройств и проверять корректность отображения сайтов в мобильных браузерах.
Проверяем качество мобильной вёрстки с помощью 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 и т.д.).
Во многих странах для работы в Интернете чаще используются смартфоны, чем компьютеры. Поэтому очень важно адаптировать сайт для мобильных устройств . Выяснить, удобны ли ваши страницы для пользователей смартфонов, вам поможет специальный инструмент в Search Console.
Использование
Проверить, удобна ли страница для просмотра на смартфоне, несложно: достаточно указать ее полный URL. Обычно проверка занимает меньше минуты. Если на странице есть перенаправления, они также будут обработаны.
По результатам проверки вы увидите, как страница выглядит на смартфоне, и узнаете, какие проблемы могут возникнуть при ее просмотре. Чаще всего это мелкий шрифт (плохо читается на небольшом экране) и Flash-элементы (не поддерживаются на большинстве мобильных устройств).
Значение метатега viewport не задано
В коде страницы не указано свойство viewport , которое сообщает браузеру, как правильно изменить размеры элементов страницы в соответствии с размером экрана устройства. Чтобы ваш сайт правильно отображался на экранах разных размеров, настройте область просмотра с помощью метатега viewport . Подробные сведения об этом представлены в разделе Основы адаптивного веб-дизайна нашего руководства.
В метатеге viewport должно быть значение device-width
Адаптация страницы для экранов разных размеров невозможна, так как в ее коде указано свойство viewport с фиксированной шириной. В этом случае необходимо применить адаптивный дизайн, настроив масштабирование страниц в соответствии с размерами экрана.
Контент шире экрана
В этом отчете указаны страницы, на которых для просмотра текста и изображений приходится пользоваться горизонтальной прокруткой. Эта проблема возникает, когда размеры в стилях CSS заданы абсолютными значениями или используются изображения, предназначенные для конкретной ширины окна браузера. Убедитесь, что значения ширины и позиционирования элементов CSS относительны, а изображения масштабируются. Подробные сведения об этом представлены в разделе Размеры контента для области просмотра нашего руководства.
Слишком мелкий шрифт
В этом отчете перечисляются страницы с мелким шрифтом, для прочтения которого пользователям приходится совершать жесты изменения масштаба. После настройки области просмотра необходимо определить размеры шрифтов, чтобы они корректно отображались в ней.
Последние новости от Google. Очень многие веб-мастера на ресурсах, посвященных сайтостроению и SEO продвижению, пишут о последней вести от Google.
Практически всем веб-мастерам пришло письмо об изменении критериев для ранжирования сайтов. Предупреждает нас компания Google, что с 21 апреля 2015 года будет активно использоваться алгоритм mobile-friendliness.
Что это значит?
Получился такой результат
Все очень просто.
Удачи вам и мне!
2015-04-25T08:51:59+00:00 Надежда БлогИтак, последние новости от Google. Очень многие веб-мастера на ресурсах, посвященных сайтостроению и SEO продвижению, пишут о последней вести от Google. Практически всем веб-мастерам пришло письмо об изменении критериев для ранжирования сайтов. Предупреждает нас компания Google, что с 21 апреля 2015 года будет активно использоваться алгоритм mobile-friendliness. Что это значит? С 21 апреля позиции ресурсов, не адаптированных под...
Надежда Трофимова [email protected] Administrator Блог сайтВозможно Вас также заинтересует:
Акция «Приведи друга» от Банка «НЕЙВА»
Приглашайте друзей в Банк «НЕЙВА» и получайте подарок за каждого друга, который оплатит покупки картой Банка «НЕЙВА».
Как узнать страну-производитель товара по штрих-коду
Всем привет. Мне тут на днях очень надо было узнать штрих коды стран производителей товаров, искала в интернете, вся информация как то неудобно для...
Как получить двойной кэшбэк на алиэкспресс и других интернет-магазинах
А вы знаете как получить кэшбэк с покупки, а как получить двойной кэшбэк, и конкретно как получить двойной кэшбэк на алиэкспресс? Если нет, то сейчас узнаете.
C рождеством христовым
С наступающим Новым годом!
Пусть Новый год звездой счастливой, Войдет в семейный ваш уют, Со старым годом торопливо Пускай невзгоды все уйдут! Пусть каждый день теплом согреет, И много счастья принесет, И все сомнения...
Поисковые системы стремятся улучшить поисковую выдачу пользователям мобильных устройств (смартфонов, планшетов), поэтому сайты оптимизированные под разные размеры экранов будут отображаться выше, чем сайты не имеющие такой оптимизации. Сюда же относятся мобильные версии сайтов.
Признаки дружелюбного к мобильным устройствам сайта:
- Удобно читаемый контент (читается без увеличения), крупные поля форм и кнопки.
- Отсутствие "тяжелых" картинок, Flash - элементов и излишней анимации.
- Отсутствие Java-апплетов и Silverlight-плагинов.
- Отсутствие горизонтальной полосы прокрутки.
- Минимальная скорость загрузки сайта.
- Максимально простая навигация.
- Прописан мета-тег viewport.
Сервисы для проверки сайта на "мобильность"
Для демонстрации работы сервисов возьмём сайт моих хороших партнёров - бюро переводов КОНТЕКСТ .
1. Google Mobile Friendly
Проверить можно любой сайт, просто вбив его адрес в строку.
Отображает на экране как выглядит сайт на смартфоне и даёт общую оценку его оптимизации под мобильные устройства.
В отличии от остальных сервисов, тут можно проверить не каждый сайт, а только свой. То есть после того, как сайт добавлен в интерфейс вебмастера с подтверждением прав на него.
Сервис отображает общую оценку, проверяет по 6 пунктам соответствия и показывает как выглядит сайт на смартфоне.
3. Средство проверки Bing
Проверяется общая оптимизация плюс соответствие 4 пунктам.
Также отображается то, как сайт выглядит на экране смартфона (конечно же, на OS windows, в то время предыдущие сервисы отображали android-смартфон =)).
4. Mobile Checker от W3C
Самый "долгий" из всех сервисов. Настолько "долгий", что окончания проверки я так и не дождался =)
Ждал минут 5, в то время как остальные сервисы справлялись за 5-20 секунд.
5. Responsinator
В отличии от остальных не даёт каких-либо оценок, но отображает как выглядит ваш сайт на 6 различных устройствах в двух ориентациях на IOS и Android, что очень круто.
UPD1: 20.07.2017:
6. Adaptivator
Сервис предложенный в комментариях к этой статье. Лично не пользовался, но вроде всё довольно-таки неплохой. Возможности аналогичны респонизатору, но есть ещё и оценка результата адаптивности.
UPD2: 3.11.2017:
7. iloveadaptive.ru
Ещё один новенький сервис, предложенный в комментариях. Как по мне, немного грузноват и непрактичен, но это с лихвой окупается большими возможностями. Имеется даже сортировка по ОС.
Вывод
Несомненно, адаптация сайта под мобильные устройства, не просто дань моде и времени, а необходимый атрибут современного сайта, помогающий не только конечному пользователю.
Поэтому всем, кто хочет быть ближе к клиенту и иметь больше посещений\лидов, рекомендую как можно быстрее адаптировать свои сайты. Задать мне вопрос -
Сегодня выбор «правильного» браузера — залог удобного времяпровождения в сети Интернет. И для того, чтобы не ошибиться в своем выборе, необходимо хорошо знать, какие плюсы и минусы имеет тот или иной браузер. Сейчас же мы поговорим о широко распространенном браузере Google Chrome, опишем его особенности, выясним разницу между его мобильной и компьютерной версиями и расскажем, где можно бесплатно скачать это веб-приложение.
Описание браузера
Google Chrome — один из самых продвинутых и быстродействующих браузеров на сегодняшний день. Движок, на котором разрабатывался этот продукт, называется Chromium (больше о нем можно найти на Википедии ), а создан он был для надежного, быстрого и безопасного доступа к глобальной сети Интернет.
Браузер от Google может порадовать своим минималистическим внешним стилем и большим набором возможностей, добавлять и настраивать которые пользователь может с помощью специальных плагинов (дополнений), многие из которых можно найти в Интернет-магазине Chrome .
Среди основных особенностей браузера можно выделить следующие:
Отличное быстродействие.
Поддержка многих языков (в том числе и русского).
Полный минимализм: нету лишних кнопок, вкладок, загромождения пространства различными объектами.
Полная поддержка плагинов для пользователей.
Автоматическое обновление клиента при необходимости.
Возможность использовать режим инкогнито.
Экономия трафика и времени на обработку запросов.
Кроссплатформенность.
Мобильная версия браузера
Несмотря на то, что существует компьютерная версия данного браузера, разработчики также позаботились о версиях для мобильных устройств, которые работают на Android и IOS .
Разница от ПК-версии здесь несущественная, хотя мобильные телефоны имеют свои особенности. Здесь же уклон сделан на удобство, ведь пользователь не должен чувствовать никакого дискомфорта при использовании программы на мобильном телефоне.
Единственной отличительной чертой мобильной от ПК-версии является наличие в мобильной версии встроенного голосового поиска, тогда как полноценная компьютерная требует скачивания специального плагина.
Где скачать Google Chrome
- Бесплатно скачать Google Chrome для IOS
- Бесплатно скачать Google Chrome для Android
- Бесплатно скачать Google Chrome для WIndows