Как проверить кроссбраузерность сайта и адаптировать его под разные браузеры

Адаптивность и кроссбраузерность сайта – жизненно важные свойства для современного web-ресурса. Изначально веб-страницы рассчитывались под экраны настольных компьютеров и ноутбуков. Сейчас, по данным Google, около 2/3 посетителей заходят на сайт с мобильных устройств, что заставляет разработчиков делать адаптацию сайта под разные разрешения и маленькие дисплеи. Сложности прибавляет тот факт, что каждый браузер отображает одинаковые части кода по-своему. В итоге, каждое устройство выводит содержимое страницы на дисплей по-разному: контент съезжает, располагается друг перед другом, не помещается.

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

Адаптивность сайта — что это такое

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

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

1. Поточность – во время навигации блоки с данными не смещаются.
2. Расположение элементов с привязкой к контрольным точкам на всех экранах.
3. Разумное применение минимальных и пиковых значений. Например, если ширина экрана устройства менее 1000 пикселей, то контент размещается на весь экран. Иначе ширина будет достигать максимум 1000 пикселей.
4. Применение относительности в измерениях – использование относительных единиц для координат и размеров нижней и верхней границ блока для десктопного и мобильного дисплеев.
5. Вложенность блоков, которые не нуждаются в оптимизации (логотипы) в контейнер.
6. Корректная эксплуатация векторных и растровых изображений для масштабирования и сжатия.
7. Применение единых шрифтов.
8. Соблюдение стандартов при создании макетов – адаптация сайта под разные разрешения экрана:

• смартфоны — 320, 430 и 480 px, 768 px;
• большие планшеты, нетбуки и ноутбуки — 768 px;
• нет- и ноутбуки, старые мониторы — 1024 px;
• компьютерные мониторы и телевизоры — 1200, 1920, 2K и 4K.

Цель корректности вёрстки – добиться правильной визуализации сайта на всех дисплеях, расширить пользовательскую аудиторию и повысить конверсию.

В нашей компании мы придерживаемся определенных стандартов при разработке сайта: страницы должны обеспечивать корректное отображение данных на десктопных, мобильных и планшетных устройствах, а именно на устройствах с разрешением экранов: 4K, 2K+, 1920+, 1200 +, 1400+, 1120+, 1024+, 992+, 768+, 640+, 540+, 384+, 320+.

Преимущества и недостатки адаптивного дизайна сайта

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

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

К недостаткам оптимизированной версии относятся следующие моменты:

• в мобильной версии можно отключить загрузку некоторых компонентов контента (анимация, большие изображения, скрипты). В оптимизированной – страница загружается полностью, и её содержимое формируется уже на самом устройстве. Вследствие возможно незначительное снижение скорости загрузки страницы;
• с мобильной версии, в отличие от адаптивной существует возможность переключаться на декстопную (полную) версию, например, с m.vk.com на vk.com, с оптимизированной такой возможности нет;
• в зависимости от цели создания ресурса отдельные его функции и разделы могут оказаться невостребованы на отдельных типах устройств;
• адаптивные информационные сайты сложнее в управлении блоками рекламы для десктопных устройств и гаджетов.

Типичные ошибки адаптивного дизайна сайта

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

• цена (опытный специалист не поставит низкую оплату за свою работу);
• портфолио (попросите исполнителя предоставить примеры выполненных работ);
• обратитесь в диджитал-агентство с хорошим кейсом и отзывами.

Большие изображения

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

Игнорирование поведенческих факторов

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

Блиц-тестирование

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

Игнорирование специфики пользования

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

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

Долгие этапы дизайна, разработки и тестирования

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

Онлайн-сервисы

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

Search Console

Рекомендуемый Google-инструмент для проверки удобства взаимодействия со страницами с мобильных телефонов и планшетов сообщит о выявленных проблемах и даст советы по оптимизации контента.

Quirktools Screenfly

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

Symby ru adaptest

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

Adaptivator

Инструмент максимально реалистично покажет оформление страницы на любом гаджете с имитацией верхней полоски на смартфоне и его корпуса с кнопками.

Офлайн

Существует простой способ, как проверить на адаптивность локальный сайт, запускаемый на сервере вроде Denwer. Откройте сайт в Chrome, Firefox или другом браузере и зажмите комбинацию клавиш Ctrl + Shift + M . Также можете вызвать консоль разработчика клавишей F12, в открывшейся панели кликнуть по иконке со смартфоном и планшетом в правом верхнем углу.

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

Кроссбраузерность сайта – его способность одинаково отображаться и функционировать в различных интернет-браузерах: Google Chrome, Opera, Safari, Mozilla Firefox. Такой принцип вёрстки исключает ошибки и отличия в выводе информации в браузерах. Адаптировать сайты стоит под последние на момент разработки проекта редакции интернет-обозревателей.

В 90-е годы веб-ресурс считался правильным, если он аналогично выглядел в устаревших Netscape Navigator и Internet Explorer. В наши дни появилась масса браузерных движков и нередки случаи, когда схожие программы реализованные на одной платформе по-разному обрабатывают HTML/CSS и визуализируют контент. Страницы должны корректно отображаться в версиях следующих браузеров: Google Chrome, Mozilla Firefox, Apple Safari, Opera, Яндекс Браузер. Версия браузера должна быть старше 2020 года.

Если для браузеров десктопной платформы преобладает два движка: Geko – Firefox и Blink – Chrome, то для iOS обозреватели работают на платформе WebKit. С Android сложнее – там многие программы написаны на собственных движках либо на модификациях популярных.

Кроссбраузерность и кроссплатформенность по отношению к сайту можно считать синонимами.

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

Существует ряд инструментов, позволяющих проверить кроссбраузерность сайта.

1. BrowserStark – бесплатный сервис протестирует URL в более чем 200 настольных и мобильных браузерах для разных платформ.
2. Browsershots – эмулятор браузеров, функционирующих под различными операционными системами.
3. Spoon Browser Sandbox – проверка на совместимость с выбранными версиями обозревателей.
4. MultiBrowser – приложение для проверки совместимости с различными движками в режиме офлайн.
5. Sauce Labs – инструмент с ограниченным количеством бесплатных функций и мощным их набором в PRO-версии, проверивший более 3,6 млрд. URL.
6. Equafy – приложение для выявления недостатков вёрстки.
7. Ghostlab – программа для всестороннего тестирования веб-сайта.

Как сделать сайт кроссбраузерным

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

• информация читабельна и выводится правильно, элементы не перекрывают друг друга и не съезжают;
• отображается вся необходимая информация;
• сохранена структура сайта;
• отсутствуют недостатки вёрстки.

Сделать сайт кроссбраузерным — значит добиться схожей (не обязательно до мелочей) визуализации контента в популярных браузерах. Достичь такого результата можно несколькими путями.

Применение CSS-хаков

CSS hacks – короткие фрагменты кода, предназначенные для конкретного браузера. Например, в одной из программ часть портала отображается неправильно: в Opera шапка съезжает вниз и перекрывает горизонтальное меню. С помощью CSS-хака, предназначенного только для Opera, шапку поднимают на необходимое количество пикселей или опускают остальной контент.

Следует отметить, что CSS-хаки делают код неэстетичным и увеличивают его в объёме.

Внедрение универсальных элементов

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

Вендорные префиксы

Представляют собой приставки перед названиями CSS-свойств, используемых вендорами. Используются в случаях, если CSS-свойство:

• реализует неполную функциональность;
• применяется в качестве эксперимента;
• нестандартно или прописывается для конкретного веб-обозревателя.

Разработчики браузеров создали собственные префиксы для нестандартных CSS-свойств. Они воспринимаются только с префиксом:

• webkit-text-size-adjust – управление визуализацией текста в программах на движке Webkit;
• moz-text-size-adjust – на Firefox;
• o-size-adjust – на Opera.

Заключение

Следует проводить анализ поведенческих показателей пользователей (в случае если есть сайт и необходима его переработка или модернизация). Либо анализ потенциальных пользователей и конкурентов для новых проектов.

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

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

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

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