Progressive Enhancement: беспрепятственное использование новейших технологий
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,901 views

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.

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.

Statistics

Views

Total Views
1,901
Views on SlideShare
1,890
Embed Views
11

Actions

Likes
1
Downloads
12
Comments
0

2 Embeds 11

http://a0.twimg.com 10
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Progressive EnhancementБеспрепятственноеиспользованиеновейших технологий
    Владимир Агафонкин
    Front-End Architect, Cogniance
    agafonkin@gmail.com
  • Владимир Агафонкин
    • более 7 лет опыта во front-end-технологиях
    • Front-End Architect в компанииCogniance
    • разрабатываю JavaScript API для карт и геосервисов компании CloudMade
    • активный участник opensource, автор библиотеки для интерактивных карт 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 сайта в браузере должен диктоваться возможностями последнего
  • Сайты не должны выглядеть и работать абсолютно одинаково во всех браузерах
  • Главная задача дизайна:не мешать пользователю воспринимать содержимое
  • Важнейшее правило дизайна: фокусироваться на содержимом, а не представлении
  • Стандартный подход к разработке:
  • Стандартный подход к разработке:
  • Стандартный подход к разработке:
  • Progressive Enhancement
    (страница уже функциональна, отлично работает в старых мобильных браузерах, отлично читается поисковиками)
  • Progressive Enhancement
    (страница теперь соответствует основному дизайну и хорошо работает во всех браузерах)
  • Progressive Enhancement
    (теперь страница еще лучше выглядит в большинстве браузеров)
  • Progressive Enhancement
    (теперь страница в самых современных браузерах просто потрясает воображение)
  • Progressive Enhancment и CSS3
    • прямоугольные блоки ->с закруглёнными уголками и тенью
    • сплошной цвет заливки -> градиентный, полупрозрачный
    • обычные ховер-эффекты -> плавные анимации
    • обычный текст -> текст с особым шрифтом, тенью/свечением
    • текст в одну колонку -> текст в несколько колонок
    • обычный border ->декоративный border из картинки
    • статичное фоновое изображение -> растянутое, комбинация изображений
    • обычный layout -> подстраивающийся под разрешение экрана
  • Главная страница Twitter без стилей
  • Главная страница Twitter в IE8
  • Главная страница Twitter в Chrome
  • Progressive Enhancment и JS
    if (awesomeFeatureSupported) {
    //реализация офигенной штуки
    //заменяет обычную функциональность
    }
  • GMail, форма отправки сообщения в IE
  • GMail, форма отправки сообщения в FF и Chromeпри перетаскивании файла
  • Progressive Enhancement
    Получаемый таким подходом веб-сайт:
    • абсолютно потрясающе работает в некоторых браузерах
    • замечательно работает в большинстве браузеров
    • просто хорошо работает в устаревших браузерах
    • доступно работает в древнейших браузерах
    • прекрасно читается и ранжируется поисковиками
    • быстро разрабатывается, легко поддерживается
  • разработчики плачут от счастья,пользователи довольны,заказчики считают деньги
  • Вопросы?Владимир Агафонкинagafonkin@gmail.comskype: agafonkin@mourner