wud rome 2014 - delightful ux – real-life responsive web design (en) - vitaly friedman
DESCRIPTION
With so many well designed websites out there, it’s not enough to be good — you have to be great. Visual design alone can just go so far — what you could be aiming for is creating delightful user experiences. Rich, beautiful, smooth experiences that help you stand out and ensure that the user is in the flow. In this talk, we’ll discuss a few tips and techniques and examples of how to make it work and captivate users — for good.TRANSCRIPT
![Page 1: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/1.jpg)
![Page 2: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/2.jpg)
Real-Life Responsive Web Design
Vitaly Friedman13/11/2014 • Rome, Italy
![Page 3: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/3.jpg)
Vitaly Friedman, editor-in-chiefand co-founder of SmashingMag
![Page 4: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/4.jpg)
![Page 5: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/5.jpg)
Design Systems
![Page 6: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/6.jpg)
![Page 7: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/7.jpg)
![Page 8: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/8.jpg)
![Page 9: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/9.jpg)
![Page 10: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/10.jpg)
![Page 11: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/11.jpg)
![Page 12: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/12.jpg)
![Page 13: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/13.jpg)
![Page 14: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/14.jpg)
![Page 15: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/15.jpg)
![Page 16: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/16.jpg)
![Page 17: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/17.jpg)
![Page 18: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/18.jpg)
![Page 19: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/19.jpg)
![Page 20: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/20.jpg)
![Page 21: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/21.jpg)
![Page 22: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/22.jpg)
![Page 23: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/23.jpg)
![Page 24: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/24.jpg)
![Page 25: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/25.jpg)
![Page 26: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/26.jpg)
![Page 27: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/27.jpg)
![Page 28: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/28.jpg)
![Page 29: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/29.jpg)
![Page 30: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/30.jpg)
Patty Toland, FilamentGroup, “Design Consistency for RWD”, https://t.co/Tb0q1gMwQS
![Page 31: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/31.jpg)
Responsive Considerations
• Components
Flexible gridTypographyNavigationAccessible form controlsCarouselsTabbed navigationResponsive tablesAccordionsMedia lists Drop-downs PaginationData tablesButtons Icon fonts
• Strategy
Responsive imagesResponsive typographyAccessibility architectureLegacy browser supporti18n/l10n tolerancePerformance budgetInteraction/AnimationsResponsive advertising
![Page 32: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/32.jpg)
• Strategy
Responsive imagesResponsive typographyAccessibility architectureLegacy browser supporti18n/l10n tolerancePerformance budgetInteraction/AnimationsResponsive advertising
• Layouts
Homepage layoutSubpage layoutArticle index layoutArticle layoutProduct index layoutProduct detail layoutSign up flowCheckout flow
• Components
Flexible gridTypographyNavigationAccessible form controlsCarouselsTabbed navigationResponsive tablesAccordionsMedia lists Drop-downs PaginationData tables Buttons Icon fonts
![Page 33: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/33.jpg)
![Page 34: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/34.jpg)
![Page 35: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/35.jpg)
![Page 36: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/36.jpg)
![Page 37: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/37.jpg)
![Page 38: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/38.jpg)
![Page 39: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/39.jpg)
![Page 40: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/40.jpg)
![Page 41: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/41.jpg)
![Page 42: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/42.jpg)
![Page 43: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/43.jpg)
![Page 44: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/44.jpg)
![Page 45: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/45.jpg)
![Page 46: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/46.jpg)
![Page 47: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/47.jpg)
![Page 48: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/48.jpg)
![Page 49: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/49.jpg)
![Page 50: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/50.jpg)
![Page 51: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/51.jpg)
![Page 52: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/52.jpg)
Smart URL Design
![Page 53: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/53.jpg)
![Page 54: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/54.jpg)
![Page 55: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/55.jpg)
http://global.burton.com/on/demandware.store/Sites-Burton_GLOBAL-Site/default/Home-Show/index.html
![Page 56: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/56.jpg)
![Page 57: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/57.jpg)
![Page 58: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/58.jpg)
What fascinates me are a few things: how something that got its roots in late 19th century over a course of the century turned into something as established as Teletext. What does it
![Page 59: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/59.jpg)
![Page 60: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/60.jpg)
![Page 61: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/61.jpg)
![Page 62: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/62.jpg)
![Page 63: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/63.jpg)
![Page 64: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/64.jpg)
![Page 65: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/65.jpg)
![Page 66: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/66.jpg)
Progressive Reduction
![Page 67: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/67.jpg)
“ Your proficiency in a product will decay over time without usage. As such, this proficiency is reflected in experience decays over time. These decays should be avoided at all costs.
— Allan Grinshtein
![Page 68: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/68.jpg)
Progressive Reduction
• Usability is a moving target; users getsmarter at a product as they keep using it.
• An interface should adapt and enable usersto become more efficient at using it.
• Idea: change the UI as the user moves through different stages of proficiency.
![Page 69: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/69.jpg)
![Page 70: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/70.jpg)
Progressive Reduction
• Every UI regresses without usage. For major features, track and observe their usage.
• Create a proficiency profile for every user;as a feature is used more, start reducing the “hand-holding” in a series of levels.
![Page 71: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/71.jpg)
Progressive Reduction
• Assign a proficiency level to each feature and design its variations for each level.
• If a user doesn’t use a feature for a long time, UI regresses back to level 1.
• If a user uses a feature more, UI keeps increasing levels to the “advanced” mode.
![Page 72: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/72.jpg)
![Page 73: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/73.jpg)
![Page 74: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/74.jpg)
![Page 75: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/75.jpg)
![Page 76: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/76.jpg)
![Page 77: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/77.jpg)
![Page 78: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/78.jpg)
Designing for Extremes
![Page 79: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/79.jpg)
![Page 80: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/80.jpg)
“ We have clients come to us and say, “We know our average customer. She’s female, 34 years old, with 2.3 kids…” But what we really need to do to design well, is to look at the extremes…
— Dan Formosa, “Smart Design”
![Page 81: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/81.jpg)
“ ...the weakest, or the person with arthritis, or the athlete, or the strongest or the fastest person. Because if we really understand what the extremes are, the middle will take care of itself.
— Dan Formosa, “Smart Design”
![Page 82: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/82.jpg)
![Page 83: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/83.jpg)
![Page 84: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/84.jpg)
![Page 85: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/85.jpg)
![Page 86: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/86.jpg)
Designing for Extremes
• Average user is an artificial, static representation of users that don’t exist.
• Real users change constantly, reaching different positions, roles and contexts.
• Idea: optimize for edge cases first, then converge towards more common cases.
![Page 87: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/87.jpg)
![Page 88: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/88.jpg)
![Page 89: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/89.jpg)
![Page 90: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/90.jpg)
![Page 91: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/91.jpg)
Skeleton Screens
![Page 92: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/92.jpg)
![Page 93: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/93.jpg)
![Page 94: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/94.jpg)
Skeleton Screens
• Good feedback focuses on the progress;keeps updating current state to ease anxiety.
• Blank screens are user experience gaps that disrupt user experience. Progress bars focus on the waiting; focus on the progress instead.
• JavaScript:var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }
• Idea: minimize gaps to reduce friction with “seamless” transitionsand skeleton screens.
![Page 95: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/95.jpg)
![Page 96: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/96.jpg)
![Page 97: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/97.jpg)
![Page 98: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/98.jpg)
![Page 99: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/99.jpg)
![Page 100: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/100.jpg)
![Page 101: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/101.jpg)
![Page 102: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/102.jpg)
![Page 103: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/103.jpg)
![Page 104: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/104.jpg)
![Page 105: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/105.jpg)
![Page 106: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/106.jpg)
![Page 107: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/107.jpg)
Performance Strategy
![Page 108: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/108.jpg)
“ There is no difference for the user between a site being down and a site being inaccessible due to loading issues caused by blocking resources or slow networks.
— Andy Hume“Real-Life Responsive Redesign”, SmashingConf 2013
![Page 109: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/109.jpg)
![Page 110: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/110.jpg)
![Page 111: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/111.jpg)
• T-Mobile roaming charges for loading the full front page of Vogue.co.uk, in Moscow: €93,13
![Page 112: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/112.jpg)
![Page 113: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/113.jpg)
![Page 114: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/114.jpg)
![Page 115: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/115.jpg)
![Page 116: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/116.jpg)
![Page 117: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/117.jpg)
![Page 118: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/118.jpg)
The Guardian Redesign (2013)
• Project goals focused on mobile experience:
• Tackle dropping print circulation with mobile,• Replace the slow, rigid mobile/desktop sites,
• Solution: a mobile-first “stealth” redesign with a strong focus on progressive enhancement.
• First focus on “mobile” experience, • Long term: new RWD client-side architecture,• Ultimate goal: one code base, one responsive site.
![Page 119: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/119.jpg)
![Page 120: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/120.jpg)
“ “Core HTML content first” with “Core CSS styles first” is a simple corollary of the good ol’ progressive enhancement.
— Andy Hume“Real-Life Responsive Redesign”, SmashingConf 2013
![Page 121: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/121.jpg)
The Guardian Redesign
• Priority lists for content and styles to define “core”:
• Core content doesn’t rely on JavaScript,• Only one main feature image considered “core”,• No Ajax support for ratings, comments and live scores,
• “Cutting the mustard” to “buckle” browsers,• Web fonts aren’t loaded by default (prevent FOUT).
![Page 122: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/122.jpg)
The Guardian’s Modular Load
• Consider at least three types of page content:
• JavaScript:var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }
• Core content(essential HTML+CSS, usable non-JS enhanced experience);
• Enhancement(JS, Geolocation, touch, enhanced CSS, Web fonts, widgets);
• Leftovers(analytics, advertising, third-party content).
• Idea: load Core content first, then Enhancement on DOMContentReady, then Leftovers on Load.
![Page 123: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/123.jpg)
![Page 124: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/124.jpg)
![Page 125: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/125.jpg)
![Page 126: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/126.jpg)
![Page 127: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/127.jpg)
![Page 128: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/128.jpg)
The Guardian’s Modular Load
• JavaScript:var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }
• Load JS into a browser asynchronously.While JS is being downloaded, browser stillcan parse the document and show content.
• HTML/JS (for modern browsers):@if(isModernBrowser) { <script src="enhanced.js" async defer></script> }
![Page 129: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/129.jpg)
![Page 130: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/130.jpg)
BBC’s isModernBrowser( )
• JavaScript:var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }
• We can use server-side device detection using UA strings with DeviceAtlas, WURFL etc.
• We can use client-side feature detection to split browsers into groups “HTML4” / “HTML5”.
• JS:if ( 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window ) { // HTML5 browser detected; load the JS app}
![Page 131: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/131.jpg)
BBC’s isModernBrowser( )
• JavaScript:var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }
• JS:if ( 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window ) { // HTML5 browser detected; load the JS app}
• HTML5 Browsers:IE9+, FF 3.5+, Opera 9+,Safari 4+, Chrome 1+, iOS1+,Android phone and tablets 2.1+, Blackberry OS6+, Win 7.5+,Mobile Firefox, Opera Mobile
• HTML4 Browsers:IE8-, Blackberry OS5-,Nokia S60 v6-, Nokia S40,Symbian, Windows 7 Phone (pre-Mango), a plethora of legacy devices.
![Page 132: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/132.jpg)
![Page 133: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/133.jpg)
![Page 134: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/134.jpg)
• A median start render time for an uncached page: 0.798 seconds (iPhone 4, 3G, 1.6Mps, 300ms RTT).
• Guardian users need to successfully complete1 HTTP-request to start reading the news.
![Page 135: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/135.jpg)
• Median time for an uncached page to start displaying: 0.727 seconds (stable networks).
• With enhanced JS loaded, front page has 35 images on “desktop”, 67 requests, 657 Kb.
![Page 136: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/136.jpg)
![Page 137: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/137.jpg)
![Page 138: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/138.jpg)
![Page 139: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/139.jpg)
![Page 140: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/140.jpg)
![Page 141: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/141.jpg)
![Page 142: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/142.jpg)
SmashingMag’s Refactoring
• Drawbacks prompted a focus on performance:
• Independent sections with separate WP-installs,• Accessing content was difficult on slow connections,
• Question: (once we clean up the front-end), how fast can we be, rather than how fast should we be?
• Decoupling JS dependencies (also with ads), • Dealing with annoying Web fonts loading.• Ultimate goal: one code base, one responsive site.
![Page 143: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/143.jpg)
“ So how fast ist fast enough? A Speed Index of under 1000. And for professionals that get there, they should shoot for delivering the critical-path view (above the fold) in the first 14Kb of the page.
— Paul Irish
![Page 144: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/144.jpg)
Performance Strategies
• Average page load (onLoad) doesn’t say much about the quality of performance. Metrics:
• JavaScript:var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }
• Visual comparison (against competitors)• Interface response times (<=100ms)• Start render time within 1s on a suboptimal 3G
(“above-the-fold” optimization),• Monitor perf. with a private instance of WebPageTest,• Run code against performant budget (Grunt-task).
![Page 145: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/145.jpg)
![Page 146: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/146.jpg)
![Page 147: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/147.jpg)
![Page 148: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/148.jpg)
SmashingMag’s Modular Load
• Consider three types of page content:
• JavaScript:var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }
• Core content(essential HTML+CSS, usable non-JS enhanced experience);
• Enhancement(JS, syntax highlighter, full CSS, Web fonts, comments);
• Leftovers(analytics, advertising, Gravatar images).
• Idea: load Core content first, then Enhancement on DOMContentReady, then Leftovers on Load.
![Page 149: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/149.jpg)
![Page 150: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/150.jpg)
SmashingMag’s Optimization
• Minor optimizations based on a simple principle: optimize content, defer the rest.
• Load critical CSS inline and full CSS on load,• Avoid JavaScript libraries ( jQuery → JavaScript),• Store Web fonts in localStorage + cookies,• Defer advertising, tracking and all non-critical CSS/JS,• Replaced Respond.js with IE8 stylesheet (fixed-width).• Optimize the critical rendering path for content delivery.
![Page 151: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/151.jpg)
![Page 152: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/152.jpg)
![Page 153: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/153.jpg)
![Page 154: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/154.jpg)
![Page 155: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/155.jpg)
![Page 156: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/156.jpg)
![Page 157: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/157.jpg)
An Ongoing Battle
• Minor optimizations prompted us to review and adjust our editorial workflow:
• Using srcset and sizes for images in articles,• Using grunt-perfbudget to track performance,• Measuring changes in traffic and ad impressions,• Reviewing articles for performance before publishing,• PageSpeed >= 98 both on mobile and desktop as a goal.
• Next: WebViews issues, “jumps” to comments, defer Gravatars, move to new servers, <picture>.
![Page 158: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/158.jpg)
![Page 159: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/159.jpg)
![Page 160: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/160.jpg)
![Page 161: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/161.jpg)
![Page 162: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/162.jpg)
![Page 163: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/163.jpg)
![Page 164: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/164.jpg)
HTTP/1.1
• HTTP was designed for connections and bandwidth much different from today.
• JavaScript:var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }
• Single request per connection,• Browsers can use max. 6 connections per domain, • Exclusively client-initiated requests,• Uncompressed request and response headers,• Redundant headers,• Optional data compression,• HTTP is slow, HTTPS is even slower.
![Page 165: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/165.jpg)
Delivering The Goods, Paul Irish, https://www.youtube.com/watch?v=R8W_6xWphtw
![Page 166: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/166.jpg)
SPDY / HTTP/2.0
• SPDY, the core of HTTP/2.0, promises speed improvement and decreased network latency.
• JavaScript:var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }
• 64% reductions in page load times,• 23% mean page load time improvement on mobile,• Unlimited number of parallel requests per connection,• Quicker slow start and better compression, • Developers can prioritize resources,• Always requires SSL/TLS for security,
• Extension of HTTP/1.1; as such, falls back to HTTP/1.1.
![Page 167: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/167.jpg)
![Page 168: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/168.jpg)
• Requires server-side and client-side implementations.
• Available for Apache 2.2 (mod_spdy),Nginx (ngx_http_spdy_module).
![Page 169: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/169.jpg)
• Requires server-side and client-side implementations.
• Available for IE 11+ (Win 8.1), Chrome 4+, Firefox 13+, Opera 12.1+, Amazon Sink, Android, not Safari.
![Page 170: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/170.jpg)
• Used by Google (Gmail), WordPress.com, CloudFlare, Facebook, Twitter. Different browsers support different versions of SPDY.
![Page 171: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/171.jpg)
![Page 172: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/172.jpg)
![Page 173: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/173.jpg)
“ SmashingMag is the only site I can read on an EDGE connection when commuting in São Paulo, every day. It makes me think why other sites aren’t optimizing for slow connections, too.
— a reader from Brazil
![Page 174: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/174.jpg)
![Page 175: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/175.jpg)
Thank you.
![Page 176: WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly Friedman](https://reader030.vdocument.in/reader030/viewer/2022012922/55943e231a28abe35b8b46c9/html5/thumbnails/176.jpg)