как выглядит сайт на телефоне
Анализ удобства просмотра сайта на мобильных устройствах при помощи инструментов Google
Апдейт алгоритмов ранжирования Google от 21 апреля стал сигналом для многих веб-мастеров к адаптации своих сайтов под мобильные устройства – это официально стало весомым фактором ранжирования сайта в поисковой выдаче. Теперь, по прошествии 5 месяцев можно сказать что этот тренд не только сохранился, но и продолжает развиваться. А это значит, что уже давно пора принять меры для того, чтобы ваш сайт был готов к просмотру на мобильных устройствах.
Итак, что же нужно предпринять, чтобы не повторить их печальный опыт?
Как уже было упомянуто, Google запустил несколько инструментов для анализа работы сайта.
Проверка удобства просмотра на мобильных устройствах
Отличный результат, что сказать
Принцип работы очень прост: копируете адрес странички, предназначенной для проверки, ждете и анализируете результат. Проверка происходит небыстро, как правило секунд 20-40. Результаты проверки довольно наглядны и позволяют быстро найти проблемные места. Чаще всего это: «Слишком мелкий шрифт», «Не задана область просмотра для мобильных устройств», «Контент шире экрана», «Ссылки слишком близко друг к другу». Сервис обязательно будет ругаться на использование Flash – в современном мире он поддерживается все хуже и хуже. Этот сервис стоит использовать в первую очередь, для проверки сайта.
Google PageSpeed Insights
Мда, как же так?
Замечательный, хоть и достаточно строгий сервис, который не раз и не два упоминался на Хабре, и которым в обязательном порядке должен проверяться любой сайт (по моему личному мнению). Принцип работы тот же – вводим ссылку, ждем, получаем ряд комментариев и оценку страницы. Чем выше – тем лучше, но редко кому удается достичь результата в 100 баллов, особенно если на сайте используется яндекс.метрика/google analytics и другие подключаемые скрипты.
Итак, чем же он полезен? Во-первых, он проводит схожую проверку страницы, что и предыдущий сервис (но немного быстрее). Во-вторых – PageSpeed, как видно из названия, предназначен для анализа и оптимизации скорости загрузки страницы. Это немаловажный фактор ранжирования, и он учитывается уже достаточно давно. Да и в любом случае, медленно загружающаяся страница всегда теряет посетителей. PageSpeed дает рекомендации не только по внешнему виду страницы на мобильных устройствах, но и напоминает о том что стоит включить кеширование, прописать gzip/deflate сжатие ресурсов, минифицировать css и js, а также убрать оные в конец кода, чтобы не блокировать загрузку. Но на практике, самый большой прирост скорости дает оптимизация картинок – именно этот ресурс обычно грузится дольше всех. Утилита под названием FileOptimizer позволяет решить эту проблему достаточно быстро, кроме нее есть ряд серверных утилит и аналогов – в общем, было бы желание.
Также, можно получить рекомендации по удобству просмотра в инструментах разработчика — www.google.com/webmasters/tools (если у вас уже есть аккаунт). Там вы можете получить все сообщения об ошибках по своему сайту, графики и другую ценную информацию. К сожалению, объем предоставляемой информации этим сервисом настолько велик, что его разбора хватит на несколько отдельных статей.
Я не нашел аналогичных инструментов от Яндекса, или других отечественных аналогов, но думаю что этих двух инструментов должно вполне хватить. На крайний случай, можно использовать эмуляторы:
7 сервисов для проверки сайта на мобильность
Поисковые системы стремятся улучшить поисковую выдачу пользователям мобильных устройств (смартфонов, планшетов), поэтому сайты оптимизированные под разные размеры экранов будут отображаться выше, чем сайты не имеющие такой оптимизации. Сюда же относятся мобильные версии сайтов.
Признаки дружелюбного к мобильным устройствам сайта:
Сервисы для проверки сайта на «мобильность»
1. Google Mobile Friendly
Проверить можно любой сайт, просто вбив его адрес в строку.
Отображает на экране как выглядит сайт на смартфоне и даёт общую оценку его оптимизации под мобильные устройства.
В отличии от остальных сервисов, тут можно проверить не каждый сайт, а только свой. То есть после того, как сайт добавлен в интерфейс вебмастера с подтверждением прав на него.
Сервис отображает общую оценку, проверяет по 6 пунктам соответствия и показывает как выглядит сайт на смартфоне.
3. Средство проверки Bing
Проверяется общая оптимизация плюс соответствие 4 пунктам.
Также отображается то, как сайт выглядит на экране смартфона (конечно же, на OS windows, в то время предыдущие сервисы отображали android-смартфон =)).
4. Mobile Checker от W3C
Самый «долгий» из всех сервисов. Настолько «долгий», что окончания проверки я так и не дождался =)
Ждал минут 5, в то время как остальные сервисы справлялись за 5-20 секунд.
Пробовал Google chrome и Opera.
5. Responsinator
В отличии от остальных не даёт каких-либо оценок, но отображает как выглядит ваш сайт на 6 различных устройствах в двух ориентациях на IOS и Android, что очень круто.
UPD1: 20.07.2017:
6. Adaptivator
Сервис предложенный в комментариях к этой статье. Лично не пользовался, но вроде всё довольно-таки неплохой. Возможности аналогичны респонизатору, но есть ещё и оценка результата адаптивности.
UPD2: 3.11.2017:
7. iloveadaptive.ru
Ещё один новенький сервис, предложенный в комментариях. Как по мне, немного грузноват и непрактичен, но это с лихвой окупается большими возможностями. Имеется даже сортировка по ОС.
Вывод
Несомненно, адаптация сайта под мобильные устройства, не просто дань моде и времени, а необходимый атрибут современного сайта, помогающий не только конечному пользователю.
6 онлайн-сервисов для проверки адаптивности сайта
Смотрим глазами клиента. Удобно с его устройства, браузера, ОС? Правильно ли всё отображается? Он точно не хочет покинуть сайт?
Адаптивность — корректное отображение на всех устройствах: компьютерах, планшетах, смартфонах. Если пользователь с телефона зайдёт на сайт, у которого горизонтальная прокрутка, мелкий шрифт, обрезанные картинки, некликабельные кнопки, — вряд ли дойдёт до покупки. Проще не мучиться, а уйти на сайт конкурента.
Адаптивность становится всё более важной с ростом мобильного интернета. Согласно исследованию GfK, в 2018 году 35% россиян пользовались интернетом только со смартфонов и планшетов. Также это большой плюс для SEO: так, Google обещает в течение 2020 года отдать приоритет в выдаче сайтам, удобным для просмотра с мобильных устройств. Именно поэтому стоит проверять свой сайт на адаптивность/мобильность (лучше и на кроссбраузерность/кроссплатформенность — удобство пользования в любых браузерах и операционных системах).
Я подобрала и протестировала шесть онлайн-инструментов для проверки адаптивности. Описания и тарифы актуальны на октябрь 2020 года.
Автор-фрилансер, пишет на разные темы, чаще о растениеводстве и технологиях в сельском хозяйстве.
Google Mobile-Friendly Test
Сервис проверяет мобильность сайта, показывает, как он выглядит на экране смартфона. В результатах теста будут описаны проблемы с загрузкой или отображением. Ошибки могут быть связаны со шрифтами, плагинами, стилями CSS, размерами интерактивных элементов.
Инструмент полностью бесплатный.
Resizer
Сервис проверяет адаптивность на трёх устройствах: компьютере, планшете, смартфоне. Просмотр — интерактивный, то есть можно взаимодействовать с сайтом: скроллить, кликать, переходить в другие разделы. Конкретные модели устройств не указаны, произвольные размеры экранов тоже задать нельзя — есть только стандартные.
Проект снова бесплатный и снова принадлежит Google.
Adaptivator
Этот онлайн-сервис показывает, как сайт может выглядеть на разных моделях планшетов и смартфонов: iPhone, Lumia, Nexus, iPad и др. Здесь не скриншоты, как в Google Mobile-Friendly Test, — на каждом устройстве можно листать страницу, смотреть все картинки, проверять, как отображаются разные элементы.
Некоммерческий проект, приветствуются донаты. Англоязычный аналог — Responsinator.
Screenfly
Англоязычный сервис (сейчас принадлежит Blue Tree, раньше — QuirkTools). Представлено 30+ моделей смартфонов, планшетов, ПК и ТВ. Можно поворачивать экраны, запрещать прокрутку, задавать произвольные размеры. Судя по всему, сервис не боится вышеупомянутого запрета на удалённый просмотр. Удобно сразу делиться ссылкой на проверку адаптивности.
I Love Adaptive
Ещё один инструмент для тестирования сайтов на адаптивность. Большой выбор устройств, моделей, операционных систем. Как и в Screenfly, можно задать произвольный размер экрана. Дополнительные функции: валидация HTML-кода, проверка скорости загрузки, сравнение нескольких сайтов. Чтобы обойти запрет на отображение контента, разработчики предлагают установить расширение Chrome.
Сервис бесплатный, как и предыдущие.
Browserling
Англоязычный сервис для проверки адаптивности. Ключевое отличие от других — полноценное тестирование на кроссбраузерность и кроссплатформенность.
Бесплатно можно проверить сайт только на Internet Explorer 11, Windows 7 и при разрешении 1024×768. Чтобы получить доступ ко всем функциям, нужно платить от 19 долларов в месяц.
Подытожим
Если достаточно проверить мобильность (правильность отображения на смартфонах) в целом — хватит Google Mobile-Friendly Test.
Нужно посмотреть, как сайт выглядит на разных экранах, — для тестирования подойдут Resizer, Adaptivator или Screenfly (умеет обходить запрет на просмотр). Если ещё требуется сравнить отображение нескольких сайтов, а заодно проверить валидность кода и скорость загрузки, — в помощь I Love Adaptive.
Когда важно протестировать не только мобильность, но и юзабилити на конкретных браузерах и ОС, — не обойтись без Browserling. Это единственный платный инструмент в подборке, хотя у него есть и ограниченная бесплатная версия.
Если предстоит не только проверить, но и освоить адаптивную вёрстку, — пора учиться в Skillbox.
9 Сервисов проверки мобильной версии сайта
Вступление
Вопрос, нужна ли мобильная версия сайту, на сегодня не актуален. Безусловно, нужна. Мобильный трафик неуклонно растёт, и игнорировать версию сайта для мобильных устройств это ненормально для владельца сайта. В статье проверки мобильной версии сайта на онлайн сервисах.
О мобильной версии сайта – два слова
Напомню, что оптимизировать сайт WordPress для просмотра на мобильных гаджетах можно двумя способами. Первый способ – использовать адаптивную тему (шаблон) для сайта. Второй способ – создать мобильную версию сайта для гаджетов типа смартфон и планшет.
На самом деле есть третий способ — использовать прогрессивное веб-приложение PWA. Приложение не только адаптируют ваш сайт под любое мобильное устройство, но выполняет уведомления в режиме реального времени (push-уведомления), поддерживает ваш сайт в автономном режиме и имеет ряд других уникальных возможностей.
Лично я предпочитаю использовать адаптивный шаблон, хотя адаптивный сайт априори будет дольше загружаться на мобильном устройстве, так как не сокращает объем страниц.
Также напомню, что мобильная версия и адаптивный дизайн НЕ имеют ничего общего с AMP версией сайта. (читать об AMP тут).
9 Сервисов проверки мобильной версии сайта
Если по каким либо причинам вы отдали предпочтение мобильной версии сайта, вместо адаптивного дизайна, предлагаю следующие сервисы для проверки мобильной версии сайта, не только WordPress.
Важно! Обращу ваше внимание, что большинство предлагаемых сервисов проверяют НЕ только мобильную версию сайта (mobile), но и его адаптивность (responsive). То есть выполняется проверка на общую адаптивность сайта для мобильных устройств.
Сервис №1: Проверка мобильных версий от Google Search Console
Работать с данным сервисом можно без аккаунта Google. Пояснять работу сервиса, наверное, не стоило, но всё же. В поле проверки вписываете URL своего сайта и нажимаете кнопку «проверить».
Адаптация сайта будет проинформированная зеленой информацией. Нарушение адаптации будет сообщено красным цветом.
Сервис №2: Проверка мобильных страниц Яндекс.Вебмастер
Работать с этим сервисом без Яндекс аккаунта и добавление сайта в Яндекс.Вебмастер НЕ получится. Однако, если вы всё перечисленное сделаете, проверка мобильных страниц станет лишь одним из инструментов Яндекс.Вебмастер.
Для проверки вам нужна вкладка сервиса «Инструменты>>> Проверка мобильных страниц. Далее выбираете свой сайт в списке сайтов и проверяете его мобильность.
Результаты проверки будут расписаны по шести позициям. Общий результат мобильности вверху списка проверок. Информация «Страница оптимизирована для мобильных устройств», говорит, что на вашем сайте с оптимизацией под мобильные всё хорошо.
Эмулятор мобильного телефона COWEMO
Один из сервисов компании COWEMO позволяет создать эмуляцию просмотра сайта на одном из 13-ти устройствах.
После заполнения настроек вы сразу видите, ваш сайт на выбранном гаджете.
Особенности:
Проверки мобильной версии сайта на Responsinator
Responsinator помогает разработчикам и владельцам сайтов быстро узнать, как их сайт будет выглядеть на популярных мобильных устройствах.
Сервис не точно реплицирует, как будет выглядеть сайт, поскольку точное тестирование всегда проверяется на реальных устройствах.
Screenfly
Screenfly позволяет просматривать ваш сайт на различных экранах устройств и разрешениях. Введите URL-адрес и нажмите GO.
Особенности
Responsivepx
Введите URL своего сайт, используйте элементы управления установите ширину и высоту окна просмотра. Точную ширину можно вписать вручную.
Проверки мобильной версии сайта на Responsivedesign
Это не инструмент тестирования сайта. Это простой и визуальный инструмент, позволяющий быстро посмотреть, как выглядит сайт сразу на 4-х устройствах, включая мобильные устройства.
Проверки мобильной версии сайта на iPhone
Простой и узконаправленный сервис, чтобы посмотреть как выглядит сайт на iPhone.
Платный мобильный эмулятор страницы
Не нужно думать, что все эмуляторы бесплатны. Вот пример платного эмулятора, который дает 30 дней триала после регистрации.
Этот эмулятор мобильных страниц, покажет ваши целевые страницы на двух устройствах одновременно. Пройдите свой сайт легко в эмуляторе, чтобы ускорить тестирование.
Вывод
Я не включил в обзор инструменты и расширения браузеров, которые позволяют просматривать сайт на различных мобильных устройствах. Например, в Chrome есть на правой кнопке мыши, ссылка «Просмотреть код», где есть отличный эмулятор. Но даже без этих расширений, используя сервисы обзора, вы всегда можете сделать проверки мобильной версии сайта.
Как выглядит сайт на разных устройствах?
Все больше девайсов доступно потребителям, люди чаще заходят в интернет с планшетов и смартфонов. Поисковики обращают внимание на сайты, которые «дружат» с разными разрешениями экранов, а не только с десктопом. Адаптивным считается дизайн, который корректно отображается на любых устройствах.
В октябре 2016 Google анонсировал изменения в выдаче. Раньше адаптивные сайты помечались отдельным значком в результатах поиска как mobile-friendly. В ближайшие несколько месяцев начнется разделение мобильной (смартфоны, планшеты) и десктопной (с компьютеров и ноутбуков) поисковой выдачи. Поэтому если существенная часть Вашей аудитории пользуется мобильными устройствами – Вы рискуете потерять часть поискового трафика, если дизайн сайта не приспособлен для смартфонов и планшетов.
Зачем проверять, как выглядит сайт на мобильных устройствах?
В 2015 году компания TNS Web Index провела установочное исследование. Опросили 60 тыс. россиян в возрастном диапазоне от 12 до 64 лет и выяснили, что 64% пользователей интернета заходят еще и с мобильных устройств. 15% этого числа людей, обходятся без компьютеров. А вот данные Яндекса.
Больше всего ищут информацию и контент: книги, музыку, игры и т.д. Поэтому информационным и развлекательным сайтам желательно иметь адаптивный дизайн. И коммерческим, если вы предоставляете «горящие» услуги: вызов эвакуатора или слесаря, аварийное вскрытие замков, доставка пиццы или суши.
Адаптивность не будет лишней для любого ресурса, потому что мобильная аудитория растет, спад не ожидается. По данным того же исследования, некоторые пользователи уже обходятся без десктопов. А поисковые роботы занижают «нерезиновые» сайты в выдаче. Исключение: ресурсы с низкой долей мобильного трафика.
Чтобы узнать с каких устройств к вам приходят, используйте Яндекс.метрику: https://yandex.ru/support/metrika/reports/user-pc.xml.
Есть и другие способы понравиться пользователям разных устройств, например, создание мобильной версии сайта. Это удобно для посетителей, потому что сайт не перегружен излишней графикой и контентом. Если веб-мастер внесет значительные изменения в код, это не заденет основной сайт. Но есть и существенные минусы.
Делать мобильную версию стоит, когда подавляющая часть трафика приходит с телефонов и планшетов: если вы социальная сеть или развлекательный портал. В остальных случаях — адаптивный дизайн.
Как проверить, как выглядит сайт на планшете или смартфоне?
В инструментарии онлайн сервисов Яндекс.вебмастер и «Гугл» есть специальные утилиты, которые анализируют сайт и обозначают, где искать проблемы.
Посмотреть своими глазами, как сайт выглядит для владельцев мобильных устройств можно во всех популярных браузерах. Для Firefox просмотр вызывается сочетанием клавиш Ctrl+Shift+M.
В Google Chrome для просмотра следует нажать F12. Окно растягиваем мышкой или задаем нужное разрешение цифрами.
Если Вы ищете хостинг для определенной системы управления контентом – загляните на нашу страницу CMS хостинга.
Онлайн сервисы для проверки, как выглядит сайт на разных разрешениях
Проверить, как сайт выглядит при разных разрешениях экрана пользователя можно с помощью онлайн сервисов.
Responsivedesign
Можно поделиться ссылкой на результат проверки.
Quirktools
В сравнении с первым сервисом, функционал получше. Показывает разрешения:
Обязательно посмотреть с мобильного телефона, на разных версиях android
Подобные сервисы всего лишь имитация. Бывает, что на них проблем с дизайном нет, а на android девайсе плывет верстка. Метрики шрифтов, размеры кнопок, отображение некоторых csshtml тегов специфичны для различных операционных систем и браузеров.
Нужно обязательно смотреть, как выглядит сайт на реальных устройствах и можно ли на них выполнить целевые действия. Бывает, что сайт выглядит отлично, а форма заказа не работает.
Но не всегда под рукой нужные инструменты — не каждому на работе выдают айпады, айфоны и пару девайсов на андроиде. Необязательно искать все возможные варианты, но лучше проверить хотя бы на тех устройствах, с которых к вам чаще заходят.
Если и таких нет, спросите необходимую модель у друга или протестируйте в ближайшем магазине. Иначе Вы рискуете лишиться немалой части трафика. Информацию по аудитории сайта, наиболее популярным разрешениям и операционным системам получаем с помощью той же Яндекс.метрики.
iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.