Если вы пользуетесь сразу несколькими устройствами и обозревателями — можно заметить, что одни и те же сервисы открываются и выглядят по-разному. В большинстве случаев изменения едва различимы и никак не сказываются на удобстве просмотра видео или чтения текста. Однако на некоторых ресурсах могут возникать проблемы с отображением картинок, функциональностью кнопок и т. д. В подобных ситуациях большинство посетителей просто переключаются на другие источники информации, не желая тратить время на преодоление барьеров низкой оптимизации. Как следствие, снижение трафика, падение конверсии и ухудшение выдачи в поисковиках. В этом обзоре мы расскажем, что такое проверка кроссбраузерности CSS, как быстро просмотреть сайт в разных браузерах и проверить отображение всех страниц, и почему кроссбраузерная верстка — это важный аспект успешного продвижения.
Общее представление
На ранних этапах развития интернета все было гораздо проще. Первопроходцем стало приложение WorldWideWeb, разработанное в рамках проекта ЦЕРН Тимом Бернерсом-Ли в 1990 г. Спустя три года на рынке появилось сразу несколько схожих по функционалу продуктов, наиболее известным и статусным среди которых стал кроссплатформенный Mosaic. Именно на его основе были разработаны главные конкуренты того периода — Netscape Navigator и Internet Explorer. Любой ресурс мог считаться достаточно оптимизированным, если он полноценно отображался в обоих приложениях.
Конкуренцию в итоге выиграл Майкрософт — за счет бесплатного распространения и фактического уничтожения корпоративного рынка. Однако в первом десятилетии XXI века популярность IE начала стремительно падать, поскольку в игру последовательно вступили Mozilla Firefox (2003) и Google Chrome (2008), а Opera полностью перешла на некоммерческий формат (2005). Разработчики предлагали пользователям все более широкий функционал начиная с возможности одновременного открытия нескольких вкладок и заканчивая встроенным менеджером загрузок, что в конечном итоге обеспечило перераспределение охвата целевой аудитории между несколькими компаниями.
Для создателей веб-ресурсов подобное развитие событий обернулось как позитивными, так и негативными изменениями. С одной стороны — общий охват заметно вырос, благодаря переходу на бесплатную модель. С другой — у каждого нового продукта были свои особенности, из-за которых верстка, отлично работавшая на одном обозревателе, могла отображаться с серьезными багами на других. На сегодняшний день кроссбраузерность — возможность просмотра сайта в разных браузерах без проблем и ошибок — является одним из ключевых показателей, одинаково важным как для поисковиков, так и для пользовательской аудитории.
Зачем проводить тестирование
Некорректное отображение, проблемы с реализацией отдельных сценариев или ограничения доступности функций — факторы, оказывающие негативное влияние на опыт, получаемый посетителем веб-страницы. Чем чаще встречаются неполадки, тем меньше вероятность повторного посещения. Уровень отказов — один из критериев поведенческой оценки, значимый для ранжирования. Фиксируя отток пользователей, роботы будут считать веб-ресурс неактуальным, автоматически понижая его позицию в органической выдаче. Кроме того, каждый новый баг отнимает определенную долю от общей конверсии, поскольку зачастую потенциальным клиентам даже не удается как следует ознакомиться с торговым предложением.
Как сделать кроссбраузерную верстку
Добиться желаемого результата помогают регулярные тесты и устранение локальных ошибок. Стоит отметить, что ни один полноценный сайт не должен и не может выглядеть абсолютно идентично в любом существующем браузере. Для качественной оптимизации достаточно соблюсти следующие требования:
- Сохранение основной структуры.
- Разделение элементов дизайна.
- Обеспечение удобства просмотра.
Задача разработчиков веб-ресурса — оценить, насколько удобным является взаимодействие с меню, навигацией и блоками контента, и оперативно исправить имеющиеся недочеты.
На какие приложения ориентироваться
Хорошая новость: скачивать и устанавливать все существующие продукты во всех релизных версиях не придется. Чтобы проверить, как сайт будет выглядеть в разных браузерах, достаточно провести тесты с тремя основными обозревателями, работающими на наиболее востребованных и распространенных движках:
- Google Chrome (Blink).
- Safari (WebKit).
- Mozilla Firefox (Gecko).
Если с ними все в порядке, вероятность возникновения проблем при использовании других обозревателей сводится к минимуму, поскольку именно эти программы, отвечающие за преобразование и форматирование, применяются в большинстве известных инструментов для серфа — Яндекс.Браузер, Opera, Gnome Web, MS Edge, Tor и т. д.
Какие параметры определяют кроссбраузерность
Чтобы составить впечатление о том, насколько корректно работает ресурс, среднему пользователю нужно всего несколько секунд. К числу основных критериев оценки относятся:
- Скорость загрузки. Чем дольше приходится ждать открытия страницы — тем быстрее посетитель переключится на другую платформу.
- Расположение элементов. Проблемы с отображением, наложения и выходы за границы экрана сходу бросаются в глаза.
- Читабельность текстовых материалов. Нередко встречаются сложности с кодировкой, из-за которых статьи превращаются в наборы нечитаемых символов.
- Адекватность функционала. Если сценарии JavaScript не срабатывают, кнопки не нажимаются, а результат заданной программы оказывается несоответствующим ее описанию, пользоваться ресурсом будет весьма проблематично.
- Адаптивность. Сегодня свыше 70% от общего объема трафика приходится на мобильные устройства, что обусловливает соответствующий приоритет, установленный Google для индексирования новых ресурсов. Разнообразие смартфонов и планшетов требует от разработчиков повышенного внимания к совместимости.
Как проверить кроссбраузерность сайта
В теории можно скачать все необходимые приложения и последовательно открыть в них вручную каждую страницу, оценивая основные параметры. Такой вариант вполне подойдет для небольших веб-ресурсов, однако практически нереален при работе с крупными интернет-проектами, контент которых обновляется ежедневно. Определить, какими браузерами пользуется большая часть аудитории, помогут аналитические сервисы — Метрика от Яндекс и Analytics от Google. Что касается автоматической проверки, позволяющей посмотреть, как выглядит сайт в разных браузерах — есть немало как бесплатных, так и коммерческих сервисов.
CrossBrowserTesting
Платная платформа, обеспечивающая возможности для проведения «живого теста» с предварительно заданными параметрами, а также выполнения тестирования Selenium с использованием скрипта и записью видео.
NetRenderer
Упрощенный инструмент, рассчитанный только на работу с Internet Explorer версий 5.х-11. Достаточно указать нужный вариант и ввести URL-адрес.
Browsershots
Сервис для тестирования в более чем 200 приложениях и различных сборках на их основе. В бесплатном режиме предусмотрена очередность проверки, обойти которую позволяет оформление подписки.
Spoon Sandbox
Проект с полностью русифицированным интерфейсом и доступным для загрузки плагином, помогающим оценить ключевые параметры в последних версиях наиболее популярных продуктов. Оценка совместимости с устаревшими релизами также доступна, но за определенную плату.
Browserling
Коммерческая платформа, которая выполняет тест в реальном окне обозревателя, установленного на виртуальную программную машину. Совместима с операционными системами Windows и Android, и позволяет проверить, как сайт отображается в пяти разных браузерах — от Хрома до Оперы.
MultiBrowser
Еще один платный ресурс, помимо основного функционала также предлагающий эмуляторы популярных мобильных устройств. При необходимости можно загрузить конкретные версии или воспользоваться опцией оффлайн-теста.
Equafy
Один из наиболее эффективных сервисов, автоматически сканирующий веб-страницы и указывающий на ошибки верстки через призму адаптации к разным браузерам. Предлагает широкий спектр уникальных параметров и настроек.
Sauce Labs
Платформа для онлайн-проверок, при оформлении платной подписки открывающая доступ к автоматическим тестам более чем 600 сборок для различных устройств.
Viewlike.us
Отличный инструмент, позволяющий протестировать адаптивность, уточнить скорость загрузки, проверить элементы кода HTML и другие параметры. Сервис не только проверяет ключевые характеристики, но и дает базовые рекомендации по их оптимизации.
Как улучшить кроссбраузерность сайта и сделать его удобным
Есть несколько сценариев.
Применение CSS-хаков
Hacks — фрагменты, рассчитанные на конкретные браузеры, которые игнорируются другими приложениями. Метод помогает точечно убрать отдельные ошибки, но делает общую структуру более сложной и громоздкой.
Интеграция универсальных элементов
Упрощенный вариант, обеспечивающий краткость и эстетичность исходного кода, понятного для большинства обозревателей. Для проверки совместимости тегов с движками можно воспользоваться порталом caniuse.com.
Вендорные префиксы
Использование приставок к названиям свойств — метод, схожий с применением хаков, который считается более корректным с точки зрения получаемых результатов.
Заключение
Сегодня в распоряжении пользователей имеются различные браузеры — как кроссплатформенные, так и разработанные для конкретных операционных систем. Проверка сайта на кроссбраузерность позволяет оптимизировать веб-ресурс и сделать его удобным вне зависимости от того, какое именно приложение предпочитает пользователь.
Вопрос-ответ
Как часто нужно проводить тестирование?
Наиболее оптимальный вариант — автоматическое тестирование после каждого обновления.
Почему дизайн и верстка выглядят по-разному?
Основная причина — использование различных программных движков, каждый из которых по-своему воспринимает HTML-коды и стили CSS.
Кто занимается проверкой веб-сайта на правильное отображение в разных браузерах?
Анализ того, насколько правильно отображаются страниц в различных окнах обозревателя, является задачей тестировщиков, тогда как за устранение ошибок отвечают разработчики веб-ресурса.
