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

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

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

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

1. Понимание прогрессивного улучшения

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

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

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

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

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

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

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

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

Но как насчет браузеров, которые не поддерживают современный CSS3? Именно здесь в игру вступают такие сайты, как «Могу ли я использовать». Вы должны решить, какие функции стоит реализовать, и сделать выводы на основе на целевой аудитории вашего сайта.

2. Прожиточный минимум в таблицах стилей

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

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

Напишите семантическую разметку HTML и CSS, которая работает в максимально возможном количестве активных браузеров (поддержка древних браузеров, таких как поддержка IE5, не требуется).

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

Некоторые разработчики предпочли бы иметь столбец контента (.жидкость) появляются первыми в HTML. Это где прогрессивное улучшение вступает в игру, и альтернативные решения CSS становятся жизнеспособными.

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

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

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

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

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

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

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

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

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

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

Да, это уродливо, и да, такое чувство, что мы потеряли двадцать лет прогресса ... но это работает.

3. Обработка JavaScript

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

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

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

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

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

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

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