SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Progressive enhancement techniques are used to improve perceived performance. Incorporating progressive enhancement early in product design and development process can ensure that fast user experience is not an afterthought but is baked into the product.
Progressive enhancement techniques are used to improve perceived performance. Incorporating progressive enhancement early in product design and development process can ensure that fast user experience is not an afterthought but is baked into the product.
10.
MOVIES OR PAINTINGS?
Speed vs. Fluency, What drives user engagement?
Kent Alstad, Velocity NY 2015
11.
PERFORMANCE CHOREOGRAPHERS
Performance Choreography
Tim Kadlec, WebPerfDays NY 2014
12.
PROGRESSIVE ENHANCEMENT
➤ Enhance page features progressively
as it loads and renders
➤ Main goals:
1. Enable features based on
browser capabilities
(e.g. JavaScript, image formats,
local storage, gyro/compass)
2. Reveal features as page is being
downloaded and rendered
(render basic html + CSS, add
JS handlers, fonts, etc)
13.
FEATURES BASED ON CAPABILITIES
book by Filament Group
http://filamentgroup.com/dwpe/
21.
ACKNOWLEDGE ACTION
➤ Disable submit button with “in progress” label,
disable form elements
➤ Show transitional overlay (e.g. “Opening PayPal…”)
➤ Erase content area of the page
➤ No spinners!
27.
STAGES & TECHNICAL CONSTRAINTS
Stage
1. Verify destination
2. Provide primary content
3. Allow interaction
4. Show secondary content
5. Invisible tasks
Acknowledge action
Technology Constraints
1. Inline CSS & Logo, 14K
2. no JS, CSS, just HTML, image
3. Skeletal CSS, async JS
4. All CSS, above the fold images,
fonts, AJAX-in content
5. The rest
Pre-transition feedback,
fake transition
28.
THROUGHOUT DESIGN & DEV PROCESS
➤ Wires (multiple)
➤ PSD / Sketch Mockups (multiple files)
➤ HTML Mockups (separate HTML files)
➤ Front-end implementation (query string params)?
➤ Full implementation (in dev / test / pre-prod)?
http://test.mysite.com/page.html?stage=1
http://test.mysite.com/page.html?stage=2
...