Progressive EnhancementБеспрепятственное использование новейших технологий
Владимир Агафонкин
Front-End Architect, Cogniance
Владимир Агафонкин• более 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
HTML, CSS, JavaScript вперемешку
Стандартный подход к разработке:
еще десяток костылей для IE6-8
костыль для старого FF
хак для Opera
костыль для IE8
костыль для IE7
альтернатива для IE6
еще одна мешанина HTML/CSS/JavaScript
HTML, CSS, JavaScript вперемешку
Progressive Enhancement
семантичный HTML
(страница уже функциональна, отлично работает в старых мобильных браузерах,
отлично читается поисковиками)
Progressive Enhancement
базовый CSS базовый JS
HTML
(страница теперь соответствует основному дизайну и хорошо работает во всех
браузерах)
Progressive Enhancement
клёвый CSS клёвый JS
базовый CSS базовый JS
HTML
(теперь страница еще лучше выглядит в большинстве браузеров)
Progressive Enhancement
офигенный CSS офигенный JS
клёвый 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
при перетаскивании файла
Progressive Enhancement
Получаемый таким подходом веб-сайт:
• абсолютно потрясающе работает в некоторых браузерах
• замечательно работает в большинстве браузеров
• просто хорошо работает в устаревших браузерах
• доступно работает в древнейших браузерах
• прекрасно читается и ранжируется поисковиками
• быстро разрабатывается, легко поддерживается
разработчики плачут от счастья,пользователи довольны,
заказчики считают деньги