progressive enhancement: беспрепятственное использование...
DESCRIPTION
Slides from my talk about Progressive Enhancement on UXNext HTML5 Picnic in Kiev (held 11 October 2011). Inspired by "Progressive Enhancement 2.0" talk by Nicholas Zakas.TRANSCRIPT
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
Получаемый таким подходом веб-сайт:
• абсолютно потрясающе работает в некоторых браузерах
• замечательно работает в большинстве браузеров
• просто хорошо работает в устаревших браузерах
• доступно работает в древнейших браузерах
• прекрасно читается и ранжируется поисковиками
• быстро разрабатывается, легко поддерживается
разработчики плачут от счастья,пользователи довольны,
заказчики считают деньги