Браузеры в браузере

Браузеры в браузере

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

Стоит отметить, что с уменьшением доли использования устаревших версий браузеров, безусловно, верстать сайты стало легче. На смену пришли более W3C-соответствующие собратья. Казалось бы, достаточно сделать верстку, которая полностью соответствует стандартам, и проблема будет решена, но не тут-то было. Браузеры имеют разные движки, что может влиять на отображение разметки. А это в свою очередь разнообразный рендеринг шрифтов, отображение дробных значений «пикселей» и прочее. Помимо этого, отображение шаблона может зависеть и от операционных систем, и даже их версий. И в довершении всего рынок мобильных устройств развивается намного стремительнее, чем рынок десктопов. Учитывать нужно всё. Какое же должно быть рабочее окружение, чтобы сделать или проверить верстку сайта? Было бы идеально иметь все версии ОС с необходимыми браузерами. Для этого можно развернуть на компьютере виртуальную машину, установить все операционные системы, нужные браузеры, эмуляторы для мобильных устройств. Для отдельно взятого разработчика это не очень сложно, один раз потратить время на настройку, а потом пользоваться. Сомнения вызывает только, будет ли этот установленный набор полным. Трудности также могут возникнуть у менеджеров, которые принимают и проверяют информацию по багам, или тестировщиков, которые необязательно должны знать и уметь работать в таком окружении. Кроме того, всем рано или поздно придется столкнуться с тем, что отдельные эмуляторы не могут дать 100% воспроизводимости отдельных ошибок верстки. Примерно год назад на глаза мне попалась статья с подробным обзором вариантов тестирования верстки на кроссбраузерность. В ней в частности предлагается использовать для тестирования сервис BrowserStack.com. За умеренную плату пользователи получают в своем браузере, пожалуй, все браузеры под десктопы и мобильные устройства.
Перечень платформ и браузеров, доступных для тестирования
У этого сервиса, безусловно, есть аналоги, но его интерфейс показался нам очень удобным для взаимодействия. Сначала его использовали только frontend-разработчики, но вот уже полгода BrowserStack помогает всем: менеджерам, тестировщикам и даже программистам.
Интерфейс сервиса тестирования
Возможности сервиса описаны в этой статье и на сайте самого сервиса, а я хотел бы остановиться подробнее только на тех функциях, которыми мы пользуемся чаще всего в отдельных случаях.

Возможность отловить неуловимый баг

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

Массовые автоматические скриншоты

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

Возможность проверить работу эмулятора или починить баг в виртуалке

Конечно же, мы пользуемся в процессе работы не только BrowserStack, но и, например, встроенными режимами эмуляции в браузерах. Эмуляторы работают быстрее (не надо запускать виртуальную машину), но баги в них воспроизводятся не всегда, как я уже упоминал выше. Поэтому мы часто используем BrowserStack просто для проверки эмулятора. Если верстка в обоих местах выглядит одинаково, то можно спокойно использовать режим эмуляции. Если же верстка не совпадает, то можно провести отладку прямо на виртуальной машине с нужной средой. BrowserStack предоставляет браузеры с предустановленными панелями разработчиков (dev tools).

Локальное тестирование

Мы пользуемся этой функцией в проектах, к которым нет доступа по сети. Можно просто указать директорию и файлы для тестирования. Сервис сам создает виртуальный хостинг и отображает шаблон. Также можно просто указать ссылку на свой локальный сервер, если он есть. Функция локального тестирования полезна для верстки новых проектов.
Окно настроек для локального тестирования
При всех преимуществах сервиса стоит учитывать, что он все-таки платный. Однако, система тарифов достаточно гибкая. Вам не придется платить сотни долларов, если сервисом будут пользоваться всего 3 человека, но при выборе младших тарифов вы получите функционал с ограничениями. Мы долго выбирали инструмент, который подошел бы всем сотрудникам Студии, участвующим в процессе. Мы довольны и можем порекомендовать BrowserStack коллегам и клиентам в качестве полезного решения некоторых проблем. Если у кого-то есть на примете более функциональный и удобный сервис для тестирования, мы будем рады его рассмотреть в качестве альтернативы. Пишите. P.S. Данная статья не является рекламой. Команда BrowserStack нам ничего не платила :)



  • Как самостоятельно настроить учет данных о рекламных расходах в Google Analytics с точностью до копейки

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

    Мы в своих проектах такой учет ведем. И сегодня генеральный директор агентства интернет-маркетинга «Топ Спот», входящего в нашу группу компаний, Дмитрий Губанов написал специально для vc.ru колонку с практическими советами о том, как автоматизировать учет данных о рекламных расходах в Google Analytics.

  • Итоги уходящего года

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

  • Как победить в схватке за кадры с лидерами индустрии?

    Издание Cossa.Ru опубликовало статью Валерия Комягина о том, как противостоять хантингу со стороны IT-гигантов. В издании вышла редакционная версия материала. Мы, в свою очередь, публикуем «режиссерскую версию» текста, не подверженную цензуре.

  • Мы в десятке лучших разработчиков интернет-магазинов Москвы

    Мы в десятке лучших разработчиков интернет-магазинов Москвы

  • Перестаньте делать обычные сайты. Адаптив — это не страшно

    Перестаньте делать обычные сайты. Адаптив — это не страшно

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

  • Тэглайн 2015: +22 позиции в рейтинге ведущих digital production России

    Тэглайн 2015: +22 позиции в рейтинге ведущих digital production России

    Крупнейшее аналитическое агентство Тэглайн опубликовало рейтинг ведущих разработчиков Рунета. В этому году мы поднялись сразу на 22 позиции и заняли итоговое 71 место.

  • Презентация к докладу «Ключевые показатели digital-производства»

    Все говорят, что в студийном бизнесе важно следить за показателями эффективности. Но никто не говорит, за какими именно. На РИФ+КИБ 2015 мы рассказали о личном опыте внедрения базового управленческого учета. Публикуем презентацию к этом докладу.

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

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

  • Сказ о том, как старый год провожали

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

  • Как это было: новый логотип и фирменный стиль Студии

    Как это было: новый логотип и фирменный стиль Студии

    В этом году Студии исполнилось 15 лет. Всё это время мы прожили с логотипом, придуманным в 2002 году первым арт-директором и совладельцем компании Олегом Нагурским. Настало время его поменять.

  • Третий лишний?

    Третий лишний?

    Рассказ о том, как сделать интеграцию со сторонними сервисами менее болезненной.

  • Срочно... в вёрстку!

    Срочно... в вёрстку!

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

  • Стратегическое партнёрство с Caparol

    2014 год для нашей компании становится знаковым сразу по нескольким причинам. В этом году Студии исполнилось 15 лет. Для веб-разработчика, с учётом молодости самой индустрии, это солидный возраст. Когда мы начинали в 1999 году, Рунету было всего 5 лет, а веб-студий по стране насчитывалось не больше сотни.

  • Интервью SeoPult

    Интервью SeoPult

    25 сентября состоялись съемки интервью Вaлерия Комягина для SeoPult.TV. Публикуем видеозапись передачи.

  • Еженедельные планерки...

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

  • Как выбрать подрядчика для создания сайта? Часть 2

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

  • «Цель» Элияху Голдратта

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

  • Как выбрать подрядчика для создания сайта? Часть 1

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

  • Первый опыт на Yii

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

  • Мобильное приложение хоккейного клуба «Динамо» доступно в App Store

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

  • V Russian Digital Week, день первый

    В эти дни в Digital October проходит мероприятие под названием «V Russian Digital Week», которое, как написано на сайте мероприятия, «определяет вектор развития российской digital-индустрии на ближайшие годы». Мы почитали темы докладов, подумали и решили съездить в качестве слушателей. Первый день под названием «digital&design» был посвящен, собственно, digital и дизайну.

  • Сайт коллекционного журнала «WinX Club — Волшебная комната»

    Вчера вышел наш новый проект — сайт коллекционного журнала «WinX Club — Волшебная комната». Проект получился маленький, но аккуратный. Примечательно то, что собран он был в рекордные просто сроки даже с учетом необходимости согласования материалов не только с представителями заказчика — наших старых друзей из издательства «Эгмонт-Россия», но и с представителями правообладателя — итальянской компанией Rainbow S.r.I. Собственно, не без удовольствия и гордости, представляем вашему вниманию проект. Будем рады критике, похвалам, восторженным возгласам ... Тухлым помидорам рады, конечно же, не будем, но обещаем воспринять, как это положено настоящим профессионалам... с гневной истерикой :-)

  • Еженедельные планерки...

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