Пользователь
0,0
рейтинг
11 августа 2013 в 20:11

Дизайн → Чем тестировать адаптивный дизайн? перевод

image

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

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

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

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

Для тестирования я выбрал реально адаптивный сайт PajamasOnYourFeet.com, сайт построено на основе HTML5 шаблона, бесплатно предоставленным EGrappler.

Am I Responsive?


Am I Responsive, очень простой инструмент, позволяющий быстро просмотреть ваш сайт на 4 устройствах. Все они — IOS и разработчик объясняет это фишкой сайта. В общем никаких настроек, никакого выбора, а очень просто и наглядно.

Доступные размеры:
  • настольный монитор — 1600 x 992px;
  • ноутбук — 1280 x 802px;
  • планшет — 768 x 1024px;
  • мобильный телефон — 320 x 480px.

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

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

image

deviceponsive


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

Устройства и доступные разрешения экранов.
  • Macbook — 1280 x 800
  • iPad портрет — 768 x 1024
  • iPad портрет — 1024 x 768
  • Kindle портрет — 600 x 1024
  • Kindle альбомная ориентация — 1024 x 600
  • iPhone портрет — 320 x 480
  • iPhone альбомная ориентация — 480 x 320
  • Galaxy портрет — 240 x 320
  • Galaxy альбомная ориентация — 320 x 240

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

image

responsive test


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

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

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

image

responsive.is


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

Доступные варианты устройств — авто (то как вы видите сайт), настольный комьютер, планшет в альбомной и портретной ориентации, смартфон в портретной и альбомном положении. Задавать произвольные размеры в px, к сожалению нельзя.

image

Screenqueries


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

Интересной особенностью этого сайта, для ряда устройств есть “Trueview” вариант, который показывает ваш сайт в нативном браузере устройства.

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

image

Screenfly


Screenfly пожалуй наиболее функциональный из всех. Доступно 9 больше чем планшет устройств — от 10" ноутбуков, до 24" мониторов, 5 планшетов, 9 телефонов, 3 телевизионных разрешения, а также произвольное разрешение. Добавьте сюда отдельный переключатель в портретный и альбомный режим, а также опцию показа прокрутки. Также можно поделится ссылкой на тест с помощью одной кнопки.

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

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

image


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

P.S. Ошибки по поводу перевода просьба сообщать в личку.
Перевод: Steve Ralston
Игорь @armid
карма
18,2
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Дизайн

Комментарии (32)

  • +3
    Не проще сделать страницу с iframe и переключалками размеров?
    • 0
      Так уже ж и сделано выше ))
      • 0
        Я в смысле сделать её у себя на хосте, и не лазить по другим сайтам. А вообще почему бы и не менять размер окна? ;)
        • 0
          Ну менять размер окна все таки не по фен-шую, а вот свои рельсы это хорошо. Но а для тех кому лень/не может выбираем выше.
          • 0
            Вы сколько угодно можете ругать IE, но в 9 версии у них была классная фишка — изменять размер браузера в один клик.
    • +3
      А ретино-подобные экраны как имитировать? а реакцию на touch?
      Самое простое — в Хроме (ну и в Опере теперь, соответственно) в панели разработки, в настройках есть имитация экранов различных устройств. В том числе и имитация touch. Но это, конечно, все равно не то.
      Онлайн сервисами все равно не пользуюсь практически — все решается или ХромоОперой или уж реальным устройством. В крайнем случае можно даже подключить в панели разработки (Хром или Фокс) отладку по USB (но с этим куча проблем обычно).
      Если интересно, могу завтра кинуть ссылки. Дома они мне как-то без надобности.
    • 0
      100%
      Это помогает для полного понимания того, что подобные сервисы не отражают полную действительность. Так как метрики шрифтов, размеры контролов, интерпретация meta-viewport,… специфичны для устройств и браузеров. Тоесть в любом случае тестировать нужно на настоящих девайсах.
  • +1
    Я использую вот этот скрипт http://lab.maltewassermann.com/viewport-resizer/

    А так вообще конечно лучше хотя бы эмуляторы.
  • +1
    Использую плагин для Хрома для теста верстки: chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
    Мультитач, жесты и ретина только на реальном девайсе.
  • +1
    Использую Firefox — Ctrl + SHIFT + M. CTRL + [+] меняем pixel ration
    • 0
      Аналогично. Зачем отдельный сервис, когда всё давно уже под рукой (скорее всего автору лень читать документацию по браузрам).
      Ещё умиляет у автора, что FF некорректно работает с сайтом, а не сайт кривовато работает с FF :).
    • 0
      > CTRL + [+]

      Не понял. У меня Ctrl + или — меняют масштаб, не применяя правила для pixel ratio.
      • 0
        ctrl и + (увеличение масштаба) window.devicePixelRatio тестируйте в консоли. jsfiddle.net/HwUGj/embedded/result/ CTRL и + 6 раз
        • 0
          Понял, благодарю.
  • –3
    Простие за оффтопик. Да и вообще меня сильно бесит, когда втыкают картинку исключительно из яблочных девайсов. Красиво, хорошо. Но Вы о яблоках пишите или о какой-то другой теме.
    • 0
      Скругленные углы и черная рамка — это может быть кто угодно, например, Самсунг.
      • 0
        Здесь только Эпл. Формы и пропорции запатентованы.
        На самом деле я не против эпл. Есть много рекомендаций по выбору объектов для отображение сущности. К примеру посмотрите на рекламу топ брендов: если есть люди — то они разных национальностей и полов; если рекламируется моющее средство для машин — то машины будут разных брендов; в документации по никиевской кросс-платформенной библиотеке на ряду с нокией будут другие брэнды; в модельном бизнесе уводят взгляд с красивого лица одной модели на предмет. Вокруг много подобных примеров.
        Этот подход не случаен, он подтвержден многими исследованиями (4,5,8 линк).
        Что мешает автору как и читателях вспоминать о этом в других статьях?
  • 0
    Кстати, первый сервис на самом деле достаточно полезен, т. к. легко позволяет сделать скриншот дизайна.
  • +1
    повтор
    • 0
      Покажите ссылку. Уберу в черновики.
      • 0
        Топик в порядке. Это я коммент написал о том, что уже было выше.
  • 0
    А мне данные сервисы сейчас оказались как раз кстати. Размер экрана можно действительно менять через плагин в браузере. А вот показать варианты отображения сайта клиенту, удобно через один из этих сервисов.
  • 0
    «Устройства и доступные расширения разрешения экранов»
    Исправьте, пожалуйста.
    • 0
      Готово. Спасибо.
  • 0
    Бедные верстальщики от сохи не умеющие запрограммировать пару строк кода. Давно все придумано. PhantomJS.
  • 0
    У Chrome отличный инструментарий: Settings → Overrides.
    Можно менять не только разрешения и User Agent, но и ориентацию девайса с геолокацией.

    А вообще, самое достоверное тестирование — это иметь на руках девайс.

    В тему, вот интересный пример студии Envato.
  • 0
  • 0
    Я один использую соответствующие SDK? Всегда казалось, что все эти полумеры, типа всяких ietester, browsershots, а теперь вот переключателей размеров окна браузера — это барахло?
    • 0
      Никто ж не говорит, что это панацея. Предложенные варианты, очевидно, что не для профи.
      А вы пожалуйста поделитесь, какие средства разработки вы используете.
      • 0
        Банально android и iOS SDK. Андроид есть под win, ios в свое время работал на виртуалке, только нужен довольно шустрый компьютер и много памяти.
  • 0
    Я провиряю сервисом codecanyon.net или же функциями гугла www.google.com/webmasters/tools/mobile-friendly/?url=. Вот хорошый пример как он будет отображатся видно на этом сайте http://papigutto.com.ua/
  • 0
    Наткнулся случайно на сервис http://quirktools.com/screenfly/, очень удобный, и кастомные разрешение можно делать и много видов устройств.

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