Браузеров много и они несколько по‑разному отображают страницы. Способность сайта корректно отображаться в разных браузерах называется кроссбраузерность.
Наиболее рациональным требованием к верстке является сохранение эстетичности отображения сайта в различных браузеров с допущением, что некоторые элементы могут отображаться немного по разному. Этим путём идут все крупные проекты, что легко проверить, если наложить друг на друга снимки экрана из различных браузеров.
Однако, у заказчиков часто бывает требование добиться абсолютно идентичного отображения сайта во всех браузерах (с точностью до пиксела). Это достижимо, но не очень рационально, так как увеличивает стоимость разработки, а ощутимых преимуществ не даёт. Реальная конверсия большинства сайтов на самом деле слабо зависит от эстетической составляющей — гораздо большее значение имеет удобство интерфейса и качество представленной информации.
Современные сайты обычно адаптируют под Internet Explorer начиная с версии 8 и под другие браузеры (Google Chrome, Mozilla Firefox и Opera) актуальных на момент разработки версий. Разработка под устаревшие версии браузеров, как правило, не особо рациональна: это приводит к снижению сопровождаемости проекта и иногда заставляет отказываться от современных технологий в разработке.
Корректное отображение в разных браузерах — важное требование в ТЗ, но тут важно перечислить только те браузеры, поддержка которых действительно нужна для эффективности проекта. Всё просто: на «затачивание» вёрстки под большое количество версий браузеров требуются ресурсы, которые оплачиваются из кармана заказчика, а эти затраты должны окупиться — если доля пользователей какой‑либо версии браузера в абсолютном выражении будет составлять, например, 20 человек в год, то обычно нет смысла тратить время на оптимизацию под этот браузер.
Тематические статьи
Графические интерфейсы современных сайтов и веб‑приложений разрабатываются с использованием всего трёх языков — HTML, CSS, JavaScript. Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML, CSS и JS в современной фронтенд-разработке никаких других языков не используется.
По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.
Выбор правильного формата изображения — ключевой аспект оптимизации веб‑страниц. От него зависят скорость загрузки, качество контента и пользовательский опыт. Рассмотрим популярные форматы, поддерживаемые современными браузерами, их особенности и сферы применения.
JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG. Неверный выбор формата обычно приводит к кратному возрастанию размера изображения и, следовательно, к долгой загрузке изображений на медленном интернет-канале (мобильный интернет, например).
Сжатие изображений — это один из способов ускорения загрузки сайта. Сделать изображения более «легкими» можно как уменьшив их физический размер в пикселях, так и путём оптимизации параметров сохранения. На «широких» каналах размер изображений на сайте на скорость загрузки сайта влияет не очень сильно, но для пользователей, просматривающих сайт через мобильный интернет (EDGE или 3G), большие изображения могут быть проблемой. На посещаемых сайтах также могут быть сложности с загрузкой канала сервера — неоптимизированные изображения могут существенно сказываться на объёме трафика (это проблема, если он платный) или просто «забивать» канал.
Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI для более детализированного отображения. Есть несколько вариантов реализации адаптивных изображений, отличаются они по сложности реализации, кроссбраузерностью и по создаваемой нагрузке на интернет-соединение. Рассмотрим самые распространённые.
Вёрстка независимыми блоками — это методология, которая была сформулирована Виталием Харисовым из компании Яндекс. Впоследствии эта методология была расширена и получила название БЭМ (Блок-Элемент-Модификатор). Собственно БЭМ нужен для упрощения командной разработки, для унификации интерфейсов и для более активного повторного использования программного кода.
Кеширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или при посещении просматривает несколько страниц, которые используют одинаковые ресурсы.
Увеличить отзывчивость интерфейса и снизить нагрузку на сервер можно при помощи Ajax‑навигации: если не перезагружать страницу целиком, а обновлять только содержание или отдельные фрагменты, то скорость работы сайта или приложения существенно возрастёт.
Загрузка контента при помощи Ajax и навигация, построенная на этой схеме, позволяют значительно повысить отзывчивость интерфейса разрабатываемого сайта или веб‑приложения. Однако такой подход заставляет решать проблемы, связанные с отображением адреса в браузере.