Как правильно смотреть мобильные лендинги?

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

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

Как можно тестировать:

  • Можно прикинуться мобильником и поменять разрешение. Не подходит для сложных случаев.
  • Можно пользоваться сервисами. Тот же способ, что и первый. За исключением одного сервиса, но об этом ниже.
  • Эмуляторы. Если нет железок (а всех железок обычно нет), то идеальный способ.
  • Железки. Идеальный вариант, но нужны железки.

Прикинуться мобильником

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

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

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

Сервисы

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

Единственный сервис, который я смог найти и который оказался на самом деле полезным — это http://www.keynotedeviceanywhere.com/. Сервис позволяет удаленно арендовать устройство и открывать на нем нужные сайты. Есть бесплатная версия с несколькими трубками, но без планшетов.

Эмуляторы

android_logo_resize-237x300-8336113Вполне адекватное решение, показывает очень близкий к железкам результат, позволяет воспроизводить специфичные для железа баги.

Бывают следующие:

  • Android:
    • Android SDK — в общем-то ок, но оооочень медленно. Лучше использовать альтернативные.
    • Android-x86 — быстрая альтернатива, ставится на VirtualBox
    • Genymotion — еще один быстрый эмулятор. У кого что приживется.
  • Windows Phone 7 — тут все просто, ставим Microsoft WebMatrix, там есть адекватная эмуляция, все заводится из коробки.
  • iOS — никаких альтернатив, кроме Xcode я не нашел. Все работает, все специфичные для железа баги воспроизводятся. Нужен Mac OS X. Может быть как-то можно поставить на Windows, не знаю, не пробовал.

Еще есть ряд каких-то совсем левых эмуляторов. Но смысл их существования мне не ясен. Все они используют свои движки и реальную картину не отражают.

Железки

Самый правильный вариант.

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

Я рекомендую под рукой держать пару Android-телефонов (2.2 и 4.0), планшет на Android, iPad и iPhone. Может понадобиться не только для тестирования, но и для мониторинга конкурентов.