Progressive Enhancement: беспрепятственное использование новейших технологий

Progressive EnhancementБеспрепятственное использование новейших технологий

Владимир Агафонкин

Front-End Architect, Cogniance

[email protected]

Владимир Агафонкин• более 7 лет опыта во front-end-технологиях

• Front-End Architect в компании Cogniance

• разрабатываю JavaScript API для карт и геосервисов компании CloudMade

• активный участник open source, автор библиотеки для интерактивных карт Leaflet leaflet.cloudmade.com

• музыкант, пишу песни, пою и играю в рок-группе Обійми Дощу rain.in.ua

очень многие разработчикине решаются использовать

HTML5/CSS3 в серьёзных проектах

очень многие заказчикине решаются позволить

использовать HTML5/CSS3 в своих проектах

«Это не позволит обеспечить полноценный user experience для

всех пользователей.»

Сайт не отображается одинаково

в разных браузерах?

«Непрофессионально!»

«Показывает низкое качество работы!»

«Мы должны обеспечить

целостность бренда и отвечать ожиданиям

пользователя.»

«Мы должны обеспечить

целостность бренда и отвечать ожиданиям

пользователя.»

• на разработку уходит слишком много времени (и нервов)

• вылезает слишком много багов• страницы медленно

загружаются и тормозят

Но должен ли сайт одинаково выглядеть в

разных браузерах?

Но должен ли сайт одинаково выглядеть в

разных браузерах?

НЕТ!

веб-сайты ↔

печатные издания?

контент +

устройство для потребления=

медиа

Статьи и фотографии+

Печатное издание

конечный вид продукта — под полным контролем

контент для веб-сайта+

IE6-IE8, IE9+, Firefox, Chrome, Opera, iOS Safari, Android; разный размер экранов; …

устройства для потребления различаются,

имеют разные возможности

фильмы и сериалы+

телевизоры: ч/б, цветные, Full HD; проекторы, мониторы, …

как проблему решают в ТВ:

как ее решают веб-разработчики:

User experience сайта в браузере должен

диктоваться возможностями

последнего

Сайты не должны выглядеть и работать

абсолютно одинаково во всех браузерах

Главная задача дизайна:не мешать пользователю

воспринимать содержимое

Важнейшее правило дизайна: фокусироваться на

содержимом, а не представлении

Стандартный подход к разработке:

HTML, CSS, JavaScript вперемешку


еще одна мешанина HTML/CSS/JavaScript



еще десяток костылей для IE6-8

костыль для старого FF

хак для Opera

костыль для IE8

костыль для IE7

альтернатива для IE6

еще одна мешанина HTML/CSS/JavaScript


Progressive Enhancement

семантичный HTML

(страница уже функциональна, отлично работает в старых мобильных браузерах,

отлично читается поисковиками)


базовый CSS базовый JS

HTML

(страница теперь соответствует основному дизайну и хорошо работает во всех

браузерах)


клёвый CSS клёвый JS


HTML

(теперь страница еще лучше выглядит в большинстве браузеров)


офигенный CSS офигенный JS

клёвый CSS клёвый JS


HTML

(теперь страница в самых современных браузерах просто потрясает воображение)

Progressive Enhancment и CSS3

• прямоугольные блоки → с закруглёнными уголками и тенью

• сплошной цвет заливки → градиентный, полупрозрачный

• обычные ховер-эффекты → плавные анимации

• обычный текст → текст с особым шрифтом, тенью/свечением

• текст в одну колонку → текст в несколько колонок

• обычный border → декоративный border из картинки

• статичное фоновое изображение → растянутое, комбинация изображений

• обычный layout → подстраивающийся под разрешение экрана

Главная страница Twitter без стилей

Главная страница Twitter в IE8

Главная страница Twitter в Chrome

Progressive Enhancment и JS

if (awesomeFeatureSupported) { // реализация офигенной штуки // заменяет обычную функциональность}

GMail, форма отправки сообщения в IE

GMail, форма отправки сообщения в FF и Chrome

при перетаскивании файла


Получаемый таким подходом веб-сайт:

• абсолютно потрясающе работает в некоторых браузерах

• замечательно работает в большинстве браузеров

• просто хорошо работает в устаревших браузерах

• доступно работает в древнейших браузерах

• прекрасно читается и ранжируется поисковиками

• быстро разрабатывается, легко поддерживается

разработчики плачут от счастья,пользователи довольны,

заказчики считают деньги

Вопросы?

Владимир Агафонкин[email protected]

skype: agafonkin@mourner

Technology

Progressive Enhancement: беспрепятственное использование новейших технологий