HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

используйте Для синхронизации работы такие средства, как BrowserSync

Одним из наиболее эффективных средств экономии времени, которым я пользуюсь в последнее время, является BrowserSync. После его настройки при сохранении работы любые изменения, вносимые, к примеру, в CSS, внедряются в браузер, не требуя при этом постоянного обновления экрана. Если это вас не сильно впечатлило, добавлю: обновляются и любые другие окна браузеров на устройствах, находящихся в той же Wi-Fi-сети. При этом при внесении каждого изменения уже не приходится брать каждое тестируемое устройство и щелкать на кнопке обновления. Данное средство синхронизирует также прокрутку и щелчки на элементах интерфейса. Настоятельно рекомендую: http://browsersync.io/.

Использование принципа постепенного усложнения

В предыдущих главах был вкратце упомянут принцип постепенного усложнения. Полагаю, об этом подходе к разработке, в котором я вижу немалую практическую пользу, нелишне будет напомнить еще раз. Основной замысел постепенного усложнения заключается в том, что весь ваш интерфейсный код (HTML, CSS, JavaScript) начинается с замысла наименьшего общего знаменателя. Затем код постепенно усложняется с расчетом на устройства и браузеры с более широкими возможностями. Если вы привыкли работать в обратном порядке, то все может показаться неким упрощением, и так оно и есть: если вы имеете оптимальные наработки, а затем на­шли способ добиться работоспособности в устройствах и браузерах с самыми скромными возможностями, то поймете, что постепенное усложнение является наиболее простым подходом.

Представьте себе маломощное устройство с весьма ограниченными возможностями: отсутствует JavaScript, не поддерживается Flexbox, нет поддержки CSS3 и CSS4. Что в подобных обстоятельствах можно сделать, чтобы обеспечить пользователю удобство восприятия содержимого?

Важнее всего создать на HTML5 выразительную разметку с точным описанием всего этого содержимого. Если создаются чисто текстовые или иные сайты, основанные на содержимом, то эта задача считается наиболее простой. В таком случае следует сконцентрироваться на правильном использовании элементов main, header, footer, article, section и aside. Это не только поможет отделить друг от друга различные разделы кода, но и обеспечит вашим пользователям повышенную доступность информации без каких-либо дополнительных затрат с вашей стороны.

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

примечание

Для дальнейшего изучения данной темы и получения полезных практических примеров я рекомендую следующие статьи: http://www.cssmojo.com/how-to-style-a-carousel/ и http://www.cssmojo.com/use-radio-buttons-for-single-option/. Они могут дать глубокое понимание того, как довольно сложные взаимодействия могут быть обработаны конструкциями, созданными на основе HTML и CSS.

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

А теперь поговорим о браузерах.

Определение матрицы браузерной поддержки

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

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

Самое главное здесь — установить, какой будет именно ваша начальная позиция. Тогда и только тогда можно будет определить и согласовать объем визуальных и функциональных наработок для различных намеченных для поддержки браузеров и устройств.

Функциональное, но не эстетическое единообразие

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

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

Выбор поддерживаемых браузеров

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

Если дело касается существующего сайта, посмотрите на статистику его посещений в Google Analytics или подобных системах. Получив представление, можно будет сделать ряд прикидок. Например, если стоимость поддержки браузера X ниже расчетных затрат на его поддержку, то нужно поддерживать браузер X!

Кроме того, если, по статистике, теми или иными браузерами пользуются менее 10 % пользователей, следует просмотреть статистику за предыдущие периоды и выявить тенденцию. Как объем использования менялся за последние 3, 6 и 12 месяцев? Если он составляет 6 % и его значение за последние 12 месяцев уменьшилось в два раза, то это более чем убедительный довод для принятия решения по исключению этого браузера из числа тех, к которым должны применяться конкретные усовершенствования.

Если дело касается нового проекта, статистика для которого еще не наработана, то я обычно придерживаюсь политики «двух предыдущих». Это текущая версия плюс две предыдущие версии каждого браузера. Например, если текущей является версия Internet Explorer 12, рассматривайте применение усовершенствований для этой версии, а также для IE10 и IE11 — двух ее предшественников. Проще, конечно, выбирать из самых популярных браузеров, подвергаемых постоянным обновлениям и имеющим короткий цикл выпуска следующей версии (к примеру, Firefox и Chrome).

Создание нескольких уровней пользовательского восприятия

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

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