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

Автор: Олег Фролов

«Руководитель проектов команды "Бизнес-Мотор", вебмастер, копирайтер.
Кроссбраузерность - важный параметр адаптации сайта. Неважно, насколько хорош сайт или предложение, если пользователь не сможет его просмотреть в мобильном браузере»

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

Какие проблемы могут возникнуть?

В статье «Тестирование мобильной адаптации сайта» мы уже говорили о том, как увидеть проблемы адаптивной верстки в разных браузерах, а в материале «Отслеживаем пользовательский опыт» – рассмотрели, как можно увидеть сайт глазами рядовых пользователей. Впрочем, многие из проблем, которые мы обнаружим на этом этапе, исправить будет достаточно сложно. Значительно проще предусмотреть их заранее – еще при составлении технического задания. Итак, о каких проблемах идет речь?

Отключенные скрипты

В некоторых мобильных браузерах для повышения скорости загрузки страниц по умолчанию отключены ява-скрипты (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, блокирование загрузки изображений и некоторые другие. Эти ограничения необходимо учесть заранее – до начала работ по мобильной адаптации сайта.