Блог Максима Войтика
Публикации о способах
заработка в интернете и SEO

Кроссбраузерность сайт — что это, проверка отображения сайтов во всех браузерах

29 декабря 2016
Комментарии: 2

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

Привет читатели seoslim.ru! Ничего загадочного в слове “кроссбраузерность” нет, часто новички задаются вопросом, что это за понятие.

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

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

Что такое кроссбраузерность


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

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

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

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

Начинающие разработчики могут сделать ручной тест, на наиболее используемых Опере, Мозилле, Гугл Хром, IE.

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

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

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

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


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

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

Browsershots Итак, начнем с наиболее доступных сайтов. По праву считается, что browsershots.org в этом списке можно поставить на первое место среди бесплатных вариантов.

Сразу при переходе у вас открыта вкладка “Browser Compatibility Test”, это и есть проверка на кроссбраузерность.

Для этого в строку необходимо ввести url вашего сайта и нажать на кнопку “Submit”:

проверка сайта в browsershots.org

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

опции анализа browsershots.org

После нажатия на кнопку “Submit” вы встанете в очередь на проверку, появится вот такое сообщение:

очередь на проверку сайта в browsershots.org

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

Дополнительно вы можете получить приоритет на час, если нажмете на “Expire in 60 minutes for Priority Users”.

Параллельно вы увидите, как появляются скриншоты уже проверенных версий, если нажать на “Details”, можно проследить текущее состояние в деталях, а также сколько потрачено минут на каждую:

детали проверки browsershots.org

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

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

Viewlike Следующий сайт, который можно однозначно порекомендовать — www.viewlike.us. С помощью сервиса вы также сможете оценить успешность юзабилити тестируемого ресурса и проверить скорость его работы.

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

Вводим адрес в специальную строку, нажимаем “Test now!”:

указываем анализируемый сайт в viewlike.us

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

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

Заходим на страницу crossbrowsertesting.com, небольшая сложность здесь в том, что для использования возможностей сервиса нужно зарегистрироваться, а для начала нажмите “Start Your Free Trial”:

как работать в crossbrowsertesting.com

Для этого требуется указать свой адрес электронной почты и новый пароль, нажать “Create Your Free Account”:

регистрация в crossbrowsertesting.com

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

При этом в использование дается ограниченное количество времени тестирования — всего 60 минут.

Но начнем проверку, сделать это просто — после подтверждения аккаунта вы оказываетесь в разделе “Start a Screenshot Test”.

Проводится она на базе Windows и Mac, браузеры Chrome, FireFox, IE, Opera, Safari, анализ в мобильной версии предоставляется в отдельной вкладке.

В строку вводим адрес нужного вам сайта, как и в предыдущих случаях:

указываем сайт в crossbrowsertesting

Всего потребовалось порядка 2-3 минут для анализа, теперь можно подробно увидеть полученные скриншоты, а нажав на “Layout Differences”, вы увидите различия в макете, которые обнаружила система.

Больше всего разногласий заметно при исследовании браузера Internet Explorer:

результат проверки сайта на кроссбраузерность в crossbrowsertesting.com

Все полученные скриншоты доступны для скачивания, для этого нажмите “Download” в верхнем правом углу, материалы сохраняться в формате .zip.

А для подробного анализа воспользуйтесь указанной ссылкой под картинкой — “Layout Differences”, при переходе становится доступен подробный анализ элементов:

как сделать подробный анализ проекта на crossbrowsertesting

Итак, сервис прост и удобен в использовании, но, к сожалению, бесплатен только на недельный период.

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

Quirktools Довольно интересный сервис по адресу quirktools.com, не требуется регистрации или оплаты каких-либо функций.

Перед вами просто строка, куда необходимо ввести адрес:

строка для проверки сайтов в quirktools.com

Фактически это средство для эмуляции большого количества устройств, разрешения могут подбираться по ходу:

пример работы quirktools.com

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

Browserstack Если ничего из перечисленного выше вам не понравилось, попробуйте перейти по ссылке www.browserstack.com и поработать здесь, вводим адрес:

сервис browserstack.com

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

Нажимаю “Free Trial”, ввожу адрес электронной почты и пароль, все как обычно.

регистрация в browserstack.com

После регистрации выбираем вкладку “Live”, открывается менюшка со всеми доступными платформами и браузерами.

То, что выделено ярким цветом, доступно для бесплатной версии, учтите, что всего на тестирование дается 30 минут.

Например, выбираю браузер Chrome, загружается программа последней версии:

тест сайта в Хроме на browserstack

Открывается окно с дублирующей строкой для url, вводим адрес сайта сюда:

указываем тестируемый сайт в browserstack

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

параметры сайта в browserstack.com

Browserling Еще один вариант — www.browserling.com, удобен тем, что сразу есть возможность выбрать из выпадающего списка необходимую для тестирования операционную систему, браузер и его версию, далее кликнуть на “Test now!”:

сервис browserling.com

Интересно, что для проведения каких-либо действий дается ровно три минуты (таймер вверху слева), есть интересные инструменты, например, создание скриншотов (Screenshots).

Для смены браузера и его версии будет достаточно нажать на значок (в данном случае Chrome), а когда все готово к новой проверке, запустите ее кнопкой “Run”.

как работает кроссбраузерность через browserling

Turbo Следующий сервис, на который можно обратить внимание, находится на сайте turbo.net в подразделе Browser Sandbox.

Достаточно удобно все устроено — для прохождения теста вы сразу выбираете конкретную платформу и версию браузера, для проверки нужно нажать “Run”.

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

сервис turbo.net

Предварительно нужно зарегистрироваться (можно сначала нажать, а потом уже сделать это).

Ввожу новый логин и адрес электронной почты:

регистрация в turbo.net

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

проверка сайта через turbo

Те, кто хочет постоянно пользоваться сервисом, стоит скачать прилагающееся приложение, точнее расширение, для этого нажмите на “Install Turbo.net” в нижней части страницы.

Browsera Один из иностранных ресурсов — www.browsera.com, ничего сложного в работе с ним нет. Для начала работы нажмите соответствующую команду на главной странице:

сервис browsera.com

Далее потребуется легкая регистрация — указываете самые простые данные о себе, почта может быть любая, не обязательно с доменом .com.

Для тестирования задаете все необходимые параметры, самое главное — адрес страницы, нажимаете “Run Test”.

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

ход выполнения проверки в browsera.com

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

  • Еще один конкурент — saucelabs.com, зайдите и сюда.
  • А тем, кого интересует читабельность сайта и прочих характеристики относительно только IE, советую обратиться к ресурсу netrenderer.com.

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

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

(1 голос., в среднем: 5,00 из 5)
Загрузка...
С уважением, Максим Войтик
Буду рад, если нажмете на любую из кнопок:
Комментарии (2)
  1. Александр в 01:36

    Отличная подборка ресурсов. Из представленного списка, я знал только о Quirktools. Раньше пользовался данным сервисов частенько. Мне он очень нравится, так как есть возможность посмотреть как выглядит блог на многих устройствах. [good]

    Ответить
  2. Александр в 22:15

    Еще одна полезная статья , спасибо Вам Максим, все время слежу за вашими обновлениями, с наступающим!!!

    Ответить
Оставить свой комментарий
Обязательно ознакомьтесь с правилами комментирования!!! СПАМ будет удален!
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]

© 2011-2017 seoslim.ru, блог Максима Войтика

Внимание! Копирование материала строго запрещено. Соблюдайте авторские права и уважайте труд других людей!