Тестируем дизайн сайта в разных браузерах

Кросс-браузерная совместимость — одна из самых сложных задач, которые приходится решать при создании сайта. Следование стандартам не гарантирует единообразного вида и поведения вашего сайта в разных браузерах, особенно много проблем доставляют более старые из них. Вид только что сделанного нарядного сайта в каком-нибудь IE 5 может многих повергнуть в шок. Не обязательно добиваться 100% идентичности картинки и функций во всех браузерах, известных миру, но надо хотя бы приложить усилия для того, чтобы большинство посетителей смогли банально воспользоваться вашим сайтом.

Зачем тестировать дизайн в разных браузерах?

Суть проблемы в том, что разные браузеры (а их много), разные поколения (версии) одного и того же браузера, один и тот же браузер на разных операционных системах ведут себя по разному — выдают различные картинки. Размеры и пропорции шрифтов на Windows и на Mac будут разными, Firefox на Windows и он же на Linux будут отображать страницу по-разному. От этого никуда не деться, это надо знать и учитывать.

Вот как распределены браузеры среди посетителей одного нашего сайта.

Google Analytics Browsers

Преобладают различные версии Internet Explorer, среди них практически поровну версий 6 и 7, немного 8 и почти нет версии 5 (4 посетителя за полгода). Даже эти 3 самые популярные версии отличаются достаточно кардинально, чтобы это могло разрушить ваш тщательно выверенный дизайн. Невозможно держать в уме все критические различия между разными версиями Internet Explorer, их отличия от более дружелюбных к стандартам Firefox и Safari — необходимо тестирование.

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

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

На помощь приходят разнообразные удаленные сервисы, позволяющие протестировать ваш сайт. Что они позволяют:

— Увидеть ваш сайт в разных браузерах (Mozilla, Internet Explorer, Opera, Safari, мобильные браузеры)

— Увидеть ваш сайт при различных разрешениях экрана (640×480, 800×600, 1024×768, 1200×800)

— Увидеть ваш сайт с разных операционных систем (Mac OS, Linux, Windows)

Вы можете вносить изменения и постоянно проверять эффект от поправок, постепенно продвигаясь к цели.

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

Adobe BrowserLab

Свежий сервис, находящийся в стадии закрытого тестирования. Пока бесплатный, но зарегистрироваться не дают.

Adobe BrowserLab

Adobe компания солидная, поэтому можно ожидать качественный продукт. Но по той же причине я сомневаюсь в его бесплатности после релиза. Для работы требуется Firefox (2.x или 3.x), IE (6.x или 7.x) или Safari 3.x (Mac OS). Существует также расширение для интеграции в программу Adobe Dreamweaver CS4.

IE много не бывает

Существуют многочисленные решения сторонних разработчиков, позволяющие устанавливать и запускать несколько версий Internet Explorer на одном компьютере, либо достоверно эмулирующие поведение разных версий. Мы пользуемся программой IETester, продукт не без глюков, но вполне рабочий. Работает на Windows XP и Vista.

Тест браузера в браузере

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

SeaMonkey Windows XP

Сервисы в основном платные, но некоторые предоставляют кое-какие возможности и без оплаты. Для затравки назову BrowserShots, IE NetRenderer и Litmus, у которых есть бесплатные версии.