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

773

Published on

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
773
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
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 />

×