Лучшие практики для прогрессивного улучшения в веб-дизайне

Мастерство создания веб-сайтов невероятно сложно со многими быстро меняющимися частями. Цель сообщества веб-дизайнеров – уменьшить сложность и снизить вероятность ошибок на каждом этапе процесса создания.

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Это противоположно постепенному ухудшению, которое включает в себя все функции по умолчанию, а затем ухудшается, когда что-то не работает.

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

Эта List Apart статья утверждает, что прогрессивное улучшение – сначала контент, со стилями и динамическими компонентами, добавленными позже. Контент в семантическом HTML должен доставляться раньше всего.

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

Вот краткое изложение основных характеристик прогрессивного улучшения, которые вы должны принять во внимание:

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

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

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

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

Напишите семантическую разметку HTML и CSS, которая работает в максимально возможном количестве активных браузеров (поддержка старых браузеров, таких как поддержка IE5, не требуется).
Возьмите например это JSFiddle который использует поплавки с двумя боковыми панелями (.fixed) и областью содержания жидкости (.fluid). Если вы удалите весь CSS и повторно запустите код, вы заметите, что все хорошо складывается с первым столбцом, затем вторым и, наконец, последним.
Некоторые разработчики предпочли бы, чтобы столбец содержимого (.fluid) отображался первым в HTML. Это где прогрессивное улучшение вступает в игру, и альтернативные решения CSS стать жизнеспособным.

Две основные цели вашего HTML следующие:

Полностью семантический и действительный код
Последовательный опыт для всех

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

Если ваш код выглядит хорошо с CSS, как отключенным, так и включенным, то он предлагает разумное решение для всех.

Также стоит подумать, в какой момент вы отказываетесь от поддержки чего-либо. Microsoft уже упала основная поддержка IE6 поэтому пользователи, использующие этот браузер, могут не стоить вашего времени.

Но есть еще один большой вопрос: если браузер не поддерживает мой современный CSS, что мне делать?

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

Вам не нужны запасные варианты, потому что вы в основном предполагаете, что по умолчанию ничего не поддерживается.

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

Вы должны рассмотреть, как контент на самом деле течет без CSS. Например, когда я отключаю CSS на Веб-сайт Transmitсодержимое по-прежнему органично течет вниз по странице.
ОБРАЗ: ПередачаДа, это уродливо, и да, такое ощущение, что мы потеряли двадцать лет прогресса … но это работает.
3. Обработка JavaScript
Стоит отметить, что каждая проблема JavaScript, с которой вы можете столкнуться в процессе разработки, является сложной и уникальной. Когда вы создаете новый проект с прогрессивным улучшением, вы должны перечислить все необходимые функции на основе JS и подумать, как они могут работать без JavaScript.

Это потребует много онлайн-исследований, чтобы найти правильные решения. Аарон Густафсон написал отличный Сообщение блога с решениями различных проблем, таких как замена Ajax на метаобновление для содержимого внутри iframe.

Кроме того, когда вы создаете вкладки JavaScript, рекомендуется использовать якорные ссылки с реальными значениями идентификаторов. Таким образом, когда JavaScript отключен, вы все равно можете видеть вкладки и видеть их по значению привязки. Аарон написал еще одну статью Список отдельно это охватывает более общий обзор того, как вы должны думать об этих проблемах.

Вот еще один пример. Допустим, у вас есть ссылка, которая загружает контент динамически. Значение href пусто, потому что все загружается через JavaScript с preventDefault () метод.

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

Прогрессивное улучшение о больше чем JavaScriptНо с развитием веб-разработки с каждым годом нет сомнений, что JavaScript играет важную роль.

Работайте в предположении, что все отключено, и увеличивайте масштаб оттуда. Это может включать проблемы со встроенными виджетами, которые находятся вне вашего контроля,