Как проверить отображение сайта в разных браузерах, да ещё и с разными размерами экранов — онлайн

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

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

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

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

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

Давайте посмотрим, что же это за браузеры:

- Opera этим браузером я пользуюсь чаще всего, мне нравится его дизайн, интерфейс и главное мне нравится его простота. Кстати я уже упоминал о нём в своей статье: SEO плагины для браузеров

Скачать Oper’у вы сможете с официального сайта: Ru.opera.com.

- Google Chrome «Google говна не делает», этот браузер я использую реже, чем браузер Opera, но это не значит, что я считаю его плохим. Просто он не удовлетворяет некоторым моим требованиям.

Скачать Google Chrome вы сможете с официального сайта: Google.ru/chrome.

- Mozilla Firefox данный браузер я скачал только для того, чтобы проверять, как же мой сайт в нём отображается. Но всё-таки Mozilla Firefox очень популярен, так что пренебрегать им я не стал.

Скачать Mozilla Firefox вы сможете с официального сайта: Mozilla-russia.org.

- Internet Explorer тут я даже ничего говорить не буду.

После того как я изменил что-то в дизайне, я открываю все эти браузеры и начинаю проверять всё ли в порядке. Если в каком, либо браузере что-то не так, я начинаю переделывать код шаблона. А затем заново проверяю, и так до победного конца.

Но есть ещё один важный пункт. И этот пункт – размер экрана.

Разумеется, покупать несколько мониторов я не собирался, и нужно было искать выход из этой ситуации.
Вот тут то я и нашёл сервис BrowserShots.org, о котором сейчас пойдёт речь.

Сервис BrowserShots.org поможет вам проверить отображение сайта в разных браузерах, плюс ко всему вы можете выбрать различные размеры экранов.
Но обо всём по порядку.
Попав на главную страницу сайта, вы увидите список операционных систем, а так же список браузеров.
Рекомендую вам, опустится в самый низ сайта и выбрать пункт «Отметить все»:

Теперь вы можете выбрать дополнительные характеристики, лично я поставил везде «Неважно», так как пока что мне это было действительно – неважно.

После того как вы решите какие настройки вам нужны, необходимо будет ввести URL своего сайта и нажать на кнопку «Отправить»:

После этого вы попадёте на страницу следующего содержания:

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

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

Хотя я решил эту проблему несколько иначе:
Я скачал программу «Кликер», и сделал, так чтобы каждые 10 минут программа кликала по кнопочке.

После того как создание скриншотов успешно закончилось я получил небольшое сообщение:

А сразу под ним был список скриншотов. Проанализировав эти скриншоты, я выявил основные ошибки в вёрстке дизайна, самая частая ошибка была следующей:

Нужно будет в ближайшее время её откорректировать…
Кстати: у вас такого сдвига нет?

В общем если вам нужно проверить результаты вашей работы над каким-либо элементом дизайна, или над всем сайтом в целом то вам нужно сделать следующее:

- скачать на свой компьютер самые популярные браузеры
- иметь в icq пару друзей с размерами экранов отличающимися от вашего
- воспользоваться сервисом BrowserShots.org

И тогда всё будет идеально, ровно и круто.
Всегда ваш Мудрый Кот.

А на последок просто мега-офигительное видео «Путешествие на игрушечных джипах»!