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.

1. Progressive EnhancementБеспрепятственноеиспользованиеновейших технологий Владимир Агафонкин Front-End Architect, Cogniance agafonkin@gmail.com

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

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

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

7. очень многие заказчикине решаются позволить использовать HTML5/CSS3 в своих проектах

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

9. Сайт не отображается одинаково в разных браузерах?

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

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

13. «Мы должны обеспечить целостность бренда и отвечать ожиданиям пользователя.»

14. «Мы должны обеспечить целостность бренда и отвечать ожиданиям пользователя.»

16. на разработку уходит слишком много времени (и нервов) вылезает слишком много багов страницы медленно загружаются и тормозят

17. Но должен ли сайт одинаково выглядеть в разных браузерах?

19. Но должен ли сайт одинаково выглядеть в разных браузерах?НЕТ!

20. веб-сайты ↔ печатные издания?

21. контент +устройство для потребления=медиа

22. Статьи и фотографии+Печатное изданиеконечный вид продукта — под полным контролем

23. контент для веб-сайта+IE6-IE8, IE9+, Firefox, Chrome, Opera, iOS Safari, Android; разный размер экранов; …устройства для потребления различаются, имеют разные возможности

24. фильмы и сериалы+телевизоры: ч/б, цветные, Full HD; проекторы, мониторы, …

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

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

27. User experience сайта в браузере должен диктоваться возможностями последнего

28. Сайты не должны выглядеть и работать абсолютно одинаково во всех браузерах

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

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

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

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

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

34. Progressive Enhancement (страница уже функциональна, отлично работает в старых мобильных браузерах, отлично читается поисковиками)

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

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

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

39. сплошной цвет заливки -> градиентный, полупрозрачный

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

41. обычный текст -> текст с особым шрифтом, тенью/свечением

42. текст в одну колонку -> текст в несколько колонок

43. обычный border ->декоративный border из картинки

44. статичное фоновое изображение -> растянутое, комбинация изображений

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

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

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

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

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

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

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

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

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

57. Вопросы?Владимир Агафонкинagafonkin@gmail.comskype: agafonkin@mourner