Progressive EnhancementБеспрепятственноеиспользованиеновейших технологий<br />Владимир Агафонкин<br />Front-End Architect,...
Владимир Агафонкин<br /><ul><li>более 7 лет опыта во front-end-технологиях
Front-End Architect в компанииCogniance
разрабатываю JavaScript API для карт и геосервисов компании CloudMade
активный участник opensource, автор библиотеки для интерактивных карт Leaflet leaflet.cloudmade.com
музыкант, пишу песни, пою и играю в рок-группе Обійми Дощуrain.in.ua</li></li></ul><li>очень многие разработчикине решаютс...
очень многие заказчикине решаются позволить использовать HTML5/CSS3 в своих проектах<br />
«Это не позволит обеспечить полноценный user experience для всех пользователей.»<br />
Сайт не отображается одинаково в разных браузерах?<br />
«Непрофессионально!»<br />
«Показывает низкое качество работы!»<br />
«Мы должны обеспечить целостность бренда и отвечать ожиданиям пользователя.»<br />
«Мы должны обеспечить целостность бренда и отвечать ожиданиям пользователя.»<br />
на разработку уходит слишком много времени (и нервов)<br />вылезает слишком много багов<br />страницы медленно загружаются...
Но должен ли сайт одинаково выглядеть в разных браузерах?<br />
Но должен ли сайт одинаково выглядеть в разных браузерах?НЕТ!<br />
веб-сайты ↔ печатные издания?<br />
контент +устройство для потребления=медиа<br />
Статьи и фотографии+Печатное изданиеконечный вид продукта — под полным контролем<br />
контент для веб-сайта+IE6-IE8, IE9+, Firefox, Chrome, Opera, iOS Safari, Android; разный размер экранов; …устройства для п...
фильмы и сериалы+телевизоры: ч/б, цветные, Full HD; проекторы, мониторы, …<br />
как проблему решают в ТВ:<br />
как ее решают веб-разработчики:<br />
User experience сайта в браузере должен диктоваться возможностями последнего<br />
Сайты не должны выглядеть и работать абсолютно одинаково во всех браузерах<br />
Главная задача дизайна:не мешать пользователю воспринимать содержимое<br />
Важнейшее правило дизайна: фокусироваться на содержимом, а не представлении<br />
Стандартный подход к разработке:<br />
Стандартный подход к разработке:<br />
Стандартный подход к разработке:<br />
Progressive Enhancement<br />(страница уже функциональна, отлично работает в старых мобильных браузерах, отлично читается ...
Progressive Enhancement<br />(страница теперь соответствует основному дизайну и хорошо работает во всех браузерах)<br />
Progressive Enhancement<br />(теперь страница еще лучше выглядит в большинстве браузеров)<br />
Progressive Enhancement<br />(теперь страница в самых современных браузерах просто потрясает воображение)<br />
Progressive Enhancment и CSS3<br /><ul><li>прямоугольные блоки ->с закруглёнными уголками и тенью
сплошной цвет заливки -> градиентный, полупрозрачный
обычные ховер-эффекты -> плавные анимации
обычный текст -> текст с особым шрифтом, тенью/свечением
текст в одну колонку -> текст в несколько колонок
обычный border ->декоративный border из картинки
статичное фоновое изображение -> растянутое, комбинация изображений
Upcoming SlideShare
Loading in …5
×

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

1,960 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,960
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Progressive EnhancementБеспрепятственноеиспользованиеновейших технологий<br />Владимир Агафонкин<br />Front-End Architect, Cogniance<br />agafonkin@gmail.com<br />
  2. 2. Владимир Агафонкин<br /><ul><li>более 7 лет опыта во front-end-технологиях
  3. 3. Front-End Architect в компанииCogniance
  4. 4. разрабатываю JavaScript API для карт и геосервисов компании CloudMade
  5. 5. активный участник opensource, автор библиотеки для интерактивных карт Leaflet leaflet.cloudmade.com
  6. 6. музыкант, пишу песни, пою и играю в рок-группе Обійми Дощуrain.in.ua</li></li></ul><li>очень многие разработчикине решаются использовать HTML5/CSS3в серьёзных проектах<br />
  7. 7. очень многие заказчикине решаются позволить использовать HTML5/CSS3 в своих проектах<br />
  8. 8. «Это не позволит обеспечить полноценный user experience для всех пользователей.»<br />
  9. 9. Сайт не отображается одинаково в разных браузерах?<br />
  10. 10. «Непрофессионально!»<br />
  11. 11. «Показывает низкое качество работы!»<br />
  12. 12.
  13. 13. «Мы должны обеспечить целостность бренда и отвечать ожиданиям пользователя.»<br />
  14. 14. «Мы должны обеспечить целостность бренда и отвечать ожиданиям пользователя.»<br />
  15. 15.
  16. 16. на разработку уходит слишком много времени (и нервов)<br />вылезает слишком много багов<br />страницы медленно загружаются и тормозят<br />
  17. 17. Но должен ли сайт одинаково выглядеть в разных браузерах?<br />
  18. 18.
  19. 19. Но должен ли сайт одинаково выглядеть в разных браузерах?НЕТ!<br />
  20. 20. веб-сайты ↔ печатные издания?<br />
  21. 21. контент +устройство для потребления=медиа<br />
  22. 22. Статьи и фотографии+Печатное изданиеконечный вид продукта — под полным контролем<br />
  23. 23. контент для веб-сайта+IE6-IE8, IE9+, Firefox, Chrome, Opera, iOS Safari, Android; разный размер экранов; …устройства для потребления различаются, имеют разные возможности<br />
  24. 24. фильмы и сериалы+телевизоры: ч/б, цветные, Full HD; проекторы, мониторы, …<br />
  25. 25. как проблему решают в ТВ:<br />
  26. 26. как ее решают веб-разработчики:<br />
  27. 27. User experience сайта в браузере должен диктоваться возможностями последнего<br />
  28. 28. Сайты не должны выглядеть и работать абсолютно одинаково во всех браузерах<br />
  29. 29. Главная задача дизайна:не мешать пользователю воспринимать содержимое<br />
  30. 30. Важнейшее правило дизайна: фокусироваться на содержимом, а не представлении<br />
  31. 31. Стандартный подход к разработке:<br />
  32. 32. Стандартный подход к разработке:<br />
  33. 33. Стандартный подход к разработке:<br />
  34. 34. Progressive Enhancement<br />(страница уже функциональна, отлично работает в старых мобильных браузерах, отлично читается поисковиками)<br />
  35. 35. Progressive Enhancement<br />(страница теперь соответствует основному дизайну и хорошо работает во всех браузерах)<br />
  36. 36. Progressive Enhancement<br />(теперь страница еще лучше выглядит в большинстве браузеров)<br />
  37. 37. Progressive Enhancement<br />(теперь страница в самых современных браузерах просто потрясает воображение)<br />
  38. 38. Progressive Enhancment и CSS3<br /><ul><li>прямоугольные блоки ->с закруглёнными уголками и тенью
  39. 39. сплошной цвет заливки -> градиентный, полупрозрачный
  40. 40. обычные ховер-эффекты -> плавные анимации
  41. 41. обычный текст -> текст с особым шрифтом, тенью/свечением
  42. 42. текст в одну колонку -> текст в несколько колонок
  43. 43. обычный border ->декоративный border из картинки
  44. 44. статичное фоновое изображение -> растянутое, комбинация изображений
  45. 45. обычный layout -> подстраивающийся под разрешение экрана</li></li></ul><li>Главная страница Twitter без стилей<br />
  46. 46. Главная страница Twitter в IE8<br />
  47. 47. Главная страница Twitter в Chrome<br />
  48. 48. Progressive Enhancment и JS<br />if (awesomeFeatureSupported) {<br />//реализация офигенной штуки<br />//заменяет обычную функциональность<br />}<br />
  49. 49. GMail, форма отправки сообщения в IE<br />
  50. 50. GMail, форма отправки сообщения в FF и Chromeпри перетаскивании файла<br />
  51. 51. Progressive Enhancement<br />Получаемый таким подходом веб-сайт:<br /><ul><li>абсолютно потрясающе работает в некоторых браузерах
  52. 52. замечательно работает в большинстве браузеров
  53. 53. просто хорошо работает в устаревших браузерах
  54. 54. доступно работает в древнейших браузерах
  55. 55. прекрасно читается и ранжируется поисковиками
  56. 56. быстро разрабатывается, легко поддерживается</li></li></ul><li>разработчики плачут от счастья,пользователи довольны,заказчики считают деньги<br />
  57. 57. Вопросы?Владимир Агафонкинagafonkin@gmail.comskype: agafonkin@mourner<br />

×