При создании сайта у вас есть несколько способов сделать это.
Вы можете начать с создания самой продвинутой версии сайта со всеми сценариями, стилями и т. Д., А затем сделать так, чтобы она отображалась в старых браузерах посредством постепенного ухудшения качества, вы можете проигнорировать старые браузеры или начать с базовую страницу и добавьте сценарии и стили, чтобы она стала более функциональной благодаря прогрессивному улучшению.
В этой серии мы рассмотрим последнее.
Во-первых, мы собираемся взглянуть на теорию прогрессивного улучшения. Но не пугайтесь — это не ракетостроение. Правила, которым вы должны будете следовать, просты.
Почему?
Вы можете спросить: почему я должен беспокоиться о старых браузерах? На данный момент большинство основных браузеров обновляются автоматически.
Прежде всего, если вы не создаете высоко интерактивное веб-приложение, вы должны учитывать пользователей с ограниченными возможностями. Они могут использовать программы чтения с экрана для доступа к вашему сайту, и эти программы не читают стили или сложные интерфейсы просто потому, что пользователю будет слишком сложно понять, что находится на странице.
Во-вторых, есть люди, которые отключают JavaScript и / или CSS. Для этого есть много причин — ограничение пропускной способности, медленные соединения и личные предпочтения. Некоторые люди также используют текстовые браузеры, которые могут анализировать ограниченное количество CSS, но игнорируют JavaScript.
Далее, это сделает ваш код более понятным. Скорее всего, у вас будет больше семантического HTML. Вы сможете вернуться к нему в будущем и легко понять, что происходит с разметкой, стилями и сценариями.
Наконец, важно помнить, что существуют среды, которые не позволяют пользователям устанавливать или обновлять любое программное обеспечение, включая веб-браузер (это популярно в крупных корпорациях).
И если вы все еще не уверены, некоторые страны даже приняли соответствующие законы, вынуждая веб-разработчиков сделать свои сайты доступными для инвалидов ( например, в Великобритании ).
Основные принципы
Теперь давайте рассмотрим основные правила создания сайтов с использованием прогрессивного улучшения.
Основной контент должен быть доступен для всех веб-браузеров
Это кажется довольно простым, если вы понимаете контекст, в котором используется слово «контент».
Здесь «контент» — это информация, которую вы хотите, чтобы пользователь получил в ее самой простой форме — текст. С заголовками, аннотациями, ссылками, абзацами и т. П. Все в порядке, но изображения, музыка, анимации — это не тот контент, о котором мы здесь говорим (и их следует правильно описывать с помощью атрибутов alt и title ).
Теперь немного о «доступном» аспекте: не только все веб-браузеры должны отображать ваш контент, но и отображать его в читаемом формате. Таким образом, выгрузка всего текста в один абзац без форматирования — плохая идея.
Основные функциональные возможности должны быть доступны для всех веб-браузеров
Это означает, что если на вашей странице есть привязка или кнопка, пользователь все равно сможет перемещаться по контенту. Это не имеет значения, если он / она использует последнюю версию Chrome или более старую версию Internet Explorer.
Семантическая разметка содержит все содержимое
Этот момент требует более тщательного планирования, особенно когда речь идет о создании сложных дизайнов. Это заставляет вас размещать свой контент в основных тегах HTML с минимальным количеством из них. Это означает, что мы не можем вложить дюжину элементов <div> в себя, чтобы создать какой-то приятный эффект.
Если вы будете следовать этому правилу, ваш HTML будет чище и проще для понимания. Фейерверк будет находиться в CSS.
Улучшенная компоновка обеспечивается внешне связанным CSS
Прежде всего, забудьте о атрибуте style в тегах HTML. Вам придется использовать классы, идентификаторы и другие атрибуты и определить их внешний вид в таблице стилей.
Тег <style> не является опцией — таблицы стилей должны быть загружены с использованием тегов <link> , поэтому, если браузер не поддерживает CSS или он отключен, файлы не будут загружены.
Улучшенное поведение обеспечивается ненавязчивым, внешне связанным JavaScript
Это похоже на вышеприведенный пункт — в HTML нет обработчиков событий, нет тегов <script> в содержимом, и страница должна работать, даже если файл не загружен. Это означает, что вы не можете заставить пользователей полагаться на JavaScript, например, для отправки формы.
Настройки браузера конечного пользователя соблюдаются
Это немного сложнее. Вы можете спросить себя: какое отношение браузер пользователя имеет к моей веб-странице?
Первое отношение это CSS. В основном, макет должен быть отзывчивым. Все размеры шрифта должны быть относительно размера по умолчанию пользователя (используя единицы em вместо px ).
Другой касается JavaScript: если пользователь отключил его, не заставляйте его изменять этот параметр, если это не жизненно важно для функциональности сайта. Не показывайте большую красную рамку, говорящую о том, что сайт не будет работать без JavaScript — вместо этого найдите время, чтобы реализовать такую функциональность, чтобы он работал без JavaScript.
Процесс проектирования
Ваш процесс проектирования может не сильно измениться. Вы просто должны помнить вышеупомянутые правила и не создавать функциональность, которая их нарушает.
Если ваш дизайн соответствует современным стандартам, у вас все будет хорошо. Макет должен быть чистым и простым. Все эффекты должны быть чисто косметическими. Весь контент должен быть размещен таким образом, чтобы он не стал нечитаемым или непонятным, если CSS и JavaScript удалены.
Весь HTML, который предназначен только для эффектов, должен быть удален и, если это абсолютно необходимо, вставлен с использованием JavaScript при загрузке страницы, чтобы избежать загромождения страницы и использования слишком большой полосы пропускания пользователя (здесь ползунок JavaScript — прекрасный пример — не кладите его внутренний HTML-код непосредственно на странице. Он создаст большой беспорядок, если не будет стилей и скриптов).
Тестирование на прогрессивное улучшение
Тестирование требует нескольких приложений, а не только основных браузеров.
Читатели экрана
Это позволит вам «видеть» свою веб-страницу как человека с нарушениями зрения. Их много (полный список можно посмотреть здесь ). Я рекомендую ChromeVox . Это расширение Google Chrome и очень простое в использовании.
Текстовый браузер
Это не является абсолютно необходимым, поскольку вы можете удалить все CSS и JavaScript со своей веб-страницы, но если вы ищете отдельное приложение, я рекомендую Lynx .
W3C Validator
Не все придерживаются стандартов HTML и CSS или оценивают свою работу против них, но их использование поможет отследить проблемы с HTML, которые могут быть невидимы в современном браузере. Это важно, поскольку некоторые современные браузеры стараются понять — и исправить — сломанный HTML всякий раз, когда он отображается пользователю. Вы можете подтвердить свой код здесь .
Вывод
Это охватывает основную теорию прогрессивного улучшения. На этом этапе у вас должно быть все, что вам нужно знать, чтобы начать создавать и тестировать страницы с использованием этой стратегии.
В следующей статье мы применим эту теорию на практике, создадим базовый HTML-макет для нашей страницы и стилизуем его с помощью CSS.