Содержание

Адаптивный сайт — как не потерять мобильных клиентов? :: Айкон

Согласно нашим аналитическим данным, более 35%, а в некоторых нишах и более 50% пользователей сайтов посещают их с мобильных устройств — смартфонов и планшетов. Когда пользователи мобильных устройств открывают обычную (desktop) версию сайта, многие элементы для них могут быть неудобными.

 

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

  • Необходимость масштабирования (pinch-to-zoom) и прокрутки сайта

  • Неудобства в работе с управляющими элементами (поля и кнопки)

  • Сложности в целостном восприятии сайта, необходимо постоянно менять область просмотра и прокручивать сайт “во все стороны”

 

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

 

Отношение поисковых систем к адаптивным сайтам

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

 

Как проверить, есть ли у сайта адаптивная версия?

Многие сайты, которые были разработаны в 2016 году, а особенно те, которые сделаны на базе готовых решений WordPress или 1С-Битрикс, уже имеют адаптивную версию сайта и отлично подходят для просмотра на мобильных устройствах.

 

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

 

Проверка сайта paeserussia.com при помощи сервиса Google:

 

 

Адаптивная или мобильная версия?

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

 

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

 

Пример адаптивной версии сайта:

 

  

 

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

 

Процесс разработки адаптивной версии сайта

  1. Разработка макетов дизайна

Для того, чтобы разработать адаптивную версию сайта, в первую очередь необходимо разработать макеты адаптивного дизайна для каждого из выбранных разрешений. Как правило, для адаптивной версии сайта используются два дополнительных разрешения — это 768 пикселей по ширине (для планшетов) и 320 пикселей по ширине (для смартфонов). При необходимости, до этапа дизайна прорисовываются адаптивные прототипы, которые позволяют понять интерфейс адаптивной версии сайта до этапа дизайна.

 

 

  1. Адаптивная верстка сайта

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

 

Что важно для разработки адаптивной версии сайта?

  1. Отсутствие горизонтальной прокрутки

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

 

 

  1. Подготовка изображений

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

 

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

 

 

Для обычного 5-дюймового смартфона с разрешением 1280х720, данное изображение будет отображаться на площади уже около 600х900 пикселей в зависимости от макета дизайна мобильной версии. Это значит, что данное изображение должно быть загружено в разрешении 600х900 пикселей, либо в большем разрешении, учитывая другие прочие типы дисплеев.

 

  1. Мобильное меню

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

 

 

  1. Длина сайта

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

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

 

 

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

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

 

 

  1. Элементы интерфейса в мобильной версии сайта

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

 

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

 

 

  1. Скажите “нет” технологии Flash

Технология Flash постепенно исчезает из веб-индустрии, и множество мобильных устройств перестают ее поддерживать. Если говорить про обычную версию сайта, то на ней поддержка Adobe Flash тоже постепенно прекращается, например, браузером Google Chrome планируется завершение поддержки данной технологии в 2017 году.

 

 

  1. Технические параметры, необходимые для адаптивного сайта

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

Подведем итоги

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

 

 

 

Читайте далее: Актуальность SEO-продвижения

Проверяем адаптивную версию сайта в один клик без Google DevTools — Дизайн на vc.ru

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

{«id»:194440,»type»:»num»,»link»:»https:\/\/vc.ru\/design\/194440-proveryaem-adaptivnuyu-versiyu-sayta-v-odin-klik-bez-google-devtools»,»gtm»:»»,»prevCount»:null,»count»:66}

{«id»:194440,»type»:1,»typeStr»:»content»,»showTitle»:false,»initialState»:{«isActive»:false},»gtm»:»»}

{«id»:194440,»gtm»:null}

9408 просмотров

Не обязательно иметь много девайсов или использовать Google DevTools для того, чтобы проверить дизайн. Достаточно установить расширение Responsive Viewer, которое существенно упрощает проверку адаптива: это удобно как для заказчиков, так и для дизайнеров.

Так чем же он лучше обычного Google DevTools?

1. Параллельный скроллинг макетов

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

Чтобы проверить сайт в Responsive Viewer, мне понадобилось около 10 секунд

2. Сайт сразу во всех нужных расширениях на одном холсте

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

3. В один клик могу скрыть интерфейс расширения и смотреть макеты во весь экран

И ничего лишнего.

{ «osnovaUnitId»: null, «url»: «https://booster.osnova.io/a/relevant?site=vc&v=2», «place»: «between_entry_blocks», «site»: «vc», «settings»: {«modes»:{«externalLink»:{«buttonLabels»:[«\u0423\u0437\u043d\u0430\u0442\u044c»,»\u0427\u0438\u0442\u0430\u0442\u044c»,»\u041d\u0430\u0447\u0430\u0442\u044c»,»\u0417\u0430\u043a\u0430\u0437\u0430\u0442\u044c»,»\u041a\u0443\u043f\u0438\u0442\u044c»,»\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c»,»\u0421\u043a\u0430\u0447\u0430\u0442\u044c»,»\u041f\u0435\u0440\u0435\u0439\u0442\u0438″]}},»deviceList»:{«desktop»:»\u0414\u0435\u0441\u043a\u0442\u043e\u043f»,»smartphone»:»\u0421\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u044b»,»tablet»:»\u041f\u043b\u0430\u043d\u0448\u0435\u0442\u044b»}} }

Ок, а как пользоваться?

  1. Переходите на свой сайт и кликаете на иконку Responsive Viewer в строке расширений
  2. Добавляете устройства для просмотра: я использую 3 устройства для проверки: iPhone, iPad, MacBook
  3. Кайфуете от удобства и скорости 👌

А как вы проверяете адаптивную версию? Напишите в комментариях.

I love adaptive — сервис для тестирования адаптивной версии сайта — Трибуна на vc.ru

Меня зовут Павел, я со-основатель агентства 100UP. Мы занимаемся дизайном и разработкой технически сложных веб-проектов (в основном это e-commerce и b2b-порталы, личные кабинеты дилеров, производителей и др.), контекстной и медийной рекламой.

{«id»:228102,»type»:»num»,»link»:»https:\/\/vc.ru\/tribuna\/228102-i-love-adaptive-servis-dlya-testirovaniya-adaptivnoy-versii-sayta»,»gtm»:»»,»prevCount»:null,»count»:0}

{«id»:228102,»type»:1,»typeStr»:»content»,»showTitle»:false,»initialState»:{«isActive»:false},»gtm»:»»}

{«id»:228102,»gtm»:null}

В этой статье мы расскажем вам про бесплатный сервис для тестирования адаптивной версии сайта I love adaptive, который мы разработали.

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

Оглавление

1. Важность адаптивности

2. Когда создавался сервис и зачем?

3. Для кого полезен сервис

4. Цифры и факты о сервисе

5. Возможности сервиса

6. География

7. Дополняющие сервисы

Важность адаптивности

Начнем немного с теории 🙂

Адаптивность сайта в наше время является одним из ключевых параметров, в первую очередь, для развития бизнеса e-commerce. В 2020 году, согласно отчету исследовательской компании Mediascope, интернет с мобильных устройств используют в сутки 65,2% населения России.

График роста аудитории интернета с мобильных устройств

За последние несколько лет число россиян, которые совершают онлайн-покупки стремительно растет. По данным исследования “Яндекс.Маркет” и консалтинговой и аналитической компании Growth from Knowledge, доля тех, кто совершил заказ в онлайн-магазине хотя бы один раз за шесть месяцев, составляла 21% от всех пользователей Рунета в 2015 году, в 2019-м процент вырос до 42%. В Москве доля любителей онлайн-шопинга достигает 60%.

Также, адаптивность играет важную роль в SEO-продвижении. В феврале 2015 г. компания Google заявляет, что наличие адаптивной или мобильной версии положительно сказывается на ранжировании. Ровно через год, в 2016-м, компания Яндекс объявляет то же самое.

Когда создавался сервис и зачем?

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

В июле 2017 года было принято решение запустить сервис для широкого пользования. Сначала сайт был доступен на домене iloveadaptive.ru, но потом решили, что правильным будет сделать проект международным и отказаться от зоны RU. В октябре 2017 года сделали редирект на iloveadaptive.com.

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

Как выглядела первая страница сервиса в 2017 году

Как выглядит главная страница сейчас

Для кого полезен сервис

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

Еще может использоваться:

  • менеджерами проектов — для комплексной или ускоренной проверки верстки, сравнения ее с дизайн-макетом, проверка показателей Google PageSpeed и тд.
  • дизайнерами — с помощью сервиса можно без затруднений проверить совпадают ли отступы между элементами, размер элементов и шрифтов с точностью до пикселя. Простыми словами — проверить pixel perfect.
  • маркетологами — для маркетологов будет полезна возможность сравнить свой сайт с сайтами конкурентов, в разделе “Сравнение сайтов” можно посмотреть как выглядят нескольких сайтов на одном экране. Или проверить помещается ли наиболее важная информация на первый экран смартфона и т.д.
  • владельцами сайтов — в целом проверить как разработчики реализовали адаптивную версию: есть ли адаптив на сайте и как он работает на разных устройствах.

Цифры и факты о сервисе

На текущий момент количество пользователей сервиса варьируется в пределах 600-800 в день:

Посещаемость по данным Яндекс.Метрики за последний год

Согласно графику, последние полгода наблюдается активный рост посещений сервиса, в отдельные периоды число визитов увеличивается по сравнению с предыдущим месяцем на 2 000. В январе 2021 года количество визитов составило 15 176, а уже в феврале — 17 374.

Посещаемость по данным Яндекс.Метрики за все время

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

Посещаемость по данным Яндекс.Метрики за последний месяц

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

Кол-во сайтов, упоминающих наш сервис, по данным Вебмастера

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

{ «osnovaUnitId»: null, «url»: «https://booster.osnova.io/a/relevant?site=vc&v=2», «place»: «between_entry_blocks», «site»: «vc», «settings»: {«modes»:{«externalLink»:{«buttonLabels»:[«\u0423\u0437\u043d\u0430\u0442\u044c»,»\u0427\u0438\u0442\u0430\u0442\u044c»,»\u041d\u0430\u0447\u0430\u0442\u044c»,»\u0417\u0430\u043a\u0430\u0437\u0430\u0442\u044c»,»\u041a\u0443\u043f\u0438\u0442\u044c»,»\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c»,»\u0421\u043a\u0430\u0447\u0430\u0442\u044c»,»\u041f\u0435\u0440\u0435\u0439\u0442\u0438″]}},»deviceList»:{«desktop»:»\u0414\u0435\u0441\u043a\u0442\u043e\u043f»,»smartphone»:»\u0421\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u044b»,»tablet»:»\u041f\u043b\u0430\u043d\u0448\u0435\u0442\u044b»}} }

Возможности сервиса

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

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

Функция просмотра сайта на разных размерах экранов

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

Ручное выставление размера экрана устройства

3. Масштабирование страницы. Позволяет отобразить максимальное кол-во устройств на одном экране или максимально увеличить одно из них.

Отображение функции zoom

4. Отображение iOS-панелей. Возможность вывести панель и посмотреть как происходит смещение элементов на экране. Доступные виды панелей: плавающая, скрытая, фиксированная.

Отображение ios-панелей

5. Изменение ориентации устройства. Иногда полезно посмотреть верстку на горизонтальной ориентации.

6. Настраиваемая высота экранов. Позволяет просмотреть сайт во всю высоту без прокрутки внутри экрана конкретного устройства. Удобно использовать при ускоренной проверке.

Настраиваемая высота экрана

7. Отключение прокрутки. Используется в паре с настраиваемой высотой экрана.

8. Сравнение верстки сайта с макетом дизайна. Эта возможность в первую очередь полезна дизайнерам и верстальщикам, с ее помощью можно проверить pixel perfect.

  • Загрузить макет можно через Drag & Drop или классическую кнопку “Обзор”
  • Сервис определяет размеры макета, тем самым выбирает нужное устройство для тестирования.
  • Выбор устройства из списка.
  • Неограниченное кол-во направляющих для более точного сравнения верстки с макетом
  • Вертикальные направляющие автоматически синхронизируются

Сравнение верстки макета с дизайном

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

Сравнение сайтов

Дополнительные возможности:

  • История. Рядом со строкой ввода адреса сайта, есть кнопка «история», которая позволяет посмотреть ранее тестируемые сайты/страницы. Историю можно редактировать — очистить полностью или выборочно удалить ненужные адреса.

Возможность посмотреть ранее тестируемые сайты

  • W3C validator. В правом верхнем углу располагается валидатор ошибок в html-коде сайта, который отображает результат проверки, а при клике на результаты позволяет перейти сразу к просмотру всех имеющихся ошибок.
  • Google PageSpeed. Позволяет, не покидая сервис “I love adaptive”, проверить скорость загрузки страниц проверяемого сайта.

Google PageSpeed

  • Расширение для Chrome. Часть сайтов могут блокировать отображение своих ресурсов в iframe, для обхода этого ограничения, мы разработали расширение для браузера Google Chrome.

Чтобы использовать расширение, необходимо установить его в браузер Google Chrome, после чего возле адресной строки появится иконка сервиса. Затем в браузере нужно открыть сайт, который вы планируете протестировать с помощью сервиса. При клике на иконку расширения, пользователя “перекинет” на страницу I love adaptive, где будет отображен сайт, который вы хотите проверить.

При блокировки показа ресурса в iframe показывается заглушка

Количество пользователей расширения для Google Chrome только растет, на текущий момент их уже более 7000. Пользователи периодически оставляют комментарии — пожелания и положительные отзывы об опыте использования расширения. Обратную связь мы получаем как от русскоязычных, так и от англоязычных пользователей. Оценка сервиса в интернет-магазине Chrome — 5 звезд.

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

География

I love adaptive доступен в двух языковых версиях: на русском и английском языках. Таким образом, обеспечивается возможность использования сервисом не только в России и странах ближнего зарубежья, где высок процент русскоговорящих пользователей, таких как Украина, Беларусь и Казахстан, но и в других странах англоязычными пользователями, таких как: США, Индия, Филиппины, Германия и другие. Процент посещений сервиса пользователями из разных стран за последний год можно увидеть ниже.

Страны и процент визитов на сайт iloveadaptive.com за последний год.

Дополняющие сервисы

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

  • LambdaTest — платный облачный сервис для кросс-браузерного тестирования, который позволяет разработчикам и тестировщикам выполнять кросс-браузерное тестирование в более чем 2000 реальных мобильных и настольных браузерах на реальных устройствах. Сервис позволяет автоматизировать тестирование, автоматизировать создание скриншотов страниц для выполнения визуального кроссбраузерного тестирования, дает возможность проверить скорость отклика сайта или веб-приложения на популярных мобильных устройствах разного разрешения экрана. Удобно, что можно проверить верстку одновременно на двух устройствах, не переключаясь с одного на другое.
  • BrowserStack — полный аналог LambdaTest (возможности плюс-минус одни и те же), но чуть дороже.

Надеемся, что наш сервис окажется полезен и вам! Будем рады любой обратной связи. Отдельное спасибо за репост 😉

По всем вопросам можно писать сюда facebook.com/geonim или на почту [email protected]

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

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

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

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

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

1. В чём ключевое отличие респонсив от адаптивного дизайна?

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

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

2. Насколько гибкий каждый из дизайнов?

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

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

3. Какая из технологий обеспечит более высокую скорость?

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

Более безопасным подходом можно назвать респонсив дизайн, ведь он не зависит размера экрана и других особенностей. На наш взгляд, выбирать надо тот шаблон, который лучше подходит для конкретного проекта (в т.ч. комбинировать). Даже для больших разрешений бывают случаи, когда растянуть элементы — недостаточно, а лучше сделать отдельный дизайн, если позволяет бюджет. Отталкивайтесь от ситуации и статистики: иногда на сайте не обойтись без трех видов шаблонов, а иногда достаточно и одного. Если вы еще не пользуетесь этими подходами, то теряете возможность привлечь больше пользователей, предоставив им удобный сервис, и, соответственно, теряете потенциальных клиентов.

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

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

Общие рекомендации от Яндекс

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

  • Ресурсы должны быть доступны для индексирующего робота Яндекса: Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4 (compatible; YandexBot/3.0; +http://yandex.com/bots). Разрешите в файле robots.txt сканирование CSS, JavaScript, от которых зависит отображение сайта на мобильных устройствах. Иначе страницы сайта могут некорректно отображаться в результатах поиска.
  • Страницы сайта должны отправлять серверу ответ с HTTP-кодом 200 OK. Вы можете проверить ответ сервера в Яндекс.Вебмастере.
  • Не используйте технологии Flash, Silverlight или Applet на страницах, ориентированных на мобильных пользователей — эти технологии могут не поддерживаться на мобильных устройствах.

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

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

Проверить на сколько хорошо сайт адаптирован под мобильные устройства можно в разделе Инструменты → Проверка мобильных страниц Яндекс.Вебмастера.

7 сервисов для проверки сайта на мобильность

Февраль 2015 г. — Google объявила о том, что преимущество в мобильной поисковой выдаче будут иметь сайты, которые имеют адаптивную версию. Февраль 2016 г. — Яндекс сделал аналогичное заявление.

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

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

  1. Удобно читаемый контент (читается без увеличения), крупные поля форм и кнопки.
  2. Отсутствие «тяжелых» картинок, Flash — элементов и излишней анимации.
  3. Отсутствие Java-апплетов и Silverlight-плагинов.
  4. Отсутствие горизонтальной полосы прокрутки.
  5. Минимальная скорость загрузки сайта.
  6. Максимально простая навигация.
  7. Прописан мета-тег viewport.

Сервисы для проверки сайта на «мобильность»

1. Google Инструменты для веб-мастеров

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

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

2. Яндекс Вебмастер — инструмент «проверка мобильных страниц»

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

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

в разделе Инструменты → Проверка мобильных страниц Яндекс.Вебмастера.

3. Mobile Checker от W3C

Самый «долгий» из всех сервисов.

https://validator.w3.org/

4. Responsinator

В отличии от остальных не даёт каких-либо оценок, но отображает как выглядит ваш сайт на 6 различных устройствах в двух ориентациях на IOS и Android, что очень круто.

http://www.responsinator.com/

5. Adaptivator — самый лучший на наш взгляд!!!

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

http://adaptivator.ru/

6. iloveadaptive.ru

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

www.iloveadaptive.ru

7. PageSpeed Insights

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

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

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

8. WebPage Test

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

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

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

9. Adobe Edge Inspect

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

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

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

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

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

10. BrowserStack

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

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

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

8 проверенных сервисов проверки адаптивной верстки сайта

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

  1. Проверка на мобильность в вебмастере Яндекса
  2. Проверка на мобильность в вебмастере Гугла (https://www.google.com/webmasters/tools/mobile-usability)
  3. https://testmysite.withgoogle.com/intl/ru-ru — в отличие от предыдущего инструмента тут можно проверить конкретную страничку сайта
  4. https://www.bing.com/webmaster/tools/mobile-friendliness — проверялка от Бинга, на всякий случай лучше проверить сайт и тут
  5. http://www.responsinator.com/ — этот сервис показывает как выглядит сайт на разных разрешениях, очень удобно использовать для отладки кросплатформенной верстки
  6. http://mattkersley.com/responsive/ — что-то типа предыдущего инструмента
  7. Responsive http://symby.ru/adaptest/

Веб-студия WebTend г. Екатеринбург делает сайты и интернет-магазины исключительно со 100% responsive, средствами css (один сайт для всех устройств — Responsive Web Design).

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

Есть проблемы с ранжированием, проект не растет, хотите проверить работу своих специалистов по продвижению? Закажите профессиональный аудит в Семантике

Подпишись на рассылку!

Согласно исследованиям statista.com процент траффика с мобильных устройств в мире за первый квартал 2021 года составил 54,8%. Количество пользователей мобильных телефонов растет с каждым днем.

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

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

Google Mobile-Friendly Test

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

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

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

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

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

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

Bing Webmaster Tools

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

Набором инструментов сервис очень похож на Google Mobile-Friendly Test, но структурирован по другому, отсутствует результат анализа HTML и HTTP.

Mobile Checker от W3C

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

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

Window Resizer

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

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

Adaptivator

По итогу проверки тестируемому ресурсу будет выставлена оценка адаптивности по 100-балльной шкале и даны инструкции по устранению ошибок.

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

Responsinator

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

При анализе страниц через плагин браузера вам доступны:

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

Так выглядит плагин для Гугл в действии.

Screenfly

Есть одноименный сервис – screenfly.org. В нем доступно тестирование на старых моделях телефона: Motorola RAZR V3m и BlackBerry 8300. Также можно выбрать любое другое разрешение и устройство. Есть возможность включать и отключать скролл.

Motorola RAZR V3m 176 x 220 пикселей

 

BlackBerry 8300 320 x 240 пикселей

I Love Adaptive

I Love Adaptive бесплатный в пользовании. Дает доступ к большому выбору настроек:

  • Все ОС и актуальные устройства – более 30 различных моделей телефонов, планшетов и компьютеров.
  • Фильтрация по типу устройств – выбирайте то, что вам актуальнее всего, компьютеры, планшеты, смартфоны.
  • Настраиваемый размер разрешения – вводите свои значения.
  • Масштабирование – возможность отобразить на вашем экране сразу несколько тестируемых разрешений.
  • Поворот экрана – книжная, альбомная ориентация.
  • Отображение панелей iOS – возможность вывести панель и посмотреть как происходит смещение элементов на экране. Доступные виды панелей – плавающая, скрытая, фиксированная.
  • Настраиваемая высота экрана – разрешает просматривать сайт полностью без скролла внутри экрана мобильного устройства.
  • Отключение прокрутки экрана – удобно использовать в сочетании с настройкой нестандартной высоты экрана.
  • Сравнение сайта с макетом – помогает выявить недочеты, совершенные в верстке или дизайне. С ее помощью можно проверить pixel perfect.
  • Проверка валидности HTML-кода – поможет выявить существующие ошибки.
  • Сохранение истории – все ранее тестируемые ресурсы можно посмотреть по кнопке «история».

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

Browserling

Сервис предлагает богатый выбор ОС (кроме iOS) и браузеров для проведения теста.

Бесплатная проверка оптимизации ограничена тремя минутами и позволяет протестировать ресурсы только на Internet Explorer 11, Windows 7 и при разрешении 1024×768.

Остальные функции доступны при оплате месячного тарифа:

  • Однопользовательский за 19 $ в месяц.
  • Многопользовательский за 29 $ в месяц.

Netpeak Spider и Checker

Компания разрабатывает софты для решения повседневных SEO-задач.

В бесплатном тарифе у вас есть возможность:

  • Сканировать сайты и анализировать 80+ SEO-параметров.
  • Проверять 100+ ошибок внутренней оптимизации.
  • Сканировать до 100 000 URL.
  • Делать до 10 потоков сканирования.
  • Сохранять проекты и делать их резервное копирование.

Для начала работы настройте связь с API и вставьте список URL в таблицу, затем выберите параметр «Is Mobile-Friendly» на боковой панели и нажмите «Пуск». Данные по страницам подтянутся в таблицу согласно формату «True/False».

Mobile SERP Test

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

Mobile SERP Test позволяет проверять до двух портативных устройств одновременно. Бесплатное пользование сервисом доступно до 5 раз в сутки.

Как провести проверку AMP- и турбо-страниц

AMP- и турбо-страницы ранжируются выше других запросов в SERP и загружаются в 15 раз быстрее обычных ресурсов. Поэтому у компаний увеличивается доля лидов, и снижается процент отказов.

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

Через Яндекс

Турбо-страницы Яндекса для быстрой передачи информации используют файлы RSS (формат XML). Проверить корректность работы данных файлов можно через валидатор XML-фидов от Яндекс.Вебмастер.

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

Через Google

AMP-страницы Google являются полноценными HTML страницами. И для проверки их работоспоспособности, используют валидатор от Гугл. Данный сервис позволяет выявить как стандартные ошибки (нет доступа к индексации), так и специфичные, связанные с проблемным контентом.

У Chrome существует плагин для упрощенного теста AMP-страниц. Он сообщит, прошла ли страница проверку – значок расширения отобразится зеленым, или не прошла – отобразится красным. При неудачной проверке нажмите на покрасневший значок расширения и изучите перечень выявленных ошибок.

Подведем итоги

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

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

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

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

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

Что такое мобильная версия сайта и для чего она нужна

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

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

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

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

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

Что такое Mobile First

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

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

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

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

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

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

Аналитика

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

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

Анализ Яндекс.Вебвизора

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

Технический анализ мобильной версии сайта

Скорость загрузки страниц

Скорость загрузки страниц является важным фактором ранжирования в особенности в поисковой системе Google. Поэтому для проверки скорости загрузки страниц мы рекомендуем проверять сайт через сервис PageSpeed Insights.



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


Адаптивность

Есть несколько инструментов, которые помогают проверить сайт на адаптивность, например Search Console или Adaptivator.

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

Анализ наличия ошибок в Google Search Console

Также необходимо проверить панель вебмастера Google Search Console на наличие ошибок при использовании сайта с мобильных устройств.

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


Анализ дизайна и юзабилити

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

На примере ниже представлена страница, на которой ссылка на страницу товара полностью закрыта подсказкой “Как выбрать духовые шкафы”.


AMP и Турбо-Страницы

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

О том, как подключить и настроить Турбо и AMP страницы, можно прочитать в справке Яндекса и Google.

Если на сайте уже присутствуют AMP и Турбо страницы, рекомендуем проверять корректность работы данных страниц в Яндекс.Вебмастере и Google Search Console.

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

Если у сайта есть отдельная мобильная версия, необходимо проверить следующие элементы: На страницах основной версии сайта необходимо разместить тег rel=alternate с указанием альтернативной (мобильной) версии сайта.

Пример тега:

<link rel=»alternate» media=»only screen and (max-width: 640px)» href=»http://m.site.ru/catalog/&quot;&gt;

Тег Canonical

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

Пример тега:

<link rel=»canonical» href=»http://m.site.ru/catalog/&quot;&gt;

Robots.txt

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

Теги Canonical и Alternate, которые были описаны, выше помогут устранить проблемы с возникновением дублей страниц.

XML-карта

Как и на основной версии сайта, рекомендуем добавить для мобильной версии сайта xml-карту сайта со всеми страницами, которые важны для продвижения и должны быть проиндексированы поисковыми системами.

Мета-теги

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

Наличие кнопки «Полная версия сайта»


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

Выводы

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

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

Хотите получать статьи и новости в удобном формате? Подписывайтесь на наш Телеграм-канал

Как оптимизировать сайт для мобильных: 14 правил мобилопригодного сайта

Правила с примерами и пояснениями в удобном чек-листе для работы. Обновленный материал.

По уровню материал близок к основам, поэтому будет полезен начинающим специалистам.

Мобилопригодным считается сайт, на котором пользователю удобно работать с мобильных устройств. Как показывает исследование PwC от 2019 года, 79% россиян покупают онлайн с мобильных.

В 2020 году мобилопригодность — обязательное требование к сайтам, оптимизируете вы ресурс для Яндекса или для Google. Учитывать мобилопригодность страниц в ранжировании Яндекс начал с февраля 2015 года, когда ввел алгоритм «Владивосток». Google начал тестировать Mobile-first index в 2016, а до конца 2020 обещает перевести на него все сайты. Этот индекс подразумевает, что независимо от устройства выдача будет мобильной.

По словам представителя Google Джон Мюллера, перевод сайта в Mobile-first index зависит от факторов:

  • способен ли Google просканировать весь контент на страницах ресурса;
  • может ли этот контент отображаться на мобильных устройствах в принципе.

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

Выбор адаптивного шаблона сайта

Для придания сайта мобильной адаптивности используют один из вариантов: мобильную версию, адаптивную или динамическую верстку — RESS (Responsive Design + Server Side).

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

Это отдельный сайт на поддомене. Сервер учитывает user-agent устройства пользователя, определяет, что тот зашел со смартфона, и перенаправляет на версию для мобильного просмотра. К URL-адресу в начало обычно добавляется «m.».

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

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.site.com/page.html">
Мобильная и полная версия на смартфоне

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

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

Адаптивная верстка

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

<meta name="viewport" content="width=device-width, initial-scale=1">.

Если не установить тег, вся десктопная область просмотра уменьшится в масштабе и уместится на экране.

Версия без адаптации и с адаптацией для мобильного

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

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

Почитать по теме:
Тег viewport: как настроить область просмотра в адаптивном дизайне

RESS

Технология адаптирования сайта для мобильного на стороне сервера. В зависимости от типа устройства сервер отправляет пользователю один из вариантов кода HTML и CSS.

Отображение сайта со смартфона

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

Минусы: проблемы с непопулярными моделями гаджетов, реализация дороже и сложнее. Веб-мастера часто выводят и мобильный, и десктопный шаблоны в коде и закрывают ненужную версию «display: none». Это ошибка, из-за которой загрузка станет медленнее, а бот может некорректно отображать сайт.

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

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

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

Скачайте краткий чек-лист на свой на компьютер или скопируйте в Google Docs, чтобы отмечать выполнение в своем файле.

Открыть и скачать чек-лист мобилопригодного сайта от PR-CY.ru

Пункты из чек-листа с пояснениями и примерами:

1. Реализация отображения на мобильных

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

2. Сайт доступен для роботов

Сделать ресурс доступным для индексирующих роботов нужно в файле robots.txt. Разрешите сканирование CSS и JavaScript, от них зависит, будет ли сайт корректно отображаться на мобильных.

3. Ответ 200 ОК

Если сервер отправляет ответ с HTTP-кодом 200 OK, значит со страницей все в порядке: она доступна для просмотра и корректно отображается в выдаче.

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

Проверка внутренних страниц
Почитать по теме:
Что означает код ответа сервера
4. Поддержка всех технологий

Нет Flash-элементов, Java-апплетов и Silverlight-плагинов — эти технологии тормозят загрузку и могут не поддерживаться на мобильных, поэтому рекомендуем отключить их и встраивать контент с помощью HTML5. Тяжелый интерактив нужно облегчить или отказаться от него ради быстрой загрузки.

5. Быстрая загрузка

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

Сколько секунд должен загружаться сайт?
Конкретных лимитов нет, скорость загрузки сайта зависит и от скорости интернета, поэтому у разных пользователей она может несколько различаться. Джон Мюллер из Google в 2016 году называл около 2-3 секунд для ориентира.

Проверить скорость загрузки можно инструментом «Проверка скорости сайта», он посчитает скорость и даст советы по оптимизации.

Почитать по теме:
Как уменьшить вес сайта и ускорить загрузку страниц
Проверка скорости загрузки

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

6. Отдельный фавикон

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

Размеры фавиконов и коды для установки есть в руководстве.
    Иконки сайтов на экране смартфона
7. Только вертикальная прокрутка

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

8. Крупные значки

Сложно попасть пальцем в мелкий значок на экране телефона. Средняя ширина подушечки пальца — около 10 мм, поэтому рекомендуем делать кликабельные элементы крупными и размещать их на расстоянии друг от друга, чтобы избежать ложных нажатий. В рекомендациях по интерфейсу приложений на Android для активных элементов советуют ширину не менее 7 мм или 48 пикселей CSS на сайте.

Крупные элементы на сайте
9. Крупный шрифт

Мелкий шрифт читать неудобно — приходится масштабировать страницу, чтобы не напрягать зрение. Сделайте шрифт крупным, увеличьте высоту строки пропорционально размеру шрифта — около 140% от кегля текста. Для просмотра с устройств на iOS для обычного текста рекомендуют размер 17pt, для Android — 13sp. Исследование Baymard Institute показывает, что оптимальная длина строки — 50-60 символов с пробелами. Ориентируйтесь на аудиторию, если ваши пользователи — люди пенсионного возраста, им будет удобно читать текст покрупнее.м

Текст на странице с рецептами
10. Контрастный текст

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

Фрагмент работы с инструментом
11. Всплывающие окна не закрывают контент

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

Иконки мессенджеров убраны под панель
12. Упрощенная регистрация

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

Быстрая регистрация
13. Использование геоданных

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

    Автозаполнение города
    14. Упрощенная связь с компанией

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

    <a href="tel:+74952235555">Call me</a>

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

    Экспорт номера телефона в журнал вызовов
    Почитать по теме:
    Повышаем юзабилити: звонок в компанию по клику с сайта

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

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

    Фрагмент результатов проверки

    Проверить сайт можно прямо в SERP: если ввести в поисковик «mobile friendly», появится поле для ввода адреса сайта.

    Проверка в SERP

    Анализ сайта от PR-CY проверяет ресурс по более 70 параметрам, включая и мобилопригодность. К каждому пункту проверки дает пояснение и совет. Для проверки оптимизации хватит функциональности бесплатной версии.

    Фрагмент результатов проверки

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

    Фрагмент результатов проверки

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

    4 сервиса для проверки адаптивности вашего сайта

    Главная • Блог • 4 сервиса для проверки адаптивности вашего сайта

    4 сервиса для проверки адаптивности вашего сайта

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

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

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

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

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

    Никакой интерактивности и выбора разрешения — только скриншот первой страницы.

    Браузер

    Browserling — это инструмент для кросс-браузерного тестирования. Как начать:

    • Выберите нужную версию Android/Windows.
    • Укажите браузер вместе с версией.
    • Нажмите «Проверить сейчас».

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

    Так работает проверка кроссбраузерности в Browserling

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

    Экранная муха

    Screenfly — бесплатный сервис для тестирования адаптивности веб-сайтов. Вы можете выбрать один из 30 размеров экрана или настроить высоту и ширину самостоятельно.

    Для просмотра всех элементов страницы необходимо также включить прокрутку, нажав на кнопку «Разрешить прокрутку» в меню. Только для http://

    Я люблю адаптивный

    Я люблю адаптивность — это удобный инструмент для тестирования адаптивности и кроссплатформенной совместимости.

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

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

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

    Создать адаптивный тест для страницы

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

    Создать тестовые варианты


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

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

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


    • Чтобы отредактировать другой вариант, нажмите на самый тест T Тестовый вариант в раскрывающемся меню в левом верхнем углу и выберите вариант.

    • Чтобы добавить, переименовать или удалить варианты страниц:
      • В левом верхнем углу нажмите на раскрывающееся меню теста Вариант теста и выберите Управление тест .
      • В диалоговом окне нажмите + Добавить вариант , чтобы добавить дополнительные варианты страниц.
      • Чтобы удалить вариант из теста, нажмите значок удаления корзины рядом с вариантом.
      • Нажмите  Сохранить изменения .

    • Когда вы будете готовы опубликовать все варианты, нажмите Опубликовать в правом верхнем углу.

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


    Просмотр производительности теста

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

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

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

      • Таблица с показателями, включая просмотры страниц, коэффициент выхода, конверсии для каждого варианта. Чтобы настроить показатели, показанные в этой таблице:
        • В правом верхнем углу нажмите Переключить столбцы .
        • В разделе Selected Columns нажмите X рядом с любой метрикой, которую вы хотите удалить.
        • В разделе Columns установите флажок рядом с любой метрикой , которую вы хотите добавить.
        • Щелкните Сохранить .

    Завершить тест

    Чтобы завершить тест, выберите один вариант, который будет отображаться на URL-адресе страницы. Все остальные варианты страниц будут заархивированы.

    • Нажмите название страницы.
    • Перейдите на вкладку Результаты теста .
    • В левом верхнем углу нажмите Завершить тест .

    • В диалоговом окне выберите вариант страницы, которую вы хотите оставить опубликованной. Затем введите end test в текстовое поле и нажмите Yes, end test .

    После завершения теста сводка производительности каждого варианта сохраняется на вкладке Результаты теста сведений о странице.

    Целевые страницы Страницы сайта

    Адаптивное декодирование по сравнению с адаптивнымОтзывчивый веб-дизайн

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

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

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

    Читая эту статью, вы поймете, что выбор между двумя вариантами зависит от сценария клиента, на котором мы хотим сосредоточиться. Задайте себе такие вопросы, как: Какую проблему вы решаете для клиента? Как решение улучшает их технику? Вот некоторые вопросы, которые ваша организация, занимающаяся разработкой программного обеспечения, должна обдумать, прежде чем сделать большой шаг и выбрать между AWD, RWD и кто знает RESS! Давайте подробнее рассмотрим эти техники.

    Что такое задний привод?

    Итак, какова цель адаптивного веб-дизайна (RWD)? Давайте сначала разберемся, как работает эта техника, а затем поймем, каковы планы.

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

    Что такое цели RWD?

    Теперь давайте разберемся с целями выбора этой технологии.

    Люди заходят на веб-сайты со всего мира, используя различные типы устройств. С развитием технологий количество брендов и типов устройств, включая мобильные устройства, планшеты, ноутбуки и т. д., очень велико. Каждое из этих устройств имеет разный размер экрана и разрешение.Отображается ли веб-сайт одинаково на всех устройствах, с которых к нему обращаются? Вы, наверное, замечали (особенно несколько лет назад) случаи, когда это тоже не срабатывало.

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

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

    Что такое полный привод?

    Адаптивный дизайн веб-сайта (AWD) аналогичен адаптивному веб-сайту. Он тоже настраивает макет сайта, но с другой точки зрения. Здесь у нас есть макетов веб-сайтов, которые остаются статичными . Тем не менее, он генерирует или адаптирует связанный макет требуемого размера экрана, когда он определяет размер экрана.

    Много сил потрачено на разработку нескольких версий сайта.

    Каковы цели полного привода?

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

    Допустим, вы хотите запустить веб-сайт для своего интернет-магазина. В этом случае вы уже будете знать, что ваша компания получит хорошую рентабельность инвестиций, разработав мобильную специализированную версию в мире электронной коммерции. В конце концов, по оценкам исследований, в 2021 году примерно 73% процентов электронной коммерции только в сфере розничной торговли будут генерироваться за счет мобильной коммерции. Следовательно, в таких ситуациях вы можете ориентироваться на мобильных пользователей и просить дизайнеров веб-сайтов создать веб-сайт с использованием AWD.

    Как определить, является ли веб-страница адаптивной?

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

    Давайте попробуем прямо сейчас:

    1. Откройте веб-сайт в браузере настольного компьютера. Выведите браузер из полноэкранного режима.
    2. Поместите курсор на правый край окна браузера, а затем измените размер до любого желаемого размера; например, в формате отображения мобильного экрана.
    3. Проверьте, изменяется ли макет в соответствии с изменением размера, выполненным на веб-странице. Если да, это означает, что страница адаптивна.

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

    Вот ссылка на некоторые сайты с адаптивным дизайном.

    Как определить, является ли веб-страница адаптивной?

    Это тоже просто. Давайте попробуем прямо сейчас:

    1. Откройте веб-сайт в браузере настольного компьютера.Выведите браузер из полноэкранного режима.
    2. Поместите курсор на правый край окна браузера, а затем измените размер до любого желаемого размера; например, в формате отображения мобильного экрана.
    3. Откройте тот же веб-сайт на мобильном устройстве или планшете.
    4. Сравните раскладку на всех трех устройствах — десктоп, мобильный, планшет. Если компоновка отличается, вы можете подтвердить, что она соответствует полному приводу.

    Вот ссылка на некоторые сайты, использующие адаптивный дизайн.

    Как определить, является ли веб-страница отзывчивой и адаптивной?

    Знаете ли вы, что веб-страницы могут сочетать оба дизайна? Этот тип дизайна называется RESS.Полная форма является REsponsive с серверной стороной. У вас могут быть разные HTML-страницы на веб-сайте, чтобы смешать любой из методов!

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

     Давайте попробуем прямо сейчас:

    1. Откройте веб-сайт в браузере настольного компьютера. Выведите браузер из полноэкранного режима.
    2. Поместите курсор на правый край окна браузера, а затем измените размер до любого желаемого размера; например, в формате отображения мобильного экрана.
    3. Откройте тот же веб-сайт на мобильном устройстве или планшете.
    4. Теперь сравните раскладку на всех трех устройствах — десктоп, мобильный, планшет. Если компоновка отличается, вы можете подтвердить, что она соответствует полному приводу.
    5. Убедитесь, что размер веб-сайта не изменяется, чтобы соответствовать размеру экрана, когда вы тянете край или угол окна браузера. Если да, веб-сайт также следует за RWD.

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

    Как тестируются веб-страницы с адаптивным и адаптивным дизайном?

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

    Точно так же вы можете попробовать такие инструменты, как Responsinator. В проектах могут использоваться платформы автоматизации тестирования программного обеспечения, такие как TestProject, которые также имеют возможности интеграции с BrowserStack.

    Заключение – Какой дизайн лучше?

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

    Новый улучшенный A/B-тест для привлечения большего числа посетителей (+ учебник по HubSpot)

    Откуда вы знаете, что обновления вашей страницы, включая изменения дизайна и содержания, стоят затраченных усилий?

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

    Тестирование обновлений — лучший способ сэкономить время и быстро достичь поставленных целей. A/B-тестирование — это мощный вариант, который дает полезную информацию, но в нем есть существенные недостатки.

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

    Позвольте нам представить недавнюю эволюцию A/B-тестирования — адаптивное тестирование. Адаптивное тестирование может предоставить вам правильный вариант для выбора и по-прежнему может приводить к конверсиям во время тестирования.

    Давайте рассмотрим основы адаптивного тестирования, предоставим вам преимущества и расскажем, как проводить адаптивные тесты на корпоративном уровне HubSpot.

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

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

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

    Как работает адаптивное тестирование?

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

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

    5 преимуществ использования адаптивного тестирования

    Вот лишь несколько преимуществ использования адаптивного тестирования в HubSpot.

    1. Автомат.

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

    Это означает, что нет необходимости внимательно следить за своими тестами. Адаптивное тестирование HubSpot берет на себя всю работу за вас, чтобы вы могли позаботиться о более важных задачах.

    2. Вы можете протестировать более одного варианта за раз.

    A/B-тестирование работало путем одновременного тестирования двух вариантов. Адаптивное тестирование позволяет тестировать до пяти вариантов одновременно.

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

    3. Вы можете улучшить конверсию во время тестирования.

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

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

    4. Содержит советы по тестированию.

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

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

    5. Показывает распределение трафика во времени.

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

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

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

    Как использовать адаптивные тесты HubSpot

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

    1. Начните с редактора страниц CMS HubSpot.

    • Нажмите «Выполнить тест». Выберите вариант адаптивного теста.

    Источник: HubSpot

    2.Установите цель и количество вариантов для тестирования.

    • Добавьте до пяти вариантов. Обязательно дайте каждому из ваших вариантов уникальное имя.

    3. Отредактируйте свои варианты.

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

    4. Опубликуйте свои страницы.

    • Завершив редактирование вариантов, нажмите «Опубликовать».

    5.Проанализируйте свой тест.

    По истечении заданного периода времени данные вашего теста появятся на вкладке «Результаты теста». На этой вкладке представлены три основные диаграммы, которые помогут вам понять результаты вашего адаптивного теста.

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

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

    Начните оптимизировать свой сайт сегодня, используя адаптивное тестирование на уровне HubSpot Marketing Hub Enterprise.

    Перенести A/B-тестирование.Адаптивное тестирование здесь.

    A/B-тестирование

    уже много лет помогает маркетологам понять поведение и настроить страницы веб-сайта. Но пока вы ждали появления статистически значимых данных, HubSpot работал над тем, чтобы вывести A/B-тестирование на НОВЫЙ УРОВЕНЬ с помощью своих новых функций адаптивного тестирования. Проверь как это работает.

    Как специалисты по маркетингу, мы постоянно работаем над повышением эффективности наших веб-сайтов. Чем интересуются люди? Почему они ведут себя так, а не так? Что работает? Что не работает?

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

    Однако, если вы когда-либо проводили A/B-тестирование, вы понимаете, что на самом деле это медленный процесс — тестирование отдельных элементов и ожидание появления статистически значимых результатов. Но это 2020 год, друзья! Разве мы не заслуживаем большей эффективности? HubSpot так думает, и именно поэтому они разработали адаптивное тестирование.


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


    Адаптивное тестирование — это новейшая технология искусственного интеллекта от HubSpot, которая поможет вам оптимизировать производительность страницы. Забавный факт — на самом деле это называется многоруким бандитским тестированием — термин, который мы в Engaging Partners любим, потому что он говорит о возможности атаковать ваше тестирование по нескольким направлениям одновременно.

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


    Как работает адаптивное тестирование

     

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

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

     

    Вот параллельное сравнение A/B-тестирования и адаптивного тестирования:

    Почему адаптивное тестирование важно для маркетологов?

     

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

    Вот некоторые элементы страницы, которые вы обычно тестируете, так как они напрямую влияют на конверсию:

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

    Посмотрите адаптивный тест в действии: в этом примере мы создали 3 варианта одной и той же страницы — посмотрите, сможете ли вы их распознать…

     

    А вот результат в реальном времени:

     

    Какая технология вам нужна для проведения адаптивного тестирования?

     

    Если ваша организация использует конверсии веб-сайтов для потенциальных клиентов и продаж, вам следует рассмотреть возможность обновления до HubSpot Marketing Hub Enterprise, чтобы воспользоваться преимуществами этой функции.Сложность, лежащая в основе этого инструмента, такова, что маркетологи могут настроить адаптивный тест за несколько кликов. Нет необходимости во вмешательстве разработчика. Автоматизация и инсайты буквально у вас под рукой.

     

    Хотите узнать больше о том, как новые функции HubSpot Marketing Hub Enterprise могут помочь вашей организации? Мы будем рады помочь. Проверьте наши учетные данные HubSpot или забронируйте время, чтобы пообщаться с нами в ближайшее время!

    Сайт для мобильных устройств, адаптивный, адаптивный или настольный?

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

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

    Мобильные специализированные сайты

    Сайты, предназначенные для мобильных устройств, — это сайты, разработанные специально для мобильных телефонов. Они часто находятся под отдельным URL-адресом (например, m.site.com) и полностью отличаются от полного сайта. Они содержат функции или контент, которые считаются подходящими для мобильных устройств; часто это лишь часть того, что доступно на рабочем столе.Их часто противопоставляют адаптивным сайтам, которые обычно содержат одинаковый контент и функциональные возможности для мобильных устройств и настольных компьютеров, но перестраивают эти функции на мобильных устройствах.

    Веб-приложения

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

    Адаптивный дизайн

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

    Transport for London (tfl.gov.uk) — это адаптивный сайт. На рабочем столе содержимое было отформатировано в 3 столбца. В версиях tfl.gov.uk для планшетов (слева) и для мобильных устройств (справа) содержимое рабочего стола отображалось в двух и одном столбцах соответственно.

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

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

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

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

    Вот некоторые относительные преимущества и недостатки этих двух подходов.

    • Адаптивные сайты могут поддерживать различные устройства и размеры экрана с помощью одной реализации. Выделенные сайты зависят от устройства: компании должны создавать отдельные сайты для мобильных устройств и компьютеров. Напротив, один и тот же адаптивный сайт может хорошо работать на различных устройствах и размерах экрана, от смартфонов до планшетов и настольных компьютеров.
    • Адаптивные сайты предлагают одинаковый контент и функции (по крайней мере, в некоторой степени). В отличие от мобильных сайтов, по крайней мере теоретически, одинаковый контент и функциональность доступны на всех версиях адаптивного сайта. (Мы видели, что на практике некоторые адаптивные сайты пропускают контент и функции для мобильных устройств, но в меньшей степени, чем мобильные сайты.) Больше не нужно решать, какие функции важны для мобильных устройств, а какие следует исключить. Хотя вам все еще нужно расставить приоритеты функций и решить, как их размещать на небольших экранах.
    • Раньше адаптивные сайты было легче найти с помощью поисковой системы. Мобильные сайты имеют другой URL-адрес, чем сайты для настольных компьютеров, и изначально они не всегда унаследовали высокий поисковый рейтинг от своего родственного сайта для настольных компьютеров. В результате мобильные сайты могли отображаться ниже в результатах поиска.И даже если настольные сайты обнаружат мобильных клиентов и перенаправят пользователей на соответствующий мобильный сайт, перенаправление может занять дополнительное время и ухудшить работу мобильных пользователей (плюс, это также может повлиять на SEO).
      Поскольку один URL-адрес соответствует всем версиям адаптивного сайта, адаптивным сайтам не нужно беспокоиться о поисковой оптимизации или переадресации.
      Однако в настоящее время современные поисковые системы научились работать с мобильными сайтами и перенаправляют пользователей на мобильную версию сайта, если она доступна.
    • Адаптивные сайты сохраняют содержимое и поддерживают функции. Единый сайт и один репозиторий содержимого легче поддерживать, чем несколько отдельных сайтов. Однако любое изменение интерфейса должно быть проверено на всех устройствах.
    • Разработка адаптивных сайтов, как правило, обходится дороже. Наши клиенты сообщают, что процесс создания всего адаптивного сайта с нуля может быть более дорогостоящим, чем просто создание отдельного мобильного сайта. Кроме того, для адаптивных сайтов требуются более продвинутые навыки разработки.
    • Адаптивные сайты работают медленнее. Хотя существуют методы повышения производительности адаптивных сайтов, поскольку одно и то же содержимое доставляется на все типы устройств, загрузка адаптивной страницы может занять больше времени, чем загрузка страницы для мобильных устройств.
    • Адаптивные сайты хуже подходят для сложных задач и контента. Сложные задачи трудно одинаково хорошо выполнять на всех устройствах. Сложные электронные таблицы, сравнительные таблицы и визуализации часто трудно масштабировать на маленьких мобильных экранах.Сайты, посвященные мобильным устройствам, часто могут отказаться от такого контента, особенно потому, что пользователи стараются избегать выполнения сложных задач на смартфонах.
    • Адаптивные сайты плохо интегрируются с существующими сторонними сервисами. Если вы создаете сайт, который опирается на отдельную независимую серверную службу (например, систему бронирования на сайте отеля), часто сложно интегрировать интерфейс этой службы в адаптивный сайт.

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

    Адаптивный дизайн

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

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

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

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

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

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

    Заметка о фаблетах

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

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

    Заключение

    Выделенный для мобильных устройств, отзывчивый или адаптивный — все это возможные способы реализации мобильных пользовательских интерфейсов. (Размещение десктопного сайта на мобильном устройстве тоже возможно, но мы не рекомендуем его.) У каждого из них есть преимущества и недостатки, и они даже влияют друг на друга . Для пользователей нет различия между ними. Обычные люди не признают, что отзывчивые или адаптивные сайты отличаются от мобильных сайтов, и не относятся к ним по-разному. (Единственный способ, которым вы как конечный пользователь можете сказать, что сайт реализован в адаптивном дизайне, — это изменить размер окна, в котором он отображается на рабочем столе, чтобы проверить, перестраивается ли содержимое. И это не то, что пользователи будут делать, если они не повторное участие в нашем семинаре Масштабирование пользовательских интерфейсов .)

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

    Влияние компьютерного адаптивного тестирования с различных точек зрения

    Аннотация

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

    Ключевые слова: Компьютерное адаптивное тестирование, Эффективность измерения, Самоэффективность обучения, Мотивация, Баланс контента

    Введение

    ).IRT — чрезвычайно эффективная психометрическая модель, официально предложенная Лордом в 1980 г. [1]. Хотя CAT все еще могут быть построены на основе классической теории тестирования (CTT) [2-4], большинство CAT построены с IRT, потому что он имеет несколько преимуществ перед CTT с точки зрения разработки теста, анализа элементов и оценки тестов. берущие. Самым важным преимуществом является то, что IRT размещает задания и испытуемых на одной шкале.

    CAT — это разновидность компьютерного тестирования, которое адаптируется к уровню способностей каждого тестируемого.Идеальный CAT может предоставить каждому испытуемому индивидуальный тест определенной длины, который может отличаться от других [5,6]. CAT оказывает несколько серьезных воздействий на образовательные и психологические оценки, особенно на профессиональные и квалификационные тесты.

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

    Точки зрения разработчиков тестов и специалистов по психометрии

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

    CAT требует следующих компонентов: (1) калиброванный банк вопросов или набор вопросов, калиброванных на основе данных предварительного тестирования; (2) отправная точка, которая представляет собой правило, определяющее конкретную отправную точку для тестируемого; (3) алгоритм выбора элементов, который относится к правилам выбора следующего элемента на основе ответов испытуемого; (4) алгоритм подсчета очков, который представляет собой механизм оценки способностей испытуемого и ошибки измерения; и (5) критерий завершения, который является правилом для завершения теста [7,8].CAT начинается с предположения, что первые 2 компонента (1) и (2) заданы, затем он повторяет (3), (4) и (5) до тех пор, пока не будет выполнен компонент критерия завершения. Хотя за последние несколько десятилетий было проведено значительное количество исследований по этим конкретным аспектам CAT, литература, содержащая практические рекомендации по развитию CAT, скудна [9].

    Онлайновый интерактивный мини-учебник доктора Руднера по CAT предлагает простую демонстрацию CAT, подходящую для всех, кто еще не испытал CAT, но хотел бы [10].Это идеальное место, чтобы познакомиться с внутренней логикой CAT, понаблюдать за скрытыми вычислениями, которые используются в работе CAT, и получить возможность провести практические эксперименты с реальным CAT, который выбирает элемент. адаптивно из 64 вопросов с несколькими вариантами ответов на тесте по математике для восьмого класса. Система предоставляет вопросы и соответствующие ответы, поэтому вы можете применять альтернативные варианты и наблюдать за результатами. Тест начинается после того, как пользователь выбирает свою истинную способность в единицах z-показателя, в единицах SAT или в процентилях.При тестировании система показывает информационные приложения 5 элементов, которые, по мнению компьютера, оптимизируют информацию об уровне способностей испытуемого, функцию ответа на соответствующий элемент и стандартную ошибку, основанную на текущей оценке способностей. Тест завершается нажатием кнопки «Готово». Затем система представляет историю сеанса тестирования, которая включает уровень сложности для каждого элемента, вероятности правильного ответа и то, дал ли пользователь правильный ответ на данный элемент, а также предоставляет стандартные ошибки и оценки способностей.Можно наблюдать, как оценка способности обычно начинает отражать предварительно выбранную истинную оценку способности по мере увеличения количества заданий и как стандартные ошибки оценки способностей испытуемого уменьшаются по мере увеличения количества заданий.

    Эмпирические исследования [6,7,11] показали, что CAT может сократить количество элементов и время тестирования на 50% и более без ухудшения точности измерения, и что CAT достаточно гибок, чтобы его можно было настроить так, чтобы все тестируемые оцениваются с одинаковой точностью, независимо от того факта, что потенциально все они могут быть представлены с различными элементами.

    Точки зрения испытуемых

    Большинство алгоритмов CAT выбирают вопросы, на которые каждый испытуемый должен дать правильный ответ с вероятностью 50%, поскольку это максимизирует информацию о тесте и сводит к минимуму количество заданий, подлежащих администрированию. Тем не менее, многие испытуемые сообщают, что чувствуют себя обескураженными после прохождения таких CAT. Некоторые исследователи утверждают, что 50% — это слишком низкий порог для того, чтобы испытуемые сохранили свою мотивацию, и что CAT должна использовать более простые задания, чтобы наполнить испытуемых чувством выполненного долга [12,13].Согласно письменному опросу, проведенному автором, примерно 90% испытуемых сочли тест «сложным», а примерно 60% также почувствовали себя «разочарованными» или «неудовлетворенными» полученным опытом. Они утверждали, что обычно чувствовали себя «удовлетворенными», когда их баллы превышали 76/100, и «разочарованными», когда они были ниже 45/100. Это говорит о том, что опыт прохождения CAT может обескуражить испытуемых и привести к контрпродуктивным результатам с точки зрения снижения как самоэффективности, так и мотивации к обучению.Следовательно, существует компромисс между психологическим опытом испытуемых и эффективностью измерения [14,15].

    Одним из решений этой проблемы является манипулирование целевой вероятностью правильного ответа в алгоритме выбора элемента в CAT. С этой целью автор разработал плагин для Moodle, самой популярной в мире системы управления обучением с открытым исходным кодом, так что CAT можно администрировать в системе. Этот плагин называется многомерным (М)-одномерным CAT (UCAT) и был разработан на основе программы UCAT, созданной Linacre в 1987 году.M-UCAT имеет функцию управления целевой вероятностью правильного ответа в алгоритме выбора элемента, которой не было в оригинальном UCAT [16].

    Очевидно, что если бы CAT отбирал вопросы, на которые испытуемые могли ответить правильно с вероятностью выше 50%, то для поддержания достаточной точности пришлось бы вводить больше заданий. Автор использовал M-UCAT для управления различными CAT, которые адаптивно выбирали элементы из одного и того же банка заданий и различались по сложности целевого задания и продолжительности теста.(1) CAT из 16 пунктов с целевой вероятностью правильного ответа 50%, (2) CAT из 25 пунктов с целевой вероятностью правильного ответа 80%, (3) CAT из 19 пунктов с целевой вероятностью 80% правильный ответ на первые 8 вопросов и 50% на остальные, (4) CAT из 19 пунктов с целевой вероятностью правильного ответа на последние 8 вопросов 80% и 50% на остальные, (5) и 19- пункт CAT с целевой вероятностью правильного ответа как на первый, так и на последний 4 пункта 80% и 50% на остальные.Теоретически эти 5 CAT получили примерно одинаковое количество информации из теста и завершились с одинаковой точностью измерения (стандартная ошибка, 0,5 логита). Оценка способностей для 5 групп была в среднем почти одинаковой с примерно одинаковым стандартным отклонением. В конце всех CAT стандартная ошибка измерения достигла такого низкого уровня, который теоретически ожидался в среднем, или даже ниже. Удивительно, но фактический процент правильных ответов для каждой CAT был ниже, чем целевая вероятность правильного ответа.Снижение стандартной ошибки измерения и фактического процента правильных ответов в основном произошло из-за того, что банк заданий имел асимметричное влево распределение сложности заданий [17,18].

    Другим недостатком CAT с точки зрения тестируемого является то, что тестируемому не разрешается возвращаться к уже заданным заданиям, чтобы изменить ответ, что всегда возможно в традиционных стандартизированных неадаптивных линейных тестах. Отказ от просмотра заданий может усилить тревогу испытуемого.Если испытуемый неправильно отвечает на все первые несколько вопросов из-за нервозности, тест не является самокорректирующимся. Некоторые исследователи утверждают, что CAT следует начинать с относительно простых заданий [19].

    Точки зрения преподавателей и экспертов-предметников

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

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

    Целевой функцией идеального CAT является оптимизация статистической информации в тестовых заданиях при текущей оценке способностей каждого тестируемого. Однако нестатистические характеристики, которые мы должны учитывать при разработке CAT, накладывают ограничения на процедуру выбора элементов.Некоторые исследователи рассматривают эту ситуацию как алгоритм условной последовательной оптимизации, где все нестатистические спецификации являются ограничениями, зависящими от уровня, на котором должна происходить оптимизация [20].

    За последние два десятилетия для решения этой проблемы было предложено несколько различных методов: (1) разделение пула элементов [21], (2) метод взвешенного отклонения [22], (3) метод индекса максимального приоритета [ 22], (4) адаптивное тестирование на основе тестлетов [23-25], (5) многоэтапное адаптивное тестирование [26,27] и (6) адаптивное тестирование с теневым тестом [20,28].Первые 3 метода реализуют необходимые ограничения посредством модификации алгоритма выбора элементов. Четвертый и пятый методы внедряют ограничения непосредственно в тестовые единицы в пуле, из которого администрируется тест. Последний метод собирает полноразмерный тест, отвечающий ограничениям и обладающий максимальной информацией при текущей оценке способностей, который называется теневым тестом; однако администрируется только элемент с максимальной информацией среди неиспользуемых элементов в теневом тесте.После обновления оценки способности повторно собирается следующий теневой тест, включая управляемый(е) элемент(ы).

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

    Многоэтапное адаптивное тестирование — это наилучший способ для экспертов в предметной области просмотреть все завершенные материалы тестирования перед администрированием, чтобы проверить нестатистические характеристики, такие как охват и баланс контента, длина формы, формат элемента и враги элементов.Было проведено множество теоретических и эмпирических исследований компьютеризированного многоэтапного тестирования. Семинары и симпозиумы по компьютеризированному многоэтапному тестированию часто проводятся на крупных международных конференциях. «Компьютеризированное многоступенчатое тестирование: теория и приложения» [29] — всеобъемлющее пособие в этой области. Многоэтапное адаптивное тестирование получило широкое распространение в процессе перехода от линейного тестирования к адаптивному тестированию. Внедрение многоэтапного адаптивного теста в рамках единого экзамена сертифицированного бухгалтера в США является одним из многих хороших примеров этого.Аргумент на стадии разработки является весьма практичным и наводит на размышления людей, которые рассматривают возможность применения CAT в своих оценках [30].

    Прочие вопросы

    Помимо этих вопросов, есть еще несколько моментов, о которых следует помнить при разработке и внедрении CAT: типы вопросов, одномерность и скорость показа элементов. CAT в основном неприменимы к открытым вопросам и элементам, которые не могут быть легко откалиброваны. Модель IRT, на которой основано большинство CAT, предполагает одномерность элементов, что означает, что все элементы теста должны измерять одну характеристику.Если желательно ввести элементы, которые измеряют более одного признака, следует разработать CAT на основе многомерной IRT [25,31-33].

    Скорость выставления предметов должна тщательно контролироваться, потому что некоторые предметы выбираются чаще, чем другие, а некоторые элементы могут быть запомнены и переданы другим испытуемым. К настоящему времени предложено множество процедур и подходов. Вот некоторые из них: (1) алгоритм рандомизации 5-4-3-2-1 [34], (2) процедура Симпсона и Хеттера [35], (3) методология Дэйви и Паршалла [36], (4 ) безусловная полиномиальная процедура Стокинга и Льюиса [37] и (5) условная полиномиальная процедура Стокинга и Льюиса [37].Оценочные исследования по сравнению этих методов неоднократно проводились [38,39].

    Заключение

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

    Что касается негативного влияния на испытуемых, то автор предлагает увеличить целевую вероятность правильного ответа в алгоритме выбора заданий, даже если это приведет к увеличению количества заданий, необходимых для поддержания той же точности измерений.Чтобы удовлетворить желание экспертов в предметной области проверить нестатистические характеристики во всем тестовом материале перед проведением теста, были введены 2 различных подхода: CAT с подходом теневого теста и компьютеризированное многоэтапное тестирование. В подходе теневого теста собирается полноразмерный тест, который соответствует всем соответствующим ограничениям и имеет максимальную информацию при текущей оценке способностей. Таким образом, нет необходимости просматривать тестовые формы экспертами в предметной области. Однако заранее закодировать все нестатистические спецификации — непростая задача.Компьютеризированное многоэтапное тестирование дает экспертам в предметной области возможность просматривать все формы тестов до их проведения. Это основная причина, по которой многоэтапное адаптивное тестирование получило широкое распространение при переходе от линейного тестирования к адаптивному тестированию.

    Кроме того, были также кратко обсуждены типы вопросов, одномерность и скорость показа элементов, поскольку они также являются важными вопросами при разработке и внедрении CAT. Следует отметить, что объем данной статьи ограничен.Для получения дополнительной информации о разработке и исследованиях CAT мы предлагаем посетить онлайн-библиографию, созданную Международной ассоциацией компьютерного адаптивного тестирования (IACAT), которая активно поддерживается и обновляется группой добровольцев IACAT с учетом последней исследовательской информации и тем в области CAT.

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

Ваш адрес email не будет опубликован.