Эта техника помогает создавать надежные и доступные веб-сайты
Прогрессивное улучшение – это техника, которая помогает обеспечить надежность и доступность вашего программного обеспечения. Следуя ей, вы можете гарантировать, что как можно больше людей смогут пользоваться вашим сайтом или приложением
Начните с минимально жизнеспособной версии вашего веб-дизайна и убедитесь, что она функционирует необходимым образом. Затем добавьте дополнительную функциональность и стилизацию, чтобы более мощные браузеры могли воспользоваться преимуществами
Как работает прогрессивное улучшение?
Из-за своей чрезвычайно распределенной природы веб всегда нуждался в поддержке огромного количества устройств. От базовых компьютеров 1970-х годов до современных настольных компьютеров, планшетов и телевизоров, веб-сайты прошли долгий путь
В основе всего лежит HTML. Поскольку это “прощающий язык, браузеры будут отображать HTML настолько хорошо, насколько они его понимают. Как правило, они игнорируют все, что не поддерживают
Это может быть полезно с точки зрения разработчика, но может создать проблемы для читателей. Если ваш сайт отображает пустую страницу, когда JavaScript не может быть запущен, у пользователей не остается другого выбора, кроме как покинуть его. Прогрессивное улучшение поощряет вас предоставлять основное содержимое всем, кто может получить к нему доступ, а затем улучшать это содержимое с помощью соответствующих технологий, таких как CSS и JavaScript
Прогрессивный подход к стилизации
CSS – это веб-язык таблиц стилей, который можно использовать для настройки цветов, шрифтов, макетов и многих других визуальных аспектов ваших страниц. Вы можете использовать его для улучшения стандартного вида вашего контента, но это не значит, что вы не должны правильно структурировать свой контент
Возьмем, к примеру, строку меню; вы можете структурировать ее следующим образом:
<nav>
<a href='/register'>register</a>
<a href='/login'>log in</a>
<a href='/about'>about us</a>
<a href='/contact'>contact</a>
</nav>
Чтобы отобразить горизонтальное меню, в котором каждая ссылка выглядит как кнопка, можно использовать следующий стиль CSS:
nav a {
text-decoration: none;
display: inline-block;
padding: 0. 5em 1em;
border: 1px solid;
border-radius: 8px;
margin-right: 1em;
}
Когда браузер полностью отобразит это, это должно выглядеть следующим образом:
Однако, если CSS недоступен, меню будет отображаться следующим образом:
Обратите внимание, что это совсем не похоже на меню, и пользоваться им не очень удобно, поскольку ссылки сливаются в одну
Вы можете использовать альтернативную структуру, чтобы сделать дизайн более надежным:
<nav>
<ul>
<li><a href='/register'>register</a></li>
<li><a href='/login'>log in</a></li>
<li><a href='/about'>about us</a></li>
<li><a href='/contact'>contact</a></li>
</ul>
</nav>
Поскольку в этой разметке используется элемент неупорядоченного списка, она гораздо более удобна для использования в отсутствие CSS:
Обратите внимание, насколько проще быстро просканировать и понять эти ссылки, даже со стилизацией браузера по умолчанию. Этот подход потребует от вас добавить немного больше CSS, чтобы переопределить стили списка по умолчанию:
nav li { display: inline; }
Несмотря на то, что окончательная структура и стилизация более сложны, а у большинства пользователей будет включен CSS, этот подход является более надежным. Он будет более удобен для пользователей программ чтения с экрана и браузеров на базе терминалов
Постепенное внедрение функциональности
Прогрессивное усовершенствование наиболее важно, когда речь идет о функционировании сайта или приложения. Этот принцип гласит, что, несмотря ни на что, ваш сайт должен функционировать настолько хорошо, насколько это возможно
На практике это, как правило, относится к JavaScript. Если вы вводите поведение на стороне клиента, оно должно быть слоем функциональности поверх сайта или приложения, которое уже работает без него
Очень распространенным случаем является обработка событий. Представьте себе страницу, которая загружает дополнительный контент по требованию. Это может быть ручная бесконечная прокрутка, вставка комментариев или что-то подобное
<body>
<!--. -->
<button onclick='load_more();'>
Load More
</button>
<!--. -->
</body>
Атрибут onclick кнопки содержит код JavaScript, который будет выполняться, когда кто-то нажмет на кнопку. Однако, если JavaScript недоступен, эта кнопка ничего не сделает. Пользователь будет вынужден нажимать на эту кнопку, не получая никакой обратной связи и не понимая, что происходит. Гораздо лучше использовать прогрессивное улучшение:
<body>
<!--. -->
<a id='p2' href='/page/2'>Page 2</a>
<script>
function load_more() { console.log('!'); }
/* Replace link with button */
var link = document.getElementById('p2');
var button = document.createElement('button');
button.innerText = 'Load More';
button.addEventListener('click', load_more);
document.body.insertBefore(button, link);
link.parentNode.removeChild(link);
</script>
</body>
Этот код превращает базовую ссылку в кнопку с обработчиком событий. Внедряя зависимость от JavaScript с помощью самого JavaScript, вы можете быть уверены, что это сработает. И есть функциональное поведение по умолчанию, которое работает, в виде стандартной ссылки на /page/2
Действительно ли необходимо прогрессивное улучшение?
Все используют браузеры с CSS и JavaScript, так зачем же стараться подстроиться под ситуацию, которая не возникает? Есть несколько причин, по которым вы должны принять хорошую практику прогрессивного улучшения
- Во-первых, не все посетители вашего сайта используют браузер. Некоторые посетители будут ботами, например, индексаторами поисковых систем, а они могут вообще не понимать CSS или JavaScript.
- Во-вторых, не каждый человек, посещающий ваш сайт, использует браузер с CSS и JavaScript. Некоторые посетители могут использовать браузер на базе терминала, который отображает обычный текст с минимальным форматированием. Другие могут использовать программу для чтения с экрана.
- В-третьих, даже если браузер поддерживает CSS и JavaScript, случаются сбои. Неработающая ссылка или плохое сетевое соединение могут привести к отсутствию файла.css или.js. Ошибка в JavaScript может привести к тому, что другой код вообще не будет выполняться.
- Наконец, некоторые посетители могут активно отключать CSS или JavaScript. Они могут сделать это из соображений конфиденциальности или потому, что у них медленное или платное соединение.
Прогрессивный образ мышления творит чудеса
Прежде всего, прогрессивное усовершенствование побуждает вас принять подход, ориентированный на контент. Контент – это король, поэтому ваши тексты и изображения должны быть всегда доступны для всех, независимо от того, как они заходят на ваш сайт
Предоставляя всем читателям наилучшие возможности, а затем делая их еще лучше для тех, кто может извлечь из этого пользу, вы можете получить лучшее из всех миров. Прогрессивное улучшение – это лишь один из ключевых компонентов хорошей практики доступности и юзабилити
Комментировать