Главное Свежее Вакансии   Проекты
243 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

I love adaptive — сервис для тестирования адаптивной версии сайта

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

В этой статье расскажем вам про бесплатный сервис для тестирования адаптивной версии сайта 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 таких упоминаний).

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


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

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


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

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


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

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


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

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


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

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

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


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

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

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

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


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

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


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

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

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


Возможность посмотреть ранее тестируемые сайты
  • 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 или на почту hello@iloveadaptive.com.

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Первые Новые Популярные
Комментариев еще не оставлено
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

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