Responsive Responsive Design

  • Published on
    15-May-2015

  • View
    6.366

  • Download
    1

Embed Size (px)

DESCRIPTION

Presented at the New York Web Performance Meetup in NYC on April 23, 2013

Transcript

  • 1. Tim Kadlec @tkadlec 2012 Web Peformance Summit 8/29/2012ResponsiveResponsive DesignBuilding sites that are exible and fastNY Web Perf Meetup | April 23, 2013

2. Ethan MarcotteNow more than ever, were designing workmeant to be viewed along a gradient ofdierent experiences. Responsive webdesign oers us a way forward, nallyallowing us to design for the ebb and owof things.http://alistapart.com/article/responsive-web-design 3. John AllsoppThe control which designers know in theprint medium, and often desire in the webmedium, is simply a function of thelimitation of the printed page. We shouldembrace the fact that the web doesnt havethe same constraints, and design for thisexibility.http://alistapart.com/article/dao 4. More than layout 5. Ethan MarcotteNow more than ever, were designing workmeant to be viewed along a gradient ofdierent experiences. Responsive webdesign oers us a way forward, nallyallowing us to design for the ebb and owof things.gradient ofdierent experienceshttp://alistapart.com/article/responsive-web-design 6. Ethan MarcotteNow more than ever, were designing workmeant to be viewed along a gradient ofdierent experiences. Responsive webdesign oers us a way forward, nallyallowing us to design for the ebb and owof things.gradient ofdierent experienceshttp://alistapart.com/article/responsive-web-design 7. Stephanie RiegerShoot me nowresponsive design hasseemingly become confused with anopportunity to reduce performance ratherthan improve it.https://twitter.com/stephanierieger/status/245240465572642816 8. 74 requests, 1511kb114 requests, 1200kb99 requests, 1298kb105 requests, 5942kb 9. 48.97s,55632.80kb 10. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/ 11. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/ 12. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/ 13. Revenue 14. RevenueTraicConversionsSatisfactionPage views 15. 71%as quickly or fasterhttp://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile 16. Performance is afundamental component ofthe user experience. 17. Blame the implementation,not the technique. 18. March 2012: 829kbhttp://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/ 19. March 2012: 829kbMarch 2013: 1031kbhttp://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/ 20. Performance needs to matter because it matters to usersA culture of performance 21. A friendI doubt anyone really wants to release asite that doesnt perform well, its just aproduct of not being aorded the luxury oftime and top-down pressure. 22. Set a performance budget 23. Must be usable in = 0; j--) {! var children = toShow[j].childNodes;! for (var k = children.length - 1; k >= 0; k--) {! ! var child = children[k];! ! if (child.nodeType === 8) {! ! ! //its a comment! ! ! toShow[j].innerHTML = child.nodeValue;! ! ! break;! ! }! }} 58. Lazy-load images*maybe* 59.

60.

61.

62. 63. 64. 65. Maybe? 66. http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_ecient?fbid=PuB6hItpCvS 67. What about CSS? 68. Embeddeda {! text-decoration: none;}@media screen and (min-width: 1300px) {! a {! ! text-decoration: underline;! }} 69. External 70. Embedded ExternalOne HTTP request Many HTTP requestsLarge le could be hard to maintain Organization can be easierExtra weight, regardless of if neededSmaller CSS for device not supportingmedia queriesAll styles downloadedAll styles downloaded (if media queriessupported) 71. http://scottjehl.github.com/CSS-Download-Tests/ 72. Chrome 26Safari 6.0.2iOS Safari 6.1Android 4.2.1Android 4.2.1 Chrome 18Android 4.2.1 Chrome 18Android 4.2.1 Opera MiniYay! 73. Internet Explorer 10Internet Explorer 9Internet Explorer 8Firefox 20Opera 12.15Android 4.2.1 Opera MobileNooooo! 74. Go vanilla 75. https://twitter.com/ppk/status/249100988693241856 76. jQuery = 200-300msbased on 1.8.0http://jsperf.com/zepto-jq-eval 77. Up to 8s! 78. Custom jQuery builds 79. Everything hasa trade-o 80. What value does thisprovide? 81. Time to move beyondjust visual aesthetics 82. This may not be easy... 83. ...but man is it fun! 84. thank you!@tkadlec timkadlec.comTIM KADLEC 85. implementingresponsivedesign.com