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


Кроссбраузерность - важный параметр адаптации сайта. Неважно, насколько хорош сайт или предложение, если пользователь не сможет его просмотреть в мобильном браузере»
В последних публикациях нашего блога мы уделили максимум внимания важности адаптации сайта под мобильные устройства и удобству отображения веб-страниц на экранах смартфонов и планшетов. Впрочем, оценивая это самое удобство, важно учитывать интересы абсолютно всех пользователей, какими бы гаджетами и браузерами они ни пользовались. Не исключена ситуация, при которой сайт станет юзабельным для одних потенциальных заказчиков, но совершенно нефункциональным для других. В этой связи крайне важно подумать не только о доработке верстки страниц и их юзабилити на мобильных устройствах, но и о кроссбраузерности – способности адекватно отображаться в разных браузерах.
Какие проблемы могут возникнуть?
В статье «Тестирование мобильной адаптации сайта» мы уже говорили о том, как увидеть проблемы адаптивной верстки в разных браузерах, а в материале «Отслеживаем пользовательский опыт» – рассмотрели, как можно увидеть сайт глазами рядовых пользователей. Впрочем, многие из проблем, которые мы обнаружим на этом этапе, исправить будет достаточно сложно. Значительно проще предусмотреть их заранее – еще при составлении технического задания. Итак, о каких проблемах идет речь?
Отключенные скрипты
В некоторых мобильных браузерах для повышения скорости загрузки страниц по умолчанию отключены ява-скрипты (JavaScript или JS). Самый известный такой браузер – Opera mini (не путать с Opera mobile!). Отключить скрипты может и любой другой пользователь в настройках своего браузера. Вполне естественно, что если в верстке сайта или его функциональности JavaScript берет на себя некие критические функции, то у пользователя могут возникнуть серьезные проблемы.
Нельзя сказать, что пользователей с отключенным JS много. Но даже небольшое их количество заслуживает внимания, ведь на их экранах сайт становится практически нефункциональным. Посмотрите пример статистики для проекта, где скрипты имеют решающее значение для дизайна и функциональности. Отказы у пользователей, чей браузер не поддерживает технологию, превышают 70%!
Поддержка flex
В последние годы все более популярной для адаптивной верстки является верстка с помощью инструментов flex. Действительно, этот стандарт имеет множество преимуществ, важных для отображения элементов веб-страниц на мобильных устройствах. Но, к сожалению, поддержкой технологии могут похвастаться не все браузеры.
Flex вообще не поддерживают:
- Internet Explorer < 10;
- Android Browser < 2.1;
- Opera < 12.1;
- Firefox 1;
- Safari < 3.1;
- Blackberry browser < 10.
Важно отметить, что многие последующие версии перечисленных браузеров хоть и поддерживают flex, но с определенными условиями: могут потребоваться дополнительные префиксы и/или применение старых стандартов синтаксиса. Все это необходимо учитывать при адаптивной верстке сайта.
Проще говоря, делая выбор в пользу flex-верстки со всеми ее неоспоримыми достоинствами, нужно понимать и риски – у определенного числа пользователей сайт будет попросту «распадаться».
Префиксы и не только
Каждый браузер имеет свои особенности отображения, но у некоторых из них эти особенности просто-таки критичны. Особенно это касается следующих браузеров:
- Safari, который по умолчанию используется в iOS, а значит – на всех айфонах и айпадах.
- IE (особенно версии < 10), который хоть и не применяется на мобильных устройствах, но заслуживает особого внимания при верстке.
- Некоторые браузеры для мобильных – US Browser, Opera mini, Android browser и другие.
Для того чтобы страницы в этих браузерах выглядели так же хорошо, как и в любых других, могут потребоваться специальные префиксы и/или запасные варианты стилей. Это выдвигает особые требования к квалификации специалистов, которые занимаются мобильной адаптацией, ведь учитывать только Google Chrome, например, недостаточно.
Flash
Еще одна технология, которую может не поддерживать мобильный браузер, – это Flash-анимация. И пусть сейчас она не так популярна для веб-строительства, как прежде, технология может использоваться для создания отдельных элементов сайта. И эти элементы с некоторой степенью вероятности на мобильных устройствах корректно отображаться не будут.
Важно и то, что Flash-контейнер невозможно сделать на 100% адаптивным – его структура и пропорции не зависят от размеров экрана. Так что использовать крупные Flash-элементы при мобильной адаптации следует вдвойне осторожно.
Изображения
Один из способов повысить быстродействие сайта – это отключить изображения на веб-страницах. И способ этот на мобильных устройствах оказывается достаточно востребованным, особенно если пользователь располагает только низкоскоростным мобильным интернет-подключением.
Не произойдет ничего страшного, если при этом потенциальный клиент не увидит, например, фото товара – при необходимости его можно посмотреть отдельно, из дома или офиса. Другое дело, если изображения несут функциональную нагрузку и без них сайт не воспринимается адекватно. Таких ситуаций при мобильной адаптации, конечно, стоит избегать.
Ниже – пример сайта, который при отключенных изображениях становится нечитабельным:
Выводы
В большинстве случаев для удобного отображения на мобильных устройствах недостаточно просто сделать верстку сайтов адаптивной. Важно учесть особенности мобильных браузеров и добиться кроссбраузерности адаптивной верстки.
В числе основных проблем, которые могут проявиться по результатам адаптации сайта под мобильные экраны — отсутствие поддержки JavaScript, Flash и Flex CSS, блокирование загрузки изображений и некоторые другие. Эти ограничения необходимо учесть заранее – до начала работ по мобильной адаптации сайта.