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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Также подумайте о функциях JavaScript, в которых отсутствует всесторонняя поддержка браузера. Это включает в себя получить API, push API, синтаксис функции стрелкиили даже браузеры без поддержки современных библиотек, таких как JQuery,

Каждая функция требует индивидуального тестирования с индивидуальным решением.

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

Если вы хотите провести живое тестирование, вы можете отключить CSS и JavaScript во всех основных браузерах, чтобы увидеть, как работает ваш сайт. Также стоит рассмотреть возможность использования таких расширений, как A-тестер за WCAG соблюдение.

JavaScript с прогрессивным улучшением – огромная тема. Вот несколько постов, которые помогут вам копнуть глубже:
Там, где прогрессивное улучшение не дотягивает
Хотя прогрессивное усовершенствование является блестящей идеей почти для любого типа современного веб-сайта, оно может просто не быть применимо к проектам, которые стремятся расширить границы веб-технологий.

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

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

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

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

Если вы хотите узнать больше о прогрессивном улучшении, ознакомьтесь со следующими публикациями:


0 Comments

Добавить комментарий