softhelp.ru! | статьи теметики - сеть и сайты


Прогрессивное улучшение в дизайне


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

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

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

Преимущества адаптивного веб-дизайна по принципу «сперва проектируем для мобильной платформы»



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

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

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

Семантическая разметка



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

Атрибуты class и id также могут добавлять семантическое значение в документы, если им присвоены такие величины, как calendar, но не представления вроде left или top. Многие веб-разработчики используют классы стандартным путем (микроформатами) для обеспечения дополнительного семантического значения.

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