Главная / Блог / Веб-разработка / Как протестировать отображение сайта на других устройствах

Как протестировать отображение сайта на других устройствах

10 июля 14
Reading Time: < 1
2 комментария
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes)

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

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

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

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

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

Дополнительно, можно просмотреть страницы в портретной или альбомной ориентации, с помощью кнопки «Rotate Screen», или же задать собственное разрешение, если нужного нет в списке. Для этого нужно нажать кнопку «Custom Screen Size» на панели инструментов Screenfly, и в появившемся меню установить требуемые значения:
 

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

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

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

Comments (2)
  • alisa:

    Спасибо за информацию, этим сервисом еще не пользовалась. А как Вам ScreenQueries?

    1. Dominik:

      Тоже интересный сервис, но более сложный на вид для новичка.

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

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

Более 3000 запущенных проектов

Вместе с нами многие уже развивают свой бизнес! Смотреть все отзывы
Хочу выразить большую благодарность коллективу компании "ImageCMS" а именно Ивану и Марии! Во время выбора компании проводил переговоры с 7 различными организациями, Иван единственный кто смог адекватно объяснить и подсказать всю необходимую информацию для принятия решения. В итоге результат более чем на 100% соответствует ожиданиям, а во много их даже превосходит!
Перепробовав много CMS (opencart, Битрикс) и др. Мы увидим, как много в каждой из них недостатков. Где-то или очень сложно или очень дорого кастомизировать. Работая маркетологом, могу заверить, что в ImageCMS большинство нужны "фич" реализовано из коробки, без дополнительных надстроек. Посмотрев демо версию новой версии движка, был приятно удивлен скоростью работы (ооочень важно).
За время сотрудничества компания показала себя в качестве ответственного подрядчика, быстро воплотив в жизнь удобный интернет-магазин с учетом всех наших пожеланий.
Работой доволен. Отвечают всегда быстро и по сути, остаются только приятные впечатления от общения. Пара слов о новом движке: Быстро, красиво и интуитивно понятно. Полностью оправдывает вложенные средства. Рекомендую.
Доволен. Скрипт считаю перспективным. Считаю, что ваш коллектив работает на опережение: ваше предложение было оптимальным по цене/качеству.
Опертивная и четкая работа, своевременое предоставление дополнительных консультаций по работе с административной частью. Созданным магазином довольна. Рекомендую этот движок!