Адаптивный и мобильный дизайн с css3 media queries

Возможные ошибки

В отчете «Удобство просмотра на мобильных устройствах» могут быть указаны следующие ошибки:

Используются неподдерживаемые плагины

На странице содержатся плагины, несовместимые с большинством мобильных браузеров, например плагины Flash. Рекомендуем реализовать на странице современные технологии с широкой поддержкой, такие как HTML5. Подробнее о рекомендациях для анимации веб-страниц…

Значение метатега viewport не задано

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

В метатеге viewport должно быть значение device-width

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

Контент шире экрана

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

Слишком мелкий шрифт

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

Интерактивные элементы расположены слишком близко

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

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

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

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

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

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

1. Разработка специального приложения.
2. Создание полной мобильной версии сайта.
3. Адаптивный дизайн.
4. Работа с приложением «Мои сайты» от Ucoz.

Разберем каждый пункт. Выделим плюсы и минусы. А они есть у каждого. Начнем разбор с простого.

1. Создание мобильного приложения.

Предположим, вы создали сайт, где даете прогноз погоды для разных стран. Человеку будет удобнее просматривать сводки погоды с телефона. Ведь он всегда под рукой, приложение может работать без Интернета. Достаточно будет зайти в приложение и быстро узнать интересующие его показатели. Если у вас есть навыки в программирования, то можете смело пробовать создание приложения самостоятельно. В Интернете много удобных конструкторов, которые помогут вам с этой задач. Все бы хорошо, но «кусается» стоимость разработки. Самое простое приложение обойдется вам в 3000 долларов, если будете заказывать у профессиональных разработчиков. Также бывают трудности со сбором статистики. Если хотите создать свое приложение, но не обладаете особыми знаниями и хотите уложиться в небольшую сумму, попробуйсте обратиться на биржи фриланса.

2. Создание мобильной версии сайта.

Что значит создание мобильной версии сайта? Вам придется создать отдельный сайт или PDA версию шаблона, подстраивающиеся под мобильные устройства

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

Для улучшения показателей загрузки сайта уменьшите картинки, удалите ненужные блоки, неиспользуемые участки кода, скрипты. В общем, максимально упростите сайт, оставив только все самое необходимое. Обязательно проработайте юзабилити. Указав номер телефон, по которому с вами могут связаться, человек сразу может позвонить, кликнув на соответствующую кнопку. Отличное преимущество мобильных версий сайта – это их высокое ранжирование в отличие от обычных сайтов. Google дает специальную пометку в выдаче, что ваш сайт поддерживается на мобильных устройствах. В создании мобильной версии нет ничего сложного. Возникли трудности? Обращайтесь к Интернету. Вставьте в код сайта функцию переадресации на мобильную версию. Таким образом, каждый пользователь мобильных устройств, заходя на ваш сайт, будет перенаправляться на его мобильную версию. Говоришь о плюсах, не забывай минусы. Создавая две версии одного сайт, вы увеличиваете свою работу, ведь придется отдельно обновлять каждый шаблон.

3. Создание адаптивного дизайна.

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

Сайт, конечно, будет красиво отображаться на телефоне, но есть одно «Но», его вес будет таким же, как и у основной версии. А это значит, что скорость загрузки страницы будет ниже. Многим удается упростить дизайн с сохранением его функцинальности и при этом значительно уменьшить вес страниц. Для этого воспользуйтесь рекомендациями от Google PageSpeed Insights.

4. Готовое приложение «Мои сайты» от Ucoz

Самое простое, что вы сможете сделать на этом этапе, это скачать приложение «Мои сайты».

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

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

Использование

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

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

Если нет доступа к странице

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

Инструмент обращается к странице как робот Googlebot, не используя ваши учетные данные. Это означает, что доступ к странице для него можно заблокировать в файле robots.txt.

Если на странице содержатся незагружаемые ресурсы

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

• Если вы подождали достаточно времени, но ресурс не загрузился, попробуйте снова запустить тест. Если проблема не исчезнет, рекомендуем разместить сайт у другого хостинг-провайдера или попробовать найти и устранить неполадки хостинга.
• Если ресурс не найден по указанному адресу (ошибка 404), исправьте URL.
• Если ресурс недоступен без регистрации, проверьте, могут ли его открывать анонимные пользователи (при тестировании имитируется их поведение).
• Если ресурс блокирует роботу Google доступ с помощью файла robots.txt, есть два варианта решения проблемы. Ресурс важен и принадлежит вам? Разблокируйте доступ для робота Google самостоятельно. Ресурс располагается на другом сайте? Обратитесь к владельцу ресурса с просьбой предоставить роботам Google доступ.

Как разблокировать важные ресурсы

Блокировка некоторых ресурсов существенно влияет на распознавание страницы. Например, если заблокировано крупное изображение, то страница, не оптимизированная для просмотра на мобильных устройствах, может быть ошибочно помечена как оптимизированная, а блокировка файла CSS может привести к ошибкам в применении шрифтов. В этом случае блокировка ресурсов может сказаться как на оценке оптимизации для просмотра на мобильных устройствах, как и на возможности просканировать страницу. Убедитесь, что файл robots.txt не блокирует роботу Googlebot доступ к важным ресурсам.

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

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

Using the tool

The Mobile-Friendly test tool is easy to use; simply type in the full URL of the web page that you want to test. Any redirects implemented by the page will be followed by the test. The test typically takes less than a minute to run.

Test results include a screenshot of how the page looks to Google on a mobile device, as well as a list of any mobile usability problems that it finds. Mobile usability problems are issues that can affect a user that visits the page on a mobile (small screen) device, including small font sizes (which are hard to read on a small screen) and use of Flash (which isn’t supported by most mobile devices).

If the page can’t be reached

If for some reason the tool cannot access the page, it will display an error describing the problem. Access problems include network connectivity issues or the site being down.

This tool accesses the page as Googlebot (that is, not using your credentials, but as Google). This means that it can be blocked by a robots.txt file.

If the page has unloadable resources

If a test cannot load all resources used by a page, you will get a warning. Resources are external elements included by the page, such as images, CSS, or script files. This can happen for several reasons:

• The resource wasn’t loadable in a reasonable amount of time. In this case, try running the test again. If it continues to happen, consider hosting the resource somewhere else, or else try to discover and fix the reason for lack of response from the host.
• The resource does not exist in the location listed (404 error). Fix the resource URL.
• The resource is inaccessible to non-logged-in users. The test accesses the page as an anonymous user; ensure that all resources are accessible to anonymous users.
• The resource is blocked to Googlebot by a robots.txt file. If the resource is important (see below), if it is on your own site, you might want to unblock the resource to Googlebot; if it is on another site, you might want to contact the site’s webmaster and ask to have it unblocked.

Unblocking important resources

If a blocked resource is important, it could have a big effect on how Google understands the page. For example, a blocked large image could make a page appear to be mobile-friendly when it is not, or a blocked CSS file could result in incorrect font styles being applied (for example, too small for a device). This affects both the mobile usability score and Google’s ability to crawl your page. You should make sure that important resources are not blocked to Googlebot by robots.txt and are generally accessible.

Flaky test results/Page loading issues

If you have unloadable resources or other page loading issues, you might see slightly different results every time you run the test. This is because the set of resources that were loaded can vary during each test run. If your page rendering changes each time you run the test, and you have not changed anything, check for a «page loading issues» warning; if present, click for more information to see what might have happened to prevent the page from being rendered consistently and correctly.

Приоритизация и устранение неполадок

1. По умолчанию проблемы упорядочены по сочетанию ряда факторов (статус решения проблемы и ). Рекомендуем устранять их именно в этом порядке. Советуем сначала сосредоточиться на проблемах, которые встречаются на нескольких страницах (например, шаблонах с ошибками), а затем перейти к единичным неполадкам, относящимся лишь к отдельным страницам.
2. Выясните, не связан ли рост общего числа ошибок с одной проблемой. Для этого поищите в таблице сведения о похожем скачке числа обнаружений какой-либо одной проблемы. Изучите сведения в разделах и ниже.
3. Чтобы открыть окно с информацией об ошибке, нажмите на нужную строку в таблице.
   1. В окне с информацией об ошибках приведены примеры затронутых страниц. Из-за ограничения в 1000 строк там могут быть перечислены не все подобные страницы. Возможно отсутствие данных по недавним случаям обнаружения той или иной ошибки.
   2. Если выявлена ошибка синтаксиса, вы можете получить официальные сведения о правильном синтаксисе, нажав Подробнее.

   3. Выберите определенный URL в таблице, чтобы открыть панель, на которой доступны следующие инструменты и данные:

      – сведения о количестве проблем;
      – ссылка на инструмент проверки URL, позволяющий получить информацию о проиндексированной роботами Google версии выбранной страницы;
      – ссылка Проверить на сайте, при нажатии на которую выполняется анализ оптимизации страницы для мобильных устройств, осуществляемый с помощью специального инструмента.
      Иногда в отчетах содержатся данные по ошибке, которая уже устранена на странице. Это связано с тем, что ее сканирование ещё не выполнялось. В таком случае после устранения всех случаев возникновения неполадки следует выполнить проверку.

4. Устраните все случаи появления проблемы на сайте и убедитесь, что она больше не возникает.
5. Вернитесь к странице со сведениями об ошибке и нажмите кнопку «Выполнить проверку и обновление данных в Google». Для проверки может потребоваться некоторое время. Узнайте, .
6. Устраните все остальные неполадки.

Как отправить сведения об ошибке другим пользователям

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

Как экспортировать данные

Данные из некоторых отчетов можно экспортировать, нажав кнопку скачивания . Экспортируются данные, которые представлены как на диаграммах, так и в таблицах. Значения, отмеченные в отчете символами «~» и «-» (недоступно/не является числом), в скачанном файле будут заменены на нули.

Резкий рост числа ошибок

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

1. Заметив резкий рост числа ошибок, проверьте, не снизилось ли на аналогичную величину количество элементов с другим статусом.
2. Если подобное снижение будет найдено, проверьте, относятся ли все страницы к одним и тем же URL.
3. Если статус URL менялся, определите, какие внесенные вами изменения к этому привели.

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

Срок актуальности проблемы

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

Датой выявления проблемы считается момент, когда она первый раз была зарегистрирована в течение срока актуальности. Эта дата неизменна. Далее Search Console действует по следующему алгоритму:

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

Устройство для чтения электронных книг (E-Book Readers)

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

Электронные книги подразделяются на две категории по технологии отображения цифровой информации:

E-Paper: Электронная бумага — этот тип дисплея может отображать только чёрный и белый цвета. Такой дисплей фактически неотличим от обычной страницы в книге. В отличие от ЖК-дисплея, нет подсветки так, текст остаётся читаемым даже на открытом воздухе при ярком солнце. Многие люди считают, что тип дисплея «электронная бумага», более приятный для чтения, так как от него меньше напряжены глаза. Однако, такой тип дисплея, не может быть использован для видео или других приложений.

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

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

Сервис Responsinator

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

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

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

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

1. Дизайн – опции для настройки внешнего вида сайта в виде подпунктов:

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

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

Самое интересное в том, что вы можете добавить виджеты – различные типы контента и функциональности на страницу. Все они разделены на 3 категории: бизнес, дизайн, социальные. Всего здесь 40 виджетов. Среди них: обратный звонок, меню ресторана, галерея, 2 колонки, карта, купон, список, табы, код HTML, кнопка, абзац (текст), блоки лайков и «поделиться», RSS.

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

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

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

Также вы сможете настроить SEO-параметры мобильной версии отдельно от основной: добавить аналитику от Google, заполнить мета-теги, включить оповещения о сохранении файлов cookies, добавить свой код в

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

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

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

Важно! Обращу ваше внимание, что большинство предлагаемых сервисов проверяют НЕ только мобильную версию сайта (mobile), но и его адаптивность (responsive). То есть выполняется проверка на общую адаптивность сайта для мобильных устройств

Сервис №1: Проверка мобильных версий от Google Search Console

search.google.com/test/mobile-friendly?hl=ru

Работать с данным сервисом можно без аккаунта Google. Пояснять работу сервиса, наверное, не стоило, но всё же. В поле проверки вписываете URL своего сайта и нажимаете кнопку «проверить».

Адаптация сайта будет проинформированная зеленой информацией. Нарушение адаптации будет сообщено красным цветом.

Сервис №2: Проверка мобильных страниц Яндекс.Вебмастер

webmaster.yandex.ru/site/tools/mobile-friendly/

Работать с этим сервисом без Яндекс аккаунта и добавление сайта в Яндекс.Вебмастер НЕ получится. Однако, если вы всё перечисленное сделаете, проверка мобильных страниц станет лишь одним из инструментов Яндекс.Вебмастер.

Для проверки вам нужна вкладка сервиса «Инструменты>>> Проверка мобильных страниц. Далее выбираете свой сайт в списке сайтов и проверяете его мобильность.

Результаты проверки будут расписаны по шести позициям. Общий результат мобильности вверху списка проверок. Информация «Страница оптимизирована для мобильных устройств», говорит, что на вашем сайте с оптимизацией под мобильные всё хорошо.

Эмулятор мобильного телефона COWEMO

http://www.mobilephoneemulator.com/

Один из сервисов компании COWEMO позволяет создать эмуляцию просмотра сайта на одном из 13-ти устройствах.

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

Особенности:

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

Responsinator

www.responsinator.com

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

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

Screenfly

quirktools.com/screenfly

Screenfly позволяет просматривать ваш сайт на различных экранах устройств и разрешениях. Введите URL-адрес и нажмите GO.

Особенности

• Можно посмотреть свой сайт не только на мобильных устройствах;
• Сервис прост в работе и практически не имеет настроек;
• Есть эмуляция прокси-сервера;
• Есть возможность регистрации и получения личного кабинета для разработчиков;
• На quirktools.com есть другие инструменты для разработчиков сайта.

Responsivepx

responsivepx.com

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

Responsivedesign

ami.responsivedesign.is

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

Mobile-usability errors

The Mobile-Friendly Test tool can identify the following usability errors:

List of errors

Uses incompatible plugins

The page includes plugins, such as Flash, that are not supported by most mobile browsers We recommend redesigning your page using modern, broadly-supported web technologies, such as HTML5. Read more about web animation guidelines.

Viewport not set

The page does not define a property, which tells browsers how to adjust the page’s dimension and scaling to suit the screen size. Because visitors to your site use a variety of devices with varying screen sizes—from large desktop monitors, to tablets and small smartphones—your pages should specify a viewport using the tag. Learn more in Responsive Web Design Basics.

Viewport not set to «device-width»

The page defines a fixed-width  property, which means that it can’t adjust for different screen sizes. To fix this error, adopt a responsive design for your site’s pages, and set the viewport to match the device’s width and scale accordingly. Read how to correctly Set the Viewport.

Content wider than screen

Horizontal scrolling is necessary to see words and images on the page. This happens when pages use absolute values in CSS declarations, or use images designed to look best at a specific browser width (such as 980px). To fix this error, make sure the pages use relative width and position values for CSS elements, and make sure images can scale as well. Read more in Size Content to Viewport.

Text too small to read

The font size for the page is too small to be legible and would require mobile visitors to “pinch to zoom” in order to read. After specifying a viewport for your web pages, set your font sizes to scale properly within the viewport. Read more about font size best practices in Use Legible Font Sizes.

Clickable elements too close together

Touch elements, such as buttons and navigational links, are so close to each other that a mobile user cannot easily tap a desired element with their finger without also tapping a neighboring element. To fix these errors, make sure to correctly size and space buttons and navigational links to be suitable for your mobile visitors. Read more in Size Tap Targets Appropriately.