№1 по увеличению конверсии в России

Кроссбраузерность и конверсия:
Как добиться корректного отображения сайта во всех браузерах

Веб браузер (от англ. web browser) — это программное обеспечение для просмотра веб-страниц. В Рунете более 5 популярных браузеров.
Данные Liveinternet по России (март 2019)
Некоторые из этих браузеров отличаются исходным кодом и могут по разному отображать один и тот же сайт (особенно старые версии браузеров). Подобные искажения могут влиять на отображение важных элементов на сайте и соответственно снижать конверсию. Но не стоит пугаться такого разнообразия браузеров, потому что важнее обращать внимание на «движок» на котором базируется браузер, так как некоторые браузеры собраны на базе одних и тех же «движков».

«Движки» для браузеров

  • Blink - это самый популярный в мире браузерный движок. Основной разработчик Google. Его использует Chrome и на его основе работают браузеры: Яндекс.Браузер, Opera, Samsung Internet и другие. Для работы с JavaScript, эти браузеры используют движок V8 - тот же, что и в Node.js.
  • WebKit - это второй по популярности движок. Основной разработчик Apple. На WebKit работают браузеры Safari (как мобильные так и десктопные). Основа у WebKit и Blink общая, но возможности довольно разные.
  • Gecko (Servo) - на базе данного движка работает браузер Firefox. Основной разработчик Mozilla. Gecko также хорошо работает на десктопных платформах и на Android.
  • EdgeHTML - стоит в основе браузера Edge. Основной разработчик Microsoft. Работает на всех современных платформах Microsoft, включая мобильные и Xbox.
  • Trident (MSHTML) - на котором работал браузер Internet Explorer. Основной разработчик Microsoft. Основа у Trident и EdgeHTML общая, но сильно отличаются по возможностям. Trident и IE закрыли в 2015 году.

Как добиться одинакового отображения сайта во всех браузерах?

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

  • Тестируйте. Для начала стоит проверить как сайт отображается в разных браузерах, для этого можно использовать сервисы эмуляторы: BrowserStack, CrossBrowserTesting или Chrome DevTools. Но лучше всего проверять результат на реальных платформах и устройствах, например: на Windows, Android, macOS и iOS.
  • Держите код простым. Подумайте о качестве, когда речь заходит о коде. Не выделяйте десять строк кода той функции, для которой хватит и трех. Простой код обрабатывается быстрее, он более дружелюбен к различным браузерам, а также более удобен в обслуживании, когда потребуется внести правки и настройки (даже силами других разработчиков).
  • Используйте фреймворки - заготовки и шаблоны, такие как Foundation и Bootstrap, предоставляют код совместимый с большинством браузеров. Это ускоряет работу, а также помогает правильно отображать страницы сайта даже в мобильных устройствах.
  • Определите допустимый Doctype. Doctype - это первая строка, описывающая HTML-код, который будет использоваться в посещаемой странице. Поскольку разные браузеры имеют разные стандарты и правила, то Doctype важен для правильного отображения и работы страницы в браузерах. Подробнее о Doctype и о том как его правильно использовать.
  • Сбросьте стили CSS. Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML - элементов. Сбросив стили CSS можно нивелировать эту разницу для обеспечения кроссбраузерности стилей. Как сбросить стили CSS Reset.
  • Проверяйте на ошибки - проблемы с HTML и CSS можно предотвращать. Для этого используется W3C: HTML Validator и CSS Validator, чтобы убедиться, что код не содержит ошибок и исправить их, если ошибки есть.
  • Используйте условные комментарии. Условные комментарии — это механизм, при помощи которого можно использовать нестандартные особенности браузеров, что позволит избежать проблем несовместимости с другими браузерами. Это особенно полезно, когда речь идет о проблемах с дизайном, характерных для Internet Explorer. Как использовать условные комментарии.
  • Снова тестируйте. После внесения описанных выше правок или после добавления новых элементов на сайт - не забывайте проводить тестирование. Это позволит избегать недоразумений в дальнейшем.

Важно: будьте готовы к тому, что практически невозможно добиться дизайна сайта, который выглядит одинаково во всех браузерах, если только он не является очень простым. Детали, такие как: размеры отступов, шрифтов, высота строк, цвета, сглаживание текста, размытие теней, рендеринг графики и внешний вид системных контролов, могут отличаться независимо от правил, которым вы следуете. Главная задача не должна заключаться в том, чтобы дизайн выглядел одинаково в каждом браузере. Вместо этого, стоит убедиться в том, что сайт выглядит приемлемым и пригодным для использования. Все важные элементы и функции заметны и доступны.
В данной статье рассмотрена лишь 1 точка роста конверсии. Если вы хотите увеличить конверсию вашего сайта по 524 параметрам, узнайте подробности в разделе Аудит сайта
Автор Эдуард Файзуллин. Опубликовано 7 марта 2019 года.
Подробнее про рост конверсии в книге: "Конверсия на стероидах"
    Конверсия на стероидах, Эдуард Файзуллин
    • Навигация на сайте;
    • Главная страница сайта;
    • Сервисные функции;
    • Каталог товаров;
    • Страница товара;
    • Корзина;
    • Оформление заказа;
    • Цена и оплата;
    • Технические параметры.
    200 точек роста, 130 страниц, детально рассмотрены:
      Скачать книгу бесплатно
      Пожалуйста, оставьте свой e-mail и мы пришлём вам ссылку для скачивания книги
      + 1 раз в неделю мы рассылаем свежие статьи про увеличение конверсии сайтов
      Отписаться можно в любое время, в 1 клик
      Оставляя свой e-mail, вы принимаете условия обработки персональных данных
      Другие статьи по теме
      Больше статей о повышении конверсии в разделе Статьи