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


Содержание материала:

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

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

Навигация по статье:

Тестирование сайта перед запуском является крайне необходимым этапом в связи с огромным разнообразием мобильных устройств, находящихся в распоряжении потребителей. И даже применение столь гибкой методики как адаптивный дизайн, не устраняет эту необходимость. Мобильные устройства постепенно вытесняют стационарные компьютеры — смотрите график ниже, видите насколько вырос мобильный трафик за последние 2 года?

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

1. Тестирование на реальных мобильных устройствах

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

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

2. Использование симулятора iOS и эмулятора Android

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

  • Симулятор iOS, поставляемый в интегрированной среде разработки Xcode, имитирует отображение сайта в iPhone и iPad

Симулятор iOS входит в интегрированную среду разработки ПО Xcode. Сначала установите Xcode с платформы App Store. Зайдите в меню Xcode и выберите Xcode > Open Developer Tool >iOS Simulator. К сожалению, инструмент совместим только с операционкой Mac OS, поэтому пользователям Windows или Linux придется поискать другой вариант.

Эмулятор Android поставляется в среде разработки приложений Android SDK. Подробная информация об эмуляторе Android находится здесь.

3. Браузерное тестирование

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

Онлайн-сервис BrowserStack имитирует стационарные и мобильные устройства для тестирования сайтов, это удобный онлайн-инструмент для тестирования сайтов на разных устройствах и в разных браузерах.

4. Сервис Responsinator

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

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

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

5. Изменение размеров окна браузера

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

А как проводите тестирование вы?

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

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

Мы уже обсуждали как сделать мобильную версию сайта, в текущей статье речь пойдет о том, как осуществляется проверка мобильной версии сайта, её удобство, читабельность и правильность отображения.

Проверку вашего сайта на удобство отображения на мобильных устройствах можно проверить с помощью различных веб-сервисов. В частности, данный сервис от 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 и т.д.).

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

Применительно к России приведенная статистика не актуальна. Но факт преобладания входов в интернет со смартфонов отрицать невозможно. Независимо от выбранной платформы сайта: на CMS (системе управления контентом) или иной вариант, — есть необходимость получать актуальные данные о работоспособности проекта. Целый ряд сервисов Гугл поможет улучшить адаптивные свойства ресурса, позволит знать об ошибках, скорости загрузки, других параметрах.

Search Console – Google Вебмастер: условия использования

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

Важным условием использования Гугл Консоли выступают простые требования:

  • наличие собственного работающего домена;
  • подключенный ssl-сертификат;
  • скачивание и размещение HTML-файла на сервере;
  • добавление полученного документа на сайт, Site-map c помощью тега «sitemap.xml».

После выполнения перечисленных условий, проект примерно через 7 суток окажется в базе сервиса.

Как работать с Консолью в Вебмастере

Использование сервиса максимально упрощено. Достаточно ввести в строку проверки нужный URL, активировать. Через несколько секунд система выдает результат.

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

Полезно привести отдельно, наиболее часто возникающие проблемы:

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

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

Другие возможности для вебмастеров от Гугл

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

Определить возможные ошибки проекта поможет приложение Гугл по URL. Последовательность действий тривиальна: достаточно ввести адрес в специальную строку. Начнется сканирование. Проанализировав полученные результаты, система выдаст сообщение о корректности работы мобильной версии.

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

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

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

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

О чем это говорит, если главная страница сайта загружается быстро, информация отображается корректно. Существует ряд причин, объясняющих недостаточно высокие результаты. Например, часть элементов страницы закрыта от сканирования файлом robot.txt. Это не нравится поисковику. Но следуя нашей стратегии продвижения, подобные действия необходимы.

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

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

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

Независимо от результатов проверки: есть помехи в продвижении

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

Альтернативно, мгновенно появится сообщение «Страница не оптимизирована для мобильных устройств». Например, на одном из исследуемых нами ресурсов указана некорректная верстка, в следующих форматах:

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


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

Скорость загрузки по мобильному трафику

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

Сервис TestMySite еще один способ проверить проект на соответствие требованиям поисковой системы. Интерфейс приложения прост в использовании. Достаточно ввести URL проверяемого сайта. Проверка длится несколько минут. У этого сервиса также есть версии: для обычного пользователя и обладателя доступа к админке сайта.

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

Касательно рассматриваемого случая, удалось проверить сайт исключительно в условиях подключения 4G. Гугл не предоставляет другого выбора для стороннего пользователя. Доступная нам версия не позволяет анализировать ресурс постранично: опция доступна для сайта полностью, где вычисляется среднее время загрузки. Но полученные нами результаты впечатляют. Вот почему. Считается, что скорость загрузки страниц может отличаться от того, что используется для входа в сеть: мобильный трафик или Wi-Fi. Предполагается, что первый способ медленнее. Поэтому 2.3 с и 1.5 с для Главной страницы – отличный результат.

Что дает детальный отчет сервиса?

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

  • Ресурсов отрасли.
  • Сайтов конкурентов и из базы проекта.
  • Рекомендации по оптимизации (профессиональная информация для программистов).

Результаты предоставляются как в текстово-графическом виде, так и визуализированном.

Google Pagespeed Insights

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

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

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

К существенным минусам проекта Google Pagespeed Insights относят возможность сканирования только в режиме беспроводного подключения. Нет возможности сделать измерения для 3G или 4G. Поэтому специалисты все реже используют этот сервис. Для тех, кому интересно. Здесь также можно получить сведения, будучи простым пользователем. Более того, объемы информации, предоставляемые сервисом незарегистрированным гостям, шире, чем в предшествующих приложениях.

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

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

Зарегистрированные пользователи имеют доступ к получению более полного отчета. В него войдут такие данные:

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

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

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

Как проверить отображение сайта на мобильных устройствах — список платных и бесплатных сервисов

Приветствую вас, дорогие друзья!

Мобильные гаджеты заполонили мир. Без телефона сегодня даже за хлебом не ходят.

В наше время Интернет стремительно развивается. Быстрый рост рынка мобильного Интернета заставляет создателей веб-ресурсов адаптировать свои сайты под данный тип устройств.

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

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

Все они работают практически по одному и тому же принципу:

  1. заходите на сайт разработчика того или иного сервиса
  2. скачиваете нужное ПО
  3. запускаете приложение
  4. и через некоторое время мобильная версия вашего веб-сайта перед вами!

Существуют сервисы, которые могут осуществить тестирование вашего сайта в режиме онлайн.

Выбор, как всегда, за вами!

Бесплатные

Mobile Friendly . Данное приложение создано компанией Гугл специально для того, чтобы проверить оптимизирован ли веб-ресурс под смартфоны и прочие гаджеты.

Responsinator . Благодаря данному приложению вы легко сможете увидеть, как выглядит сайт на Kindle, iPad, Android, iPhone.

Ipad Peek . Один из наиболее популярных бесплатных инструментов тестирования, с помощью которого можно видеть отображение собственного веб-сайта на айфоне и айпаде.

Opera Mini Simulator . Эмулятор от компании Opera содержит весьма большую базу мобильных гаджетов. Единственным его недостатком можно считать отсутствие режима онлайн, то есть для тестирования вашего ресурса вам придется скачать и установить нужное ПО.

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

MobiReady. Отличный инструмент для тестирования, который оценивает адаптивность дизайна. Проверка основана на лучших стандартах W3C (Консорциума Всемирной паутины).

Mobile Phone Emulator и Screenfly . Схожие сервисы, которые тоже дают возможность просматривать состояние веб-ресурса на экранах любых гаджетов.

Платные

CrossBrowserTesting . Проверяет на 130 различных браузерах и 25 операционках, включая: Blackberry, Android, iPad, iPhone. За его использование вам надо будет ежемесячно платить по 29.95$.

BrowserStack . Обеспечивает быстрый доступ к огромной базе браузеров. Стоит до 19$ за один месяц, но есть и бесплатная версия.

Browshot . Предназначен для снятия скриншотов с Android, iPad, iPhone. За пять скриншотов вам придётся заплатить 1 доллар.

Perfecto Mobile . Даёт доступ к базе планшетов и сотовых телефонов, что позволяет вам видеть, насколько качественна оптимизация на каждом типе устройств. За его использование нужно платить до 15 долларов за сутки.

Multi-Browser Viewer . Кросс-браузерное приложение, содержащее мобильные эмуляторы и браузеры для проведения тестирования в любом формате. Стоит до 140 долларов, есть и бесплатная демо-версия.

DeviceAnywhere . Прекрасный инструмент, дающий возможность точечно проверять веб-контент, тестируя ресурс в реальном времени. Может быть как платным (по 100 долларов в месяц), так и бесплатным.

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

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

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

Проверить адаптацию мобильной версии под гугл можно с помощью сервиса Mobile Friendly . Его я уже упоминал в списке бесплатных инструментов.

А для яндекса есть похожий инструмент в пока тестируемой версии кабинета для вебмастеров (https://beta.webmaster.yandex.ru/).

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

Подписывайтесь на новости блога и вы еще много интересного и полезного узнаете. А пока прощаюсь с вами, до встречи в новой статье!

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

Хотите увеличить доход со своего сайта, но не уделяете мобильному трафику особое внимание? Если вы ответили «да», то посмотрите, сколько людей посещают ваш сайт со смартфона или планшета. А вы не монетизируете эту аудиторию и упускаете прибыль.

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

  1. responsinator.com
    Бесплатный инструмент для проверки работы сайта на мобильных устройствах.
  2. google.com/webmasters/tools/mobile-friendly/
    Бесплатная проверка удобства просмотра на мобильных устройствах.
  3. quirktools.com/screenfly
    Инструмент предоставляет возможность проверки сайта на большом количестве устройств беплатно.
  4. ipadpeek.com
    Бесплатный инструмент тестирования интерфейсов, который позволяет видеть, как ваш сайт выглядит на iPad или iPhone.
  5. dynatrace.com
    Бесплатный инструмент, который позволяет получить оценку на основе глубокого анализа более 30 различных параметров. Правда, просит ваши контакты.
  6. Mobilephoneemulator.com – даёт представление о мобильном виде сайта на 9 различных смартфонах, включая iPhone 5, Samsung Galaxy S2 и несколько других моделей.
  7. opera.com/ru/developer
    Бесплатный эмулятор от Opera, который содержит в себе довольно внушительную базу мобильных устройств.

И кстати, напишите в комментариях, какова доля мобильной аудитории на вашем сайте/сайтах?

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

Конструкторы

1. MoFuse – один из самых известных конструкторов мобильных сайтов. Инструмент платный, минимальная стоимость – $9 в месяц.

2. Wirenode – позволяет настраивать доменное имя, загружать изображения, отслеживать посетителей. Есть бесплатная версия.


3. Mippin – бесплатный инструмент с поддержкой рассылки RSS.

4. Winksite – еще один бесплатный конструктор мобильных сайтов.

5. MobiSiteGalore – платформа для разработки мобильных веб-сайтов, которые можно посещать как с компьютера, так и с мобильного телефона. Минимальная стоимость – $49 в год.

6. Mobify – инструмент с простым и интуитивно понятным интерфейсом.

7. Wirenode – этим конструктором пользуются такие компании, как Ford, Nokia и Reebok.

8. Onbile – инструмент обещает создать мобильную версию вашего сайта за пять минут (или даже меньше).

9. DudaMobile – поможет создать сайт с адаптивным дизайном.

10. MoAction конструктор мобильных сайтов для малого бизнеса и интернет-магазинов.

Проверка работы на различных устройствах

10. Ipad Peek – инструмент позволит узнать, как ваш сайт выглядит на экране IPad или iPhone. Сервис бесплатный.

11. Mobile Phone Emulator – здесь вы можете посмотреть на свой сайт на экране iPhone, HTC, LG, BlackBerry и Samsung.

12. Screenfly – Еще один бесплатный сервис с поддержкой различных устройств.

14. Responsinator – позволяет узнать, как инструмент выглядит на iPhone, iPad, Android, и Kindle.

15. Opera Mini Simulator – эмулятор от Opera с большой базой мобильных устройств.

16. CrossBrowserTesting – здесь вы можете проверить сайт на более чем 130 версиях браузеров.

17. BrowserStack – платный инструмент, предоставляет доступ к широкой базе браузеров.

18. Multi-Browser Viewer – приложение, которое содержит 11 мобильных браузеров и эмуляторов, 55 автономных браузеров и 88 различных разрешений для тестирования экрана браузера в разных форматах.

19. Perfecto Mobile – предоставляет доступ к широкой базе мобильных телефонов и планшетов.

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

20. Adaptive Images – изменяет размер изображения в зависимости от размера экрана.

21. Sencha – динамически изменяет размер изображений (не увеличивает).

22. Resizeable Images – руководство по изменению размеров изображения в зависимости от объема текста.

23. Responsive Widgets – этот плагин предлагает новые текстовые/HTML виджеты WordPress, доступные только на гаджетах типа iPad, Nook, PlayStation Vita и других общих устройствах.

24. FitVidJS – плагин для создания эластичного видео.

25. Photo Swipe – адаптивная галерея для мобильных и сенсорных устройств.

26. FitText – плагин, делающий шрифты «резиновыми».

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

28. Google Developers – инструмент для проверки от Google.

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской

Лучший инструмент для создания сайтов адаптивных это руки) На помощь может придти плагины, скрипты, css-фреймворки. По моему мнению все эти сервисы шляпа. Никако инструмент не сделает адаптив лучше чем верстальщик. Ни один инструмент не может сказать что сайт оптимизирован на все 100%.

Пример:
На один сайт я поставил медиа запрос 320-480px (популярное разрешение мобилок). Однако, Яндекс Бета Вебмастер, Пейдж Спид и Мобайл Фёрст от Гугла говорят мол крч все з.

Лучший инструмент для создания сайтов адаптивных это руки) На помощь может придти плагины, скрипты, css-фреймворки. По моему мнению все эти сервисы шляпа. Никако инструмент не сделает адаптив лучше чем верстальщик. Ни один инструмент не может сказать что сайт оптимизирован на все 100%.

Пример:
На один сайт я поставил медиа запрос 320-480px (популярное разрешение мобилок). Однако, Яндекс Бета Вебмастер, Пейдж Спид и Мобайл Фёрст от Гугла говорят мол крч все збс, все оптимизировано. Но заглянув к примеру в Метрику срез по году по популярным разрешениям экранов, там много больше разрешений. Так вот, если делать адаптив под все разрешения хотя бы те что >960px то там как минимум 5 итераций надо. По времени и ресурсам накладненько. Но не сделав этого, пользователь зайдя с планшета ужаснется от внешнего вида и убежит как испуганная крыса с корабля.

Чек-лист для оптимизации мобильного сайта

О том, что каждый уважающий себя сайт должен быть адаптирован под смартфоны и планшеты, сейчас не говорит только ленивый. К концу прошлого года доля мобильного трафика в России достигла 62%, и прогнозируется ее рост (в мире в 2020 году до 75%). Согласитесь, игнорировать такой объем трафика становится попросту невозможно. А с запуском Mobile first от Гугл и Владивостока от Яндекса – еще и опасно для позиций сайта в выдаче.

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

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

Немного теории о мобильных сайтах

(можно пропустить и сразу перейти к чек-листу)

Буквально в нескольких словах о 3 типах мобильности:

1. Мобильная версия на поддомене. По сути это отдельный вариант сайта на отдельном поддомене (как правило, m.site.ru).

Пример: Сайт vk.com и его мобильная версия m.vk.com

2. Динамический контент. Адрес для десктопной и мобильной версий одинаковый, но контент в них различается. Обычно в мобильной версии показывают меньше второстепенного контента (слайдеров, рекламы, дополнительных текстов).

Пример: Сайт ozon.ru – на мобильных он загружается так же по адресу ozon.ru, но контент отличается, например, на главной странице нет блока с популярными товарами:

3. Адаптивная верстка. Адрес не меняется, да и контент остается одинаковым. Меняется только внешнее отображение контента – все блоки на сайте как бы «подстраиваются» под ширину того устройства, на котором открыт сайт (меню сворачиваются до «гамбургеров», блоки из нескольких в ряд выстраиваются друг под другом и т.д.).

Пример: Сайт mvideo.ru

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

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

Оптимизация мобильного сайта

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

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

Далее я буду говорить только о тех пунктах, которые относятся к мобильной версии. Итак, приступим:

Чек-лист по оптимизации мобильного сайта

Начнем с технической части:

1. Robots.txt

Проверьте, что в файле robots.txt не закрыт доступ к картинкам, js- и css-файлам для поисковых роботов. По этому вопросу у нас есть отдельная статья, здесь повторяться не буду.

2. Скорость загрузки

Проверьте, что скорость загрузки по PageSpeed Insights не ниже 70 на вкладке «Для мобильных»:

Лучше, конечно, чтобы скорость загрузки была выше 85 (а в идеале, близко к 100), хотя такая ситуация пока достигается редко:

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

3. Тег viewport (для сайтов с адаптивной версткой)

Проверьте, что в коде страниц прописан мета-тег viewport:

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

Если же viewport не указан, то на мобильном будет показана страница как для компьютера, только «втиснутая» в экран мобильника. Работать с ней будет весьма неудобно.

Подробности про viewport смотрите в справке Гугла.

4. HTTP-заголовок Vary (для динамического контента)

Если обе версии вашего сайта (и десктопная, и мобильная) доступны по одному адресу, но сайт выдает разный контент (разный html-код) в зависимости от того, с какого устройства идет запрос, то нужно сообщить поисковым роботам, что на сайте используется динамический контент.


Сделать это можно с помощью HTTP-заголовка Vary со значением User-Agent, выглядит он так:

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710

В таком случае поисковый робот Google для смартфонов будет сканировать именно контент мобильной версии (у Яндекса пока нет отдельного робота для мобильного поиска).

Посмотреть HTTP-заголовки, которые отдает ваш сайт, можно с помощью инструмента Проверка ответа сервера в Яндекс.Вебмастере. Подробнее про Vary так же написано в справке.

5. Переадресация (для мобильной версии на поддомене)

Проверьте, что настроена и работает корректно переадресация с полной версии сайта на мобильную (с site.ru на m.site.ru) при просмотре с мобильных устройств.

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

То есть вот так будет правильно:

https://vk.com/feed — https://m.vk.com/feed
https://avito.ru/irkutsk/transport — https://m.avito.ru/irkutsk/transport

https://vk.com/feed — https://m.vk.com/
https://vk.com/video — https://m.vk.com/apps
https://avito.ru/irkutsk/transport — https://avito.ru/moskva/transport

6. Тег (для мобильной версии на поддомене)

Проверьте, что в коде страниц основного сайта (в блоке ) прописаны теги
с адресами соответствующих страниц мобильного сайта.

Вот пример для страницы https://avito.ru/irkutsk/transport:

Это позволит избежать дублирования контента, ведь иначе поисковые роботы будут воспринимать полную и мобильную версии как два отдельных сайта (т.к. у них разные адреса).

Теперь перейдем к визуальной составляющей:

7. Favicon для мобильных

Сделайте и загрузите на сайт отдельный фавикон для мобильных устройств. В коде сайта он прописывается наряду с обычным favicon.ico в блоке . Рекомендуют делать фавикон в 3-10 разных размерах, например, как на сайте М.Видео:

Но будет вполне достаточно и одного размера (114 на 114 пикселей):

Этот фавикон показывается в Избранном (для некоторых устройств), в Истории просмотров:

И на рабочем столе телефона, если ваш сайт сохранили на главный экран (смотрите 3 иконки во втором ряду):

Обратите внимание на не очень четкий фавикон сайта Пегас Туристик – для него нет отдельного файла, используется обычный favicon.ico.

8. Контент под ширину экрана

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

9. Размер шрифта

Проверьте, что все тексты на сайте удобно читать с мобильных – что нет ни слишком мелкого шрифта, ни слишком крупного:

10. Размер кнопок

Проверьте, что во все интерактивные элементы – элементы, на которые можно кликнуть – легко попасть пальцем (и желательно мужским, а не детским):

11. Расстояние между ссылками

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

12. Картинки меньшего размера (для динамического контента)

Если ваш сайт выдает отдельный html-код при просмотре с мобильного устройства, то можно в нем указать ссылки на уменьшенные копии изображений. Вряд ли на телефоне сильно нужна фотография товара шириной 1400 пикселей, вполне хватит и картинки в 800 пикселей – а это экономия в весе картинки, а следовательно, и в скорости загрузки сайта.

13. Убрать Flash

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

14. Скрыть излишний контент

Помните, что экран мобильного устройства в разы меньше экрана компьютера, поэтому старайтесь по возможности сократить объем контента в мобильной версии. Например, в мобильной версии habrahabr.ru не выводятся превью-картинки к статьям и краткие описания, что позволяет вместить в один экран мобильного 3-4 статьи из списка.

15. Меньше рекламы

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

Полностью отказываться от рекламы я, конечно, не призываю, но сократить число рекламных объявлений вполне возможно. В пример все тот же habrahabr, в полной версии которого в правом блоке штук 7-8 рекламных объявлений, а в мобильной – всего одно.

16. Не использовать pop-up окна

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

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

И напоследок об удобстве для пользователя (UX):

17. Удобная навигация

Проверьте, что все необходимые пункты меню доступны в мобильной версии (включая выпадающие подменю). И не забудьте про «хлебные крошки» – они помогут посетителю понять, в каком разделе сайта он находится.

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

А здесь все хорошо, подменю открываются (вплоть до третьего уровня вложенности), хлебные крошки есть:

18. Ссылки с номеров телефонов

Поставьте ссылки с номеров телефонов для быстрого набора их с мобильных устройств. Делается это так:

После этого пользователь просто кликает по номеру телефона на вашем сайте и сразу же переходит к звонку:

19. Учет местоположения

На многих мобильных устройствах включена передача геоданных (информации о местоположении устройства).

Вы можете использовать эту информацию на своем мобильном сайте, например, при заполнении адреса доставки или при поиске объектов неподалеку, как это сделано на сайте booking.com:

20. Ссылка «Перейти на полную версию сайта» (для динамического контента, для мобильной версии на поддомене)

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

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

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

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

Продублирую еще раз ссылку на чек-лист по оптимизации мобильного сайта в pdf. Чек-лист для оптимизации десктопной версии есть тут.

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

Адаптивный дизайн или мобильная версия – делаем осознанный выбор

30.10.2020 Время прочтения: 6 минут

В чем разница между адаптивным дизайном и мобильной версией?

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

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

Вот, например, соцсеть «ВКонтакте». Так она открывается с десктопа:


И вот так – с мобильного:

Мобильная версия находится на поддомене – m.vk.com, поэтому ее мы видим урезанной. Это не копия декстопной версии, но и кардинальной разницы между ними нет.

Адаптивный дизайн – это масштабируемый и/или перестраиваемый основной сайт. Веб-ресурс адаптируется под размеры экрана без переноса на отдельный адрес. Этот тот же самый контент без сокращений, что и на основном ресурсе, просто сверстанный в другом порядке.

Возьмем для примера образовательный онлайн-проект «Арзамас». Вот он с десктопа:

А вот – с мобильного:

И там, и там – на одном адресе одно и то же содержимое, но показано по-разному в зависимости от устройства.

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

  • Обычно нет избытка функций, поэтому вносить изменения проще.
  • Пользователю удобно просматривать страницы, он не натыкается на лишнее.
  • Сайт может загружаться быстрее, поскольку не перегружен данными.
  • Пользователь всегда может перейти на основную версию, если мобильная ему неудобна.
  • Несложно реализовать.
  • Не надо создавать новые URL.
  • Не надо использовать редиректы.
  • Его любят поисковики (особенно Google).
  • Из-за нескольких адресов и одного контента поисковая система может наложить санкции за дублированный контент.
  • Пользователю надо запоминать еще один адрес.
  • Приходится выбирать и ограничивать контент и возможности, которые на одной версии будут доступны, а на другой – нет.
  • Сложно определиться, как именно адаптировать, так как разные пользователи решают разные задачи.
  • Сайт может загружаться медленнее, поскольку имеет тот же вес, что и для десктопа.
  • Если пользователю неудобно, он не может просто переключиться на версию «как на десктопе», как в случае с мобильной версией.

Что лучше для SEO – адаптив или мобильная версия?

Если проводится оптимизация сайта для Google, то тут без вариантов – в компании настойчиво рекомендуют адаптивный дизайн. Среди аргументов много важных для поискового продвижения факторов:

  • пользователям проще расшаривать контент, если он находится на одном URL;
  • алгоритмы Google видят одну страницу, а не разные ее версии;
  • уменьшается вероятность типичных для мобильных сайтов ошибок;
  • возможны проблемы с загрузкой из-за редиректа и агентов пользователя;
  • Googlebot быстрее и исправнее сканирует страницы с адаптивной версткой.

Яндекс утверждает, что разницы нет: «[Формула ранжирования сайтов по оптимизированности для смартфонов] «Владивосток» учитывает любые способы оптимизации сайта для мобильных – и мобильную версию с отдельным URL, и адаптивный дизайн, и динамический показ. У алгоритма нет каких-то особых предпочтений, поэтому решение, каким образом оптимизировать веб-сайт и веб-страницу для мобильных, мы оставляем целиком на усмотрение веб-мастеров».

SEO-специалисты нашей компании согласны с Google: для поискового продвижения лучше адаптив, потому что нет дублирования и урезания контента, портал проще и быстрее администрировать. К тому же, как правило, это проще (а значит быстрее) в исполнении и дешевле для клиента.

Проверка адаптивности сайта на разных устройствах: сервисы поисковиков

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

  • Проверка оптимизации для мобильных и WebPageTest от Google.
  • Проверка мобильных страниц в Яндекс.Вебмастере.

Для проверки адаптивности сайтов сервисы используют примерно один и тот же интерфейс: в строку адреса вводится URL главной страницы, алгоритм оценивает «мобильную пригодность» и выводит результат. Но, конечно, у каждой поисковой системы свои роботы и аналитические параметры, поэтому логичнее выбирать сервис по поисковику, в котором идет продвижение: продвигаетесь в Google, значит, и проверять сайт на адаптивность в Google; оптимизируетесь для Яндекса – смотрите данные в Вебмастере.

Сторонние сервисы

Как еще можно проверить сайт на адаптивность? С помощью различных сторонних сервисов:

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

На что обращать внимание?

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

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

  • Кнопки с действием («Купить», «Оформить заказ», «Зарегистрироваться») должны быть яркими, заметными и достаточно крупными.
  • Весь контент должен соответствовать размеру экрана, чтобы не было горизонтальной прокрутки.
  • Тексты должны быть опубликованы крупным шрифтом.
  • Интерактивные элементы должны располагаться так, чтобы пользователь мог кликать на один, не попадая на другие.
  • Не должно быть форматов, которые с мобильного работают некорректно или не работают совсем.

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

Инструмент проверки адаптивности сайта Яндекс.Вебмастера сообщает об имеющихся проблемах и предлагает ознакомиться с информацией о том, как не надо делать:

Если проверять адаптивность сайта с помощью сервиса Google, то на неоптимизированный веб-ресурс он будет ругаться:

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

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

Также анализируйте данные Вебвизора и карты кликов в Яндекс.Метрике – это поможет выявить возможные недостатки дизайна.

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

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

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

Быстрая навигация по статье:

Если у вас уже есть дружественный с мобильными устройствами сайт, либо вы планируете им обзавестись, данная подборка точно поможет вам. Сегодня я решил собрать для вас лучшие инструменты для тестирования сайтов на мобильных устройствах, вроде iPhone, iPad, и Android, без необходимости использовать физические устройства. Эти инструменты помогут вам протестировать функционал и адаптивность ваших сайтов на различных мобильных платормах.

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

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

Как проверить мобильную версию сайта? Способы тестирования мобильных сайтов

Разработка мобильной версии сайта — это не только возможная прихоть разработчиков, дополнительная статья расходов (или заработка, если говорить о подрядчиках) и проявление заботы о посетителях ресурса. Согласно последним заявлениям представителей корпорации Google, сайты, не отвечающие требованиям адаптивного дизайна, будут пессимизированы в поиске, осуществляемом с мобильных устройств. Отечественная поисковая система Яндекс также выпустила рекомендации «Как важно быть мобильным» и заверила, что, действуя ради удобства пользователей мобильных устройств, будет маркировать в поисковой выдаче мобильные версии и отдавать предпочтение адаптивным страницам.

Так, разработчикам в обязательном порядке необходимо адаптировать сайты для смартфонов и проверять исправность отображения ресурса. В противном случае в скором времени можно ожидать потерю значительной части трафика, а значит, и потенциальных клиентов, ведь новые алгоритмы работы от Google и «Яндекс» уже действуют. Проверить мобильную версию сайта можно различными способами: изменением размеров окна браузера при переходе в режим разработчика, при помощи эмуляторов мобильных устройств или веб-сервисов.

Дружелюбность сайта мобильным устройствам

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

  • отсутствие анимации, «тяжелого» дизайна и картинок;
  • скорость загрузки ресурса (должна быть минимальной);
  • отсутствие необходимости горизонтальной прокрутки;
  • отсутствие Silverlight-плагинов и Java-апплетов;
  • простая навигация по сайта;
  • в коде прописан мета-тег viewport.

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

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

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

Изменение размеров окна браузера

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

Переход в режим разработчика в браузере

Более оптимальный способ проверить мобильную версию сайта (Google или «Яндекс», как впрочем и другие поисковые системы выделяют адаптивность в списке важнейших факторов, влияющих на ранжирование) — это перейти в режим разработчика в браузере. Способ работает подобным образом с несколькими браузерами:

  • Mozilla: перейти в режим разработчика можно, выбрав опцию «Адаптивный дизайн» в меню «Разработка»; нажав комбинацию Ctrl + Shift + M; кликнув по кнопке «Режим адаптивного дизайна» на панели инструментов веб-разработчика;
  • Chrome: переход в мобильный режим осуществляется нажатием функциональной клавиши F12, затем следует выбрать значок мобильной версии (смартфон в левом верхнем углу появившегося окна).

В Opera переход в режим разработчика для проверки мобильной версии осуществляется нажатием комбинации Ctrl+Shift+i, но есть и другой способ. Специальная версия браузера — Opera Mobile Classic Emulator — позволяет разносторонне оценить мобильный дизайн. Версии программы существуют для основных операционных систем.

Эмуляторы мобильных устройств: Android Studio и Apple Xcode

Проверить мобильную версию сайта («Яндекс» и Google) можно при помощи эмуляторов мобильных устройств, которыми для Android и Apple являются соответственно Android Studio или Apple Xcode.

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

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

Веб-сервисы проверки мобильного дизайна

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

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

Другие ресурсы, позволяющие проверить мобильную версию сайта, дополнительно оценивают адаптивность, а не только показывают, как выглядела бы площадка на различных устройствах. Самые авторитетные сервисы: Google Mobile Friendly и «Яндекс ВебМастер» (проверка веб-страниц). Оценивают оптимизацию сайта для мобильных устройств также средство проверки Bing или, например, Mobile Checker от W3C.

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

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

Топ-пост этого месяца:  Мультилендинг что это такое и как его сделать, примеры
Добавить комментарий