Проверка отображения сайта в браузерах

Проверка отображения сайта в браузерах

Ох, и с какими же трудностями приходится сталкиваться при разработке грамотного сайта! Самое ужасное для каждого веб-мастера это ликвидировать разницу в отображениях при использовании разных браузеров. Да, война браузеров идет до сих пор, конечно нынешние положение вещей достаточно неплохое, вроде все стараются одинаково отображать страницу, что не может не радовать, но в то же время мы с вами понимаем, что далеко не все используют последние версии браузеров. Ведь многие в этом несовершенном мире все еще юзают Internet Explorer. А когда начинаешь смотреть в статистике с какой версии IE заходили пользователи и среди цифр 8 и 9 ты видишь 5.5, то это удручает. Так что довольно актуально проверять свои сайты во всех браузерах.

Что бы не терять трафик и угодить каждому пользователю, необходимо контролировать отображение сайта во всех браузерах, даже в самых древних. Лучше всего, конечно, установить у себя на машине все основные браузеры и контролировать напрямую через них, тем более почти у каждого браузера есть stand-alone версия (автономная, локальная версия браузера). Но это может быть сопряжено с рядом трудностей и неудобств, которые будут влиять на скорость разработки:

Не очень удобно иметь много браузеров на одной машине и тыкаться в каждом отдельно. Тем более если Вы хотите проверить отображение сайта во всех версиях браузера Opera или Firefox.

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

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

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

Browsershots | бесплатно

По-моему убеждению это самый удобный сервис для проверки сайта как на самых популярных браузерах (Firefox, Opera, IE, Safari) так и на достаточно редких (Galeon, Epiphany, Konqueror, Seamonkey, Dillo, Flock), которые используют единицы. Сервис обладает удобным многоязычным интерфейсом (русский так же присутствует, что не может не радовать). Он имеет достаточно много настроек, для подобного вида сервисов: выбор браузеров, размер экрана (640 – 1680), глубину цвета (8 – 32 бит), а также использование технологий JavaScript, Java и Flash, помимо всего этого установленные настройки можно сохранить как свой шаблон, если зарегистрируетесь.

Недостатком этого сервиса является, то что ваш сайт обрабатывается в порядке очереди, поэтому свои скриншоты можно увидеть лишь спустя некоторое время (до четырёх часов, но как правило быстрее) все запрашиваемые скриншоты будут представлены в соответствующем разделе сервиса и доступны для загрузки в виде архива ZIP.

IE Web Renderer | бесплатно

Для тех у кого часто бывают проблемы при разработке с IE (а это почти все) существует этот сервис позволяет проверить, как Ваш сайт отображается в браузерах семейства Internet Explorer начиная с версии 5.5 и заканчивая 9 версией. На первый взгляд этот ресурс не чем не выделяется, почти не имеет настроек, необходимо просто указать желаемый браузер и адрес сайта и достаточно быстро (секунд за 10-20) система отобразит скриншот. Но очень интересной особенностью этого ресурса является возможность посмотреть совокупный и разрозненный вид на браузерах IE6 и IE7 сразу и обнаружить разницу в отображении вашего сайта на этих браузерах. Это получается при помощи накладывания скриншотов одного на другой, как слои в фотошопе. Именно эта возможность придает пикантность ресурсу, которая может порадовать пользователя.

Adobe BrowserLab | бесплатно

Этот сервис генерирует скриншоты сайта с точки зрения различных браузеров: Firefox 3.0 на Windows XP и OS X, Internet Explorer 7.0 на Windows XP и Safari 3.0 на OS X. В любой момент можно изменить, какие браузеры необходимо применять при проверке сайта в Browser Sets. Еще одна приятная особенность этого сервиса заключается в двойном просмотре, который позволяет сравнить друг с другом вид сайта в разных браузерах. Правда, для использования этого сервиса необходимо иметь активную учетную запись с Adobe.

Spoon Browser Sandbox | бесплатно

Очень хороший и быстрый инструмент, который позволит сравнивать отображения сайта в нескольких браузерах. Поддерживаемые браузеры этого сервиса Safari, Chrome, IE, Firefox в том числе и мобильные версии. Для каждого браузера доступны все его версии. Для работы сервиса необходимо будет скачать плагин, который нужно будет установить, но это позволяет контролировать отображение сайта на локальной машине без доступа в Интернет. Для работы с этим сервисом необходимо будет создать бесплатный аккаунт.

Litmus | бесплатно/платно

Данный сервис является частично бесплатным, но обязательным к регистрации, что немного огорчает. Частично бесплатно значит при регистрации «за бесплатно» Вы сможете сделать только скриншоты с 23 браузеров всего 50 раз в месяц. Но в общем и целом этот ресурс обладает хорошими возможностями. Помимо предоставления скриншотов, он занимается проверкой валидности html и css кода. Производство скриншотов достаточно быстрое. Так же имеется возможность скачать архив со сделанными скриншотами. И кроме того, имеется возможность сделать скриншоты вашей e-mail рассылки. В общем ресурс не лишен своего шарма, но было бы лучше конечно, если бы он был полностью бесплатен.

SuperPreview | бесплатно/платно

Это конечно не совсем сервис, а программа которую нужно скачивать, но все же для полноты картины я расскажу и про нее. Microsoft разработал эту десктопную программу как раз для проверки отображения сайтов. Она позволяет оптимизировать дизайн для различных платформ IE. В ней присутствуют все необходимые для проверки версии Internet Explorer.

Программа позволит производить сравнение бок о бок различных отображений, а также накладывать одно отображение на другое для контроля мелких различий. Различные линейки, направляющие и другие тулзы облегчат разработку и подгонку дизайна. И в отличии от других вариантов тестирования дизайна, SuperPreview позволяет тестировать сайт прямо при разработке еще на локальном компьютере. Так что довольно перспективный инструмент. Но бесплатна она всего 60 дней, пока идет триальный период, а дальше придется заплатить.

Cross Browser Testing | платно

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


Карта сайта


Информационный сайт Webavtocat.ru