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