Лучшие бесплатные инструменты для кроссбраузерного тестирования. Проверка сайта на браузеры

Онлайн инструменты для проверки кроссбраузерности | Ресурсы

26 июня 2010

Когда дело доходит до изучения просторов глобальной сети, у пользователей интернета есть весьма широкий выбор браузеров («просмотровщиков»). Наша обязанность, как дизайнеров и разработчиков веб-сайтов — обеспечить совместимость сайта со всеми видами браузеров, иными словами обеспечить кроссбраузерность сайта.

Но сразу возникает вопрос — какие браузеры используют пользователи? Сейчас самыми популярными «просмотровщиками» веб-страниц являются Internet Explorer 7 и 8, Mozilla Firefox, Google Chrome и Opera. Однако для каждого вида сайта, в зависимости от того к какой тематике он относится, процент посетителей с разными браузерами может сильно варьироваться. Поэтому, довольно часто, разработчики определяются, с какой аудиторией им предстоит работать и в зависимость от результатов «подготавливают» сайт только под определенные виды браузеров.

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

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

Browsershots — это самый популярный сервис для тестирования кроссбраузерности. Он делает скриншоты вашего сайта практически во всех видах браузеров. Благодаря тонкой настройке можно выбрать как виды движков (WebKit или Gecko), так и виды операционных систем (Linux, Windows, Mac OS X или BSD). Так же в настройках есть выбор разрешения экрана, присутствие установленного javascript, flash, java и другие виды параметров.

Благодаря этому онлайн инструменту можно бесплатно проверить кроссбраузерность сайта во всех версиях Internet Explorer (версии 5.5, 6, 7, 8, а так же 7-6 Mixed и 7-6 Difference). Из функционала стоит выделить отображение времени обработки и ограничение размера экрана в 1024px.

С помощью этого сервиса вы можете запускать страницы в разных браузерах, таких как IE, Firefox, Safari, Chrome и Opera непосредственно из своего браузера. Единственное отличие от других сервисов в обзоре — необходимость установки небольшого дополнения, которое обеспечивает дальнейшее тестирование.

Browsrcamp позволяет проверить совместимость вашего сайта с браузерами в Mac OS X. Бесплатная версия позволяет проверить сайт только в Safari 3.1.2. Но при оплате подписки можно будет тестировать сайт в 12 различных браузерах, которые могут быть установлены на этой OC. Полный список браузеров, как и стоимость подписки, можно найти на страницах сервиса.

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

Платный онлайн сервис предназначенный для тестирования сайта в целом, а не только для проверки кроссбраузерности сайта. Большой набор всевозможных функций и настроек делает Browsera мощным средством для отладки веб-сайта. Из возможностей отметим: анализатор ошибок сценариев на JavaScript; возможность тестирования всего сайта, а не только отдельных страниц; тестирование страниц с динамическим содержанием. У сервиса есть бесплатно-тестовая версия, которая позволяет отлаживать не более 25 страниц в месяц, а так же бесплатный 30-дневный пробный период.

Еще один платный сервис с большим количеством разнообразных функций, как мелких и довольно специфичных, так и крупных и очень полезных (чего стоит только возможность тестирования сайта на мобильных устройствах с Windows Mobile, Symbian или iPhone). О полном списке возможностей и разнообразных «плюсов» можно прочитать на страницах сервиса.

А какими сервисами и инструментами пользуетесь вы когда тестируете кроссбраузерность сайта?

womtec.ru

Сервисы для тестирования сайта в разных браузерах

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

1. Browsershots (бесплатно/платно)

Browsershots — это веб-сервис, который делает скриншоты вашего сайта в разных операционных системах и браузерах ( всего доступно 65 браузеров). Это удобный, хоть и довольно медленный способ проверить свой сайт сразу во многих браузерах. Когда вы вводите адрес вашего сайта в строку для проверки, он ставится в очередь на тестирование. После этого скриншоты будут появляться на итоговой странице по очереди. Это может занять от 5 минут до 2 часов. В бесплатной версии все происходит довольно медленно. Кроме того, одна сессия (запрос) может длиться только 30 минут.

Следует обратить внимание, что данный сайт имеет многоязычный интерфейс (в том числе — русский и украинский.)

Однако, хоть данный сервис заявлен как бесплатный, в нем есть и платные услуги. За 29.95 у.е. в месяц вы получите так называемую «приоритетную обработку«: скриншоты будут появляться намного быстрее, чем в бесплатной версии, сможете получить от 30 до 50 скриншотов всего за 5 минут. Кроме того, ваши скриншоты будете видеть только вы, тогда как в бесплатной версии они в итоге выкладываются в общую ленту.

2. Adobe

До марта 2013 года у Adobe был отличный бесплатный сревис Adobe BrowserLab для тестирования сайта в разных браузерах и ситемах. Но теперь он закрыт и вместо этого представлен новый сервис Adobe Edge Inspect CC.+

Adobe Edge Inspect CC — это продукт, входящий в принципиально новую организацию Adobe продуктов — в облако Adobe Creative Cloud. Получить аккаунт в данном облаке можно по нескольким пакетам, все они платные. Средний стоит 49,99 у.е. в месяц. Бесплатно Adobe Creative Cloud можно попробовать 30 дней.

3. IE NetRenderer (бесплатно)

IE NetRenderer — бесплатный онлайн-сервис только для браузера Internet Explorer, который дает возможность проверить ваш сайт под браузером Internet Explorer версий: 9, 8, 7, 6, 5.5.

Тут все просто: вводите адрес своего сайта, выбираете версию IE и тут же получаете скриншот.

4. IE Tester (бесплатно)

IETester — это абсолютно бесплатное приложение только для браузера Internet Explorer, которое позволяет локально на вашем компьютере просматривать сайт в разных версиях Internet Exlporer (версии: 10, 9, 8, 7, 6, 5.5) под операционными системами Windows 7, Vista и XP.

Для этого нужно скачать IE Tester и установить у себя на компьютере.

5. BrowserСam (платно)

BrowserСam — очень мощный платный онлайн-сервис для тестирования сайтов под любым браузером и любой платформой. Одна из главных «фишек» данного сервиса в том, что на нем предоставляется удаленный доступ (через VNC) к компьютерам с уже установленными ОС и браузерами, в которых вы можете тестировать свой сайт. Кроме того есть такая важная опция как тестирование под iPhone OS, Android, Blackberry, Windows Mobile. Можно также тестировать е-мейлы на разных устройствах, что очень важно для рассылочных компаний.

Цены стартуют от 19,95 у.е. в день в зависимости от функционала.

6. CrossBrowserTesting (платно)

CrossBrowserTesting — также очень функциональный платный сервис, где вы можете проверить за несколько минут сайт в разных браузерах, в разных операционных системах, на разных устройствах (поддерживается более 100 вариантов проверок, в том числе тестирование под Android, iPad, iPhone ) .

Ценовая политика выгодней и гибче, чем у предыдущего сервиса BrowserСam: базовая цена стартует от 29.95 у.е. в неделю. Кроме того, дается бесплатный тестовый триальный период в 7 дней на каждый из трех пакетов, правда с несколько с ограниченной квотой, нежели в платной версии.

7. Litmus (платно/бесплатно)

Litmus — онлайн-сервис, который предоставляет возможность тестирования сайта на разных браузерах. Кроме предоставления скриншотов, заодно проверяет валидность html и css кода. Особенность его в том, что он в основном ориентирован на тестирование е-мейлов в разных браузерах и на разных устройствах. Есть возможность протестировать е-мейл в 30 разных почтовых клиентах и другие важные функции, такие как аналитика для е-мейлов.

Платная версия сервиса предполагает три пакета: базовый (49 у.е. в месяц), плюс (99 у.е. в месяц), премиум (299 у.е. в месяц.) Бесплатная триал-версия действует 7 дней.

8. СloudTesting (платно)

CloudTesting — платный онлайн-сервис, который предоставляет возможность функционального тестирования кроссбраузерности сайта. Вы записываете сценарий поведения пользователя с вашим браузером и Selenium IDE, загружаете его, после чего Cloud Testing будет выполнять этот сценарий в нескольких браузерах и операционных системах. Затем он предоставляет скриншоты.

Ценовая политика стартует от 99 у.е. в месяц.

9. Mogotest (платно)

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

Ценовая политика стартует от 15 у.е. в месяц для физических лиц. При этом есть возможность бесплатно тестировать выбранный пакет (триальная версия) 14 дней.

10. Multi-Browser Viewer (платно)

Multi-Browser Viewer — платное приложение, которое работает с десктопными и мобильными браузерами и включает в себя 26 виртуализируемых браузеров, 5 мобильных браузеров (в том числе iPhone и IPad) и 61 скриншот-браузер (с их помощью можно видеть, как визуализируются страницы, но нельзя видеть результат взаимодействия пользователя с сайтом).

Ценовая политика Multi-Browser Viewer составляет 139,95 у.е. за однопользовательскую лицензию и включает один год использования продуктов и обновлений. Кроме того доступна бесплатная триал-версия программы (14 дней).

11. Sauce Labs (бесплатно/платно)

Sauce Labs — онлайн сервис, который предоставляет доступ ко множеству браузеров в разных ОС и устанавливает соединение вашего браузера с настроенной виртуальной машиной.

Сервис предоставляет платные пакеты (цены стартуют от 49 у.е. в месяц ), кроме того, есть бесплатная квота на тестирование: 200 минут в месяц и позволяет создавать тесты автоматизированного тестирования в браузерах (используется Selenium).

12. Spoon (бесплатно)

Spoon — это онлайн-сервис эмуляции программ. Предоставляется бесплатная возможность запуска Firefox, Chrome, Opera и Safari для пользователей Windows. Доступны разные версии браузеров Firefox, Chrome, Safari, Opera. Технически, Spoon поддерживает виртуализацию IE, но эта возможность отключена по требованию Microsoft.

13. Browsera (бесплатно/платно)

Browsera — это онлайн-сервис, который обеспечивает автоматизацию тестирования кроссбраузерности. Он автоматически определяет различия в отображении страниц браузерами, тем самым упрощая процесс тестирования.

Бесплатная версия включает в себя довольно ограниченное число браузеров и низкое разрешение. Платные пакеты стартуют начиная от 39 у.е. за 14 дней и от 49 у.е. до 99 у.е. за месячную подписку.

spark.ru

Проверка кроссбраузерности сайта – обзор нескольких веб-сервисов

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

Ручная проверка

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

Далее можно попросить друзей и знакомых зайти на ваш сайт и прислать ваш скриншот. Для них это будет наверняка несложно. У кого-то стоит Opera, у другог — Mozilla, а третий вообще сидит на старом IE. Люди используют разные веб-обозреватели и если попросить их о небольшой услуге тестирования, то вы можете получить достаточно неплохой охват браузеров.

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

Где проверить кроссбраузерность

http://browsershots.org/ — многие называют этот сайт лучшим бесплатным сервисом для проверки кроссбраузерности. На главной странице сразу же видно множество различных браузеров и их версий. Нужно указать галочками нужные и отправить все это на анализ. Сколько можно ждать результатов? Очень долго, иногда более получаса.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Рис. 1. Сайт позволяет бесплатно получить скриншоты из множества веб-обозревателей.

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

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

http://crossbrowsertesting.com/ — особенность этого сервиса в том, что на нем нужно зарегистрироваться, прежде чем начинать тестирование. На самом деле в большинстве своем это платный сервис и им пользуются зарубежные веб-разработчики.

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

IETester – уже много раз я писал об этой программе, но в статье о проверке кроссбраузерности без нее просто никуда. Это бесплатная программа для windows. Скачав и установив ее можно свободно проверить внешний вид сайта в Internet Explorer 6-8.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Browserling.com – на этом сайте вы можете записаться в очередь, чтобы посмотреть на свой сайт в различных версиях IE, начиная от 5.5 и заканчивая 9. Есть возможность посмотреть и в других популярных веб-обозревателях. Как вы понимаете, желающих много и каждому дают всего 5 минут на тестирование.

Сервис хорош тем, что вы не просто видите скриншот, а можете покликать по веб-страничкам, действительно протестировав их. В общем, еще один неплохой бесплатный инструмент.

Multiple IE – это такой инструмент, который позволяет проверить шаблон в старейших версиях IE (3, 4, 5). Я не знаю, нужно ли это кому-то сегодня, но на всякий случай можно упомянуть и его.

Минусы использования веб-сервисов

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

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

Рис. 2. В crossbrowsertesting можно проверить сайт в более чем 900 браузерах!

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

webformyself.com

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

Вы можете просматривать сайт, используя последнюю версию Firefox, и он будет выглядеть удивительно. А после этого на сайт может зайти посетитель, использующий Internet Explorer 9, и ресурс не только будет выглядеть ужасно, но еще и не будет работать должным образом. Угадайте, что тогда произойдет? Вы потеряете посетителя. Поэтому кроссбраузерность так важна:

Для чего мне тестировать сайт на совместимость с разными браузерами?

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

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

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

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

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

Firefox, Internet Explorer, Safari, Chrome и Opera обычно можно без проблем загрузить и установить. Но если у вас нет такой возможности, то существует множество веб-инструментов, которые имитируют эти браузеры.

Например, BrowserStack, Ghostlab и CrossBrowserTesting, но их использование может обойтись в значительную сумму. К счастью, существуют бесплатные инструменты. Каждый из них предоставляет пользователям различные функции тестирования.

Browsershots

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

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

Spoon Browser Sandbox

Spoon предлагает более основательный вариант проверки кроссбраузерности. Для Chrome, Firefox, Internet Explorer, Opera и Safari можно выбрать точную версию, которую нужно протестировать.

Если вам нужно протестировать новейшие версии этих браузеров, то это бесплатно. Но если вы хотите проверить старые версии, за это взимается плата:

После выбора браузера он открывается в новом окне. Затем нужно ввести URL-адрес и протестировать страницу.

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

Viewlike.us

Viewlike.us позволяет просмотреть сайт при разных разрешениях. Это пригодится для тестирования внешнего вида сайта, а также даст ценную информацию, касающуюся адаптивности ресурса:

С помощью этого инструмента проверки кроссбраузерности сайта также можно оценить скорость и юзабилити тестируемого сайта. Если такие показатели, как размер изображений, размер элементов HTML и количество статических ресурсов нужны вам, значит и Viewlike.us будет полезен.

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

IE NetRenderer

IE NetRenderer показывает тестируемый сайт только в Internet Explorer, но зато позволяет выбрать версию от IE 5.5 до IE 11. Это еще один простой инструмент, который подходит только для тестирования внешнего вида сайта:

Browsera

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

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

Если на сайте будут обнаружены ошибки JavaScript, Browsera предоставит детальную информацию по ним, включая тип и версию браузера, страницы или элементы сайта, строку кода, содержащую ошибку, ее описание. Например, «недопустимое значение свойства«:

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

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

Инструмент определения кроссбраузерности сайта предоставляет для одного пользователя возможность тестирования до 25 страниц. Оно включает в себя обнаружение проблем, сканирование сайта и поиск ошибок JavaScript. Конечно, платные тарифы предлагают больше возможностей и опций.

Какой из инструментов использовать?

Spoon Browser Sandbox — единственный бесплатный инструмент из рассмотренных в этой статье, позволяющий провести полную проверку ресурса. Так что, если вы не хотите устанавливать все браузеры или платить за услугу, это лучший вариант для тестирования интерактивных элементов сайта.

Для тестирования внешнего вида сайта подойдет Browsershots. Он предлагает на бесплатной основе возможность проверить отображение ресурса в большинстве стационарных браузеров:

Используете ли вы уже эти инструменты?

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

Поделитесь своими мыслями в комментариях!

Перевод статьи «Ultimate Free Tools for Cross-Browser Testing» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Как посмотреть отображение сайта в разных браузерах!

Всем привет!

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

Все вы, наверное, знаете, что существует несколько популярнейших браузеров (Safari, Chrome, Opera, Mozilla и т.д.) различных версий. Версий браузеров очень много, потому что они постоянно обновляются, корректируются, улучшаются, и происходит это действительно часто. В итоге все приводит к тому, что существует более сотни программ для выхода в интернет. И плохо это тем, что они не согласованы между собой: каждый браузер воспринимает html-код (тот, на котором написаны сайты в интернете) по-своему.

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

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

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

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

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

Netrenderer.com — еще один бесплатный ресурс, позволяющий проверить отображение сайта в браузере Internet Exprorer различных версий. Скрины делаются мгновенно, сразу после того, как вы укажете проверяемую страницу и версию браузера. Вот, что у меня получилось:

Browsera.com – условно бесплатный сервис. Фри-аккаунт позволяет увидеть отображение сайта только в браузерах Firefox (3.6 и 7 версии) и Exprorer (7 и 8 версии). Однако платный аккаунт позволит проверить отображение сайта в значительно большем количестве разных браузеров. На скрине ниже указаны тарифы и их возможности:

Как избежать проблем с браузерами

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

Самое главное правило в кроссбраузерной верстке – указывать вместо пикселей проценты везде, где требуется указать размеры блоков или частей сайта. Дело в том, что проценты – это относительная (динамическая) величина, которая не зависит от ширины экрана, его разрешения, типа браузера и т.д. А пиксели – статическая величина, которая может отображаться по-разному.

Проще всего не самому проводить кроссбраузерную верстку, а поручить это верстальщику, т.к. у него больше опыта, он сделает это быстрее, а вы во многом можете ошибиться. Я надеюсь, эта статья открыла вам глаза на эту важную тему.

great-world.ru

Проверка кроссбраузерности сайта - где ее осуществить?

Почему стоит проводить тестирование кроссбраузерности?

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

Где проверить кроссбраузерность в режиме онлайн

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

Совет: не ставьте галочки везде, а только те, которые вам действительно нужны, а то проверка займет много времени.

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

Доскональная проверка

Допустим, вам нужно больше возможностей для проверки. Это может пригодиться профессиональным веб-разработчикам или просто веб-мастерам перфекционистам. Что ж, такие сервисы есть, но сразу предупреждаю, они платные. Хотя попробовать можно бесплатно.crossbrowsertesting.com/browserstack.com/

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

Плюсы платных сервисов очевидны – вы получите проверку кроссбраузерности онлайн максимального качества. Сколько это стоит? Примерно от 10 долларов. Впрочем, если вы веб-разработчик или веб-аналитик, то вам не жалко будет отдать деньги за профессиональную проверку. Например, в crossbrowsertesting можно протестировать свой сайт более чем в 900 браузерах. Причем это реальное тестирование с возможностью покликать, а не просто увидеть скриншот.

Тестирование в IE

IE Tester — это программа, выпущенная специально для просмотра сайта в версиях Internet Explorer от 6 до 9. Хотя программа во многом недоработана, она все же позволяет посмотреть на свой проект в этих браузерах и сделать соответствующие выводы. Так что если вы адаптируете проект под IE, то иметь такой инструмент вам может быть полезно.

Как проверить кроссбраузерность самому?

Проверить можно и самому. Это самый простой вариант. Просто откройте ваш сайт во всех браузерах, которые у вас установлены. Сходите к друзьям, у которых есть другие версии браузеров. Попросите знакомых зайти на ваш сайт с их браузеров и выслать вам скриншот. Заодно наладите деловые контакты

Также хочу вам посоветовать использовать супер полезный англоязычный сервис caniuse. В нем вы можете узнать, какие свойства из новых технологий поддерживаются в тех или иных браузерах. Например, жмем на псевдокласс :selection и видим, что IE8 его не поддерживает, Mozilla поддерживает с префиксом и т.д.

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

dolinacoda.ru

Тестируем веб-сайт: 20 бесплатных сервисов

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

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

Валидность

W3C Markup Validation. W3C Markup Validator – это бесплатный сервис для проверки соответствия исходного кода сайта нормам и правилам Консорциума Всемирной паутины (W3C). Соблюдение этих правил – гарантия корректного отображения страниц сайта в разных браузерах, хороших показателей скорости загрузки и других параметров.

W3C Markup Validation

Если вы хотите проверить сайт по конкретным элементам, этот же ресурс предлагает и другие чекеры:

W3C Link Checker. W3C Link Checker ищет ошибки в линках, якорях и ссылочных объектах на веб-странице, CSS (каскадных таблицах стилей) или рекурсивно по всему сайту.

W3C Feed Validation Service. А этот сервис проверяет синтаксис Atom- и RSS-каналов.

Битые ссылки

Xenu’s Link Sleuth. Кроме того, что Xenu’s Link Sleuth проверяет сайты на битые линки, этот сервис также поможет составить карту сайта, найти страницы с большим временем отдачи, неуникальные названия разделов, страницы с большим уровнем вложенности и другое.

Xenu’s Link Sleuth

Адаптивность

W3C mobileOK Checker. Этот сервис предлагает различные тесты веб-страницы на адаптивность к мобильным устройствам.

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

Скорость

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

YSlow

Pingdom Website Speed Test. Pingdom Website Speed Test анализирует скорость загрузки вашего сайта и показывает, как ее увеличить. Этот сервис показывает размеры файлов, время загрузок и другие детали о каждом элементе веб-страницы, определяя узкие места производительности.

Web Page Analyzer. Это еще один сервис для тестирования скорости с целью увеличить производительность сайта. Введите URL – и получите расчет размера страницы, композиции и времени загрузки.  Скрипт включает в свои рекомендации новейшие лучшие показатели производительности, руководства по размерах страниц, актуальные тренды и тенденции методов оптимизации сайта из известной книги “Website Optimization”.

Безопасность

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

Wapiti

Кроссбраузерность

Browsera. Browsera обеспечивает автоматизацию тестирования кроссбраузерности вашего сайта. Сервис определяет различия в отображении страниц разными браузерами. Кроме того, этот инструмент предоставляет отчетность об ошибках в скриптах в каждом браузере. Это премиум-сервис, однако его разработчики предлагают и бесплатную версию, лимитированную 25 сайтами и 1 пользователем.

Browser Shots. Browsershots делает скриншоты страниц вашего сайта в разных операционных системах и браузерах. Это отличный онлайн-ресурс для проверки совместимости с разными браузерами в одном месте.

Browser Shots

Юзабилити

Concept Feedback. Concept Feedback – это веб-сайт, на котором другие пользователи  могут протестировать ваш веб-сайт и оставить фидбэк. Это один из премиум-сервисов, но он также имеет и бесплатный вариант, с помощью которого ваш сайт может протестировать сообщество форума. Помогая другим пользователям тестировать их сайты, вы зарабатываете и на бесплатные тестирования своего ресурса.

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

ClickHeat. ClickHeat – сервис, который проанализирует динамику кликов на вашей странице и покажет вам результат в виде теплокарты, отображая «холодные» и «горячие» зоны страницы. Это легкий способ увидеть слабые места вашего сайта.

Язык

Grammarly. Команда Grammarly в Киеве и Сан-Франциско разрабатывает инструменты, которые помогают писать грамотные тексты на английском языке. Это один из лучших в мире сервисов для совершенствования английской грамматики. Сервис находит в тексте более 250 типов грамматических ошибок, исправляет контекстуальные и лексические ошибки и проверяет тексты на плагиат. 

Grammarly

LanguageTool. LanguageTool – еще один сервис для проверки грамматики, пунктуации, орфографии и стиля. Но кроме как для текстов на английском языке, этот инструмент содержит правила проверки для еще более 20 языков, включая украинский и русский.

Восприятие

AccessColor. AccessColor тестирует контрастность и яркость цвета в сочетании «фигура-фон» всех элементов объектной модели документа. Это поможет вам убедиться, что контрастность достаточно высока для людей с нарушениями зрения. AccessColor сам найдет подходящие цветовые комбинации в ваших HTML- и CSS-документах, поэтому вам не потребуется подбирать их вручную.

5secondtest. Этот инструмент поможет проверить первое впечатление о вашем сайте. Сервис покажет страницу вашего сайта потенциальным клиентам в течение пяти секунд, а затем задаст им вопрос, который вас интересует. Например, «Какие эмоции вызывает страница?» или «Понятно ли, чем занимается компания?». 

5secondtest

Поисковая оптимизация

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

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

www.imagecms.net

Смотрите также

• 
  Браузер это сервер интернета
• 
  Очистка браузеров от вирусов
• 
  История браузера на планшете
• 
  Браузеры с экономией трафика
• 
  При запуске браузера реклама
• 
  Кэш обновить в браузере
• 
  Как заработать на браузере
• 
  Поддержка flash в браузерах
• 
  Реклама андроид в браузере
• 
  Браузер на lg телевизор
• 
  Что за браузер сафари