[Инструкция] Как просмотреть как выглядит сайт с разных браузеров не устанавливая их

[Serberg]

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

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

Browsercam - это доволно мощный сервис так же делает скриншоты, имеет еще больше настроек чем сервис Browsershots, позволяет работать сразу с несколькими сайтами (страницами), задавать временной интервал снятия скриншотов а так же Вы можете задать параметры вывода скриншотов. Жаль что сервис является платным, но его можно опробоваться в течении 24 часов в бесплатном тестовом режиме.

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

IE NetRenderer - довольно своеобразный сервис который позволяет снимать частично страницу Вашего сайта через браузер Internet Explorer версий 5.5, 6.0 и 7.0. Настроек у сервиса никаких, зато работает очень быстро. Рекомендую к эксплуатации.

[Lifeline]

Скрины не помешали б.

[Ghost]

Нашел статью которая отображает как целесообразно проверять свой сайт на качество.
На что влияет качество сайта

Это, в первую очередь, стоимость его поддержки и развития. Сайт, сделанный грамотно и по всем стандартам, гораздо проще развивать, поскольку времени написание дополнительного кода при наличии хорошей, стандартной базы уходит значительно меньше. Это и масштабируемость проекта, когда разработчики предусматривают большой «запас прочности» для ежедневных посещений, и в пиковые часы сайт будет работать в штатном режиме, не требуя дополнительного масштабирования.
Скорость создания HTML-страниц и общее время загрузки очень сильно влияет на доступность сайта. Ключевым параметром здесь является «загрузка за 4 секунды» и более быстрая загрузка, чем у основных конкурентов. В отсутствии основных преимуществ на рынках с высокой конкуренцией скорость работы сайта может оказаться решающим фактором при принятии решения.
Сейчас на рынке существует несколько решений, позволяющий автоматизировать ускорение сайта на клиентской уровне. Для ASP.NET — это GetRPO.com, для систем на базе PHP — это Web Optimizer.
Ключевые моменты оценки качества веб-проектов

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

• Совместимость сайта с браузерами.
• Соответствие стандартам.
• Семантика HTML-кода.
• Доступность сайта для пользователей.
• Скорость работы на стороне сервера.
• Скорость работы на стороне браузера.

Как все это проверить за 10 минут? Читайте далее.
Кроссбраузерность сайта

Проверяем с помощью www.browsershots.org. Выбираем наиболее распространенные браузеры для целевой аудитории (Internet Explroer 6, 7 и 8, Firefox 2 и 3, Opera 9 и 10, Safari 3, Chrome 1). Получаем пару десятков изображений главной страницы сайта, и уже по ней оцениваем качество верстки: насколько она соответствует начальному дизайн-макету.
Соответствие стандартам

Обычно при разработке в соответствии со стандартами уменьшается время на поддержку и развития такого сайта и увеличивается его доступность для пользователей. Какие стандарты стоит проверять?
Проверяем с помощью HTML-валидатора: validator.w3.org, на самом деле нам достаточно, чтобы было не более 25 ошибок на странице. Рекомендуется проверять несколько типичных страниц для устранения наиболее очевидных недочетов.
Соответствие стандартам доступности: WCAG. Проверяем с помощью www.contentquality.com, достаточно соответствия первому уровню (A, WCAG Priority 1).
Доступность и семантика кода

Отключение стилей и JavaScript в браузере позволит «увидеть» сайт таким, как он «выглядит» для поисковых и других роботов. В Firefox это можно сделать с помощью Web Developer Toolbar. В других браузерах — в настройках отключения скриптов и с помощью:
javascript:document.getElementsByTagName('head')[0].innerHTML='';void(0);
Запуск этой адреса в браузере устранит большую (или же все) стили со страницы.
Дополнительно страница с отключенными стилями позволит проверить, насколько семантически верен HTML-код. Если содержание на странице остается понятным для пользователя, если ключевые элементы взаимодействия по-прежнему доступны — то можно считать, что страница сверстана семантически верно. Иначе нужно устранять найденные недочеты (например, отсутствующее меню или форму входа). Не стоит искать у страницы с отключенными стилями полного соответствия дизайн-макету — его и не должно быть. Но содержимое такой страницы должно быть приятно для глаза и доступно для использования. Это основное правило.
Скорость работы сайта

Очень часто скорость работы оказывает ключевое влияние на конвертация посетителей в доход сайта. Особенно это характерно для интернет-магазинов. Как мы можем проверить эту скорость? Для серверной стороны существует инструмент host-tracker.com, с помощью которого можно установить характерное время доступа к сайту из различных точек земного шара. Также он позволяет оценить характерное время создания страницы на сервере (если минимальное время доступа к сайту больше 1с, то уже стоит бить тревогу).
Для проверки отказоустойчивости сайта стоит воспользоваться сервисом Load Impact. Бесплатный анализ позволяет проверить до 50 одновременных посещений (каждое из которых может открывать несколько десятков страниц на сайте). Основным показателем устойчивости сайта к нагрузкам будет вид кривой, который получится после проведения теста. Если график ровный или время открытия страницы несколько падает при росте посещаемости — значит, с сайтом все нормально. Если нет, то нужно принимать решение об оптимальном потоке посетителей, которых сайт сможет обслужить.

Для проверки качества скорости загрузки клиентской составляющей можно воспользоваться либо YSlow под Firebug для Firefox (оценка должна быть не менее 80, лучше всего не менее 90). Или же бесплатным инструментом webo.in (простая оценка не ниже 70, лучше не ниже 80).
Оригинал статьи: http://webo.in/articles/site2009/website-quality/

[Ghost]

Еще несколько сервисов для проверки сайтов.
Сервис ViewLike.us
Если развернуть название, то оно будет звучать так: "Смотри, как будет смотреться твой сайт в разных мониторах и устройствах".
Одним словом сервис показывает как сайт выглядит на разных мониторах.
2. Сервис MyFonts
Второй сервис будет полезен тем, кто любит использовать различные шрифты в оформлении своих сайтов.
Когда Вы видите какое-то красивое оформление того или иного элемента, но не знаете, что за шрифт был использован в этом случае, то Вы можете взять это изображение и "скормить" его сервису.

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

Сервис работает в два этапа.

1. Вы загружаете изображение или даете на него ссылку и жмете кнопку "Continue".

2. Сервис пытается определить, какая фраза была на изображении и выдает Вам свой вариант. Если в представленном варианте есть ошибки, Вам надо их исправить и снова нажать "Continue". На следующем экране Вы увидите результаты в виде списка шрифтов, максимально похожих на искомый.
3. Сервис TYPETESTER

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

Все, что Вам нужно сделать, это в поле "Sample text" ввести текст, который Вы хотите протестировать, и настроить все варианты, которые Вам нужны.

Например, можно в первом варианте поставить шрифт Verdana, во втором Tahoma, а в третьем Arial и, что называется, почувствовать разницу.

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

[EvilVirus]

Здравствуйте.

Во-первых - огромное спасибо за полезные ссылки. Меня уже "прогнали" с http://browsershots.org (я запросил слишком много сайтов) – а тут, оказывается, не только они умеют сайты рендерить.

У меня есть проблема, решить которую я так и не смог.
Я для своей программы создал сайт, простенький, на пределе моих возможностей в области Web-дизайна -

Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 1 сообщение(ий)):

У вас нет прав чтобы видеть скрытый текст, содержащейся здесь.

Это не первый мой сайт, вроде всё должно работать, но ребята из процессинговых компаний не хотят со мной сотрудничать - пишут, мол, "у вас картинки не грузятся, да и ссылки битые".
Я не могу понять, в чём проблема? В ИЕ и в хроме – всё грузится, всё работает. Предложенные вами сервисы тоже показывают правильные скриншоты, но вот на browsershots.org – все браузеры, кроме виндючих, показывают только тексты и без картинок.

Это был вопль отчаяния (слабый такой), а теперь, собственно, вопрос по сути: как в данном случае, когда мне пользователи из США говорят, что "картинки не видно, ссылки битые" выявить проблему?