Delivering a Responsive UI

  • 6,420 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,420
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
94
Comments
0
Likes
16

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. RigsbeeHall rigsbeeha11 (those are two ones) Thursday, March 25, 2010
  • 2. http://www.flickr.com/photos/chavals/3045853162/ delivering a responsive ui rebecca murphey • refresh the triangle • march 2010 Thursday, March 25, 2010
  • 3. Thursday, March 25, 2010
  • 4. “... a lot of people within Google think that the web should be fast. It should be a good experience, and so it’s sort of fair to say that if you’re a fast site, maybe you should get a little bit of a bonus. If you really have an awfully slow site, then maybe users don’t want that as much.” — Matt Cutts, Google Thursday, March 25, 2010
  • 5. 10s intolerable Amazon Home Page (5.43s) Google Results Page (942ms) Google Home Page (745ms) 1s responsive 100ms instantaneous Thursday, March 25, 2010
  • 6. what slows sites down? (hint: it’s not the server) Thursday, March 25, 2010
  • 7. e top 10 websites spend less than 20% of total response time retrieving the HTML document. — “High Performance Web Sites”, Steve Souders Thursday, March 25, 2010
  • 8. Thursday, March 25, 2010
  • 9. load your resources in the right order http://www.flickr.com/photos/btsunami/1204911091/ Thursday, March 25, 2010
  • 10. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Delivering a Responsive UI</title> <link rel="stylesheet" href="css/html5reset.css" type="text/css" media="screen" charset="utf-8"> <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8"> <script src="js/jquery.js"></script> <script src="js/jquery.blockui.js"></script> <script src="js/jquery.cycle.js"></script> <script src="js/jquery.validate.js"></script> <script src="js/app.js"></script> </head> <body> <ul id="banner"> <li class="news"><strong>News:</strong> Your website can be faster!</li> </ul> <div id="wrapper"> <section id="mainbar"> <section id="content"> <header> <h1>Delivering a Responsive UI</h1> </header> <img src="img/speed.jpg" alt="http://www.flickr.com/photos/chavals/3045853162/"> <p class="intro">Your visitors deserve a fast site; thankfully, with just a little bit of effort, you can provide a responsive experience. Here&rsquo;s why you need to care:</p> <ul> <li>&ldquo;&hellip; a lot of people within Google think that the web should be fast. It should be a good experience, and so it’s sort of fair to say that <strong>if you&rsquo;re a fast site, maybe you should get a little bit of a bonus</strong>. If you really have an awfully slow site, then maybe users donâ €™t want that as much.&rdquo; &mdash Matt Cutts, Google</li> <li>&ldquo;&hellip; the iPhone browser was able to cache a maximum of <strong>19 external Thursday, Marchcomponents</strong>.&rdquo;</li> 25KB 25, 2010
  • 11. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Delivering a Responsive UI</title> <link rel="stylesheet" href="css/html5reset.css" type="text/css" media="screen" charset="utf-8"> <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8"> <script src="js/jquery.js"></script> <script src="js/jquery.blockui.js"></script> <script src="js/jquery.cycle.js"></script> <script Thursday, March 25, 2010 src="js/jquery.validate.js"></script>
  • 12. your .htaccess file: </p> <pre> RewriteCond %{REQUEST_URI} ^/v/[0-9.]+/ RewriteRule ^v/[0-9.]+/(.*) /$1 </pre> <p> Then, set the version number in a config file, and change it as needed; when the version number changes, the browser will automatically fetch the resource, because it will see it as a resource it has never seen before. </p> </article> </section> </section> <section id="promos"> <article id="social"> <ul> <a href="http://pinboard.in/u:rmurphey/t:responsive-ui/"><li class="pinboard">Pinboard</ li></a> <a href="http://twitter.com/rmurphey"><li class="twitter">Twitter</li></a> <a href="http://linkedin.com/rmurphey"><li class="linkedin">LinkedIn</li></a> <a href="http://vimeo.com/yayquery"><li class="vimeo">Vimeo</li></a> <a href="http://slideshare.net/rmurphey"><li class="slideshare">Slideshare</li></a> <a href="http://flickr.com/photos/rdmey"><li class="flickr">Flickr</li></a> </ul> </article> </section> </div> <script src="js/jquery.js"></script> <script src="js/jquery.blockui.js"></script> <script src="js/jquery.cycle.js"></script> <script src="js/jquery.validate.js"></script> <script src="js/app.js"></script> </body> </html> Thursday, March 25, 2010
  • 13. </article> </section> </div> <script src="js/jquery.js"></script> <script src="js/jquery.blockui.js"></script> <script src="js/jquery.cycle.js"></script> <script src="js/jquery.validate.js"></script> <script src="js/app.js"></script> </body> </html> Thursday, March 25, 2010
  • 14. combine & minify your resources Thursday, March 25, 2010
  • 15. combine & minify css # combine css into one file cat html5reset.css styles.css > tmp.css; # run yui compressor over the combined file java -jar ~/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar --type css tmp.css > prod.css; # remove the tmp file you created rm tmp.css; combine & minify js # combine all of the files that aren't likely to change into one file cat jquery.js jquery.blockui.js jquery.cycle.js jquery.validate.js > tmp.js; # run yui compressor over the combined file sprites java -jar ~/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar tmp.js > prod.min.js; # run yui compressor over your app file java -jar ~/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar app.js > app.min.js; # remove the tmp file you created rm tmp.js; Thursday, March 25, 2010
  • 16. Thursday, March 25, 2010
  • 17. <script src="js/LAB.min.js"></script> <script> $LAB .script('js/prod.min.js') .wait() .script('js/app.min.js'); </script> <!-- <script src="js/prod.min.js"></script> <script src="js/app.min.js"></script> --> Thursday, March 25, 2010
  • 18. http://www.flickr.com/photos/vetustense/3838462120/ allow for caching ... and cachebusting Thursday, March 25, 2010
  • 19. # .htaccess ExpiresActive On ExpiresDefault "access plus 480 weeks" ExpiresByType image/gif "access plus 5 hours" Header set Cache-Control "max-age=290304000, public" expiration & cache control Thursday, March 25, 2010
  • 20. # .htaccess RewriteCond %{REQUEST_URI} ^/v/[0-9.]+/ RewriteRule ^v/[0-9.]+/(.*) /$1 cachebusting via URL versioning http://www.rebeccamurphey.com/v/1234/responsive-ui/img/add.png Thursday, March 25, 2010
  • 21. http://www.flickr.com/photos/otterlove/3208353418/ write faster javascript Thursday, March 25, 2010
  • 22. append all at once // BAD for (var i=0; i<10; i++) { $('body').append('<li>list item number ' + i + '</li>'); } // BETTER var $body = $('body'); for (var i=0; i<10; i++) { $body.append('<li>list item number ' + i + '</li>'); } // BEST var html; for (var i=0; i<10; i++) { html += '<li>list item number ' + i + '</li>'; } $('body').append(html); Thursday, March 25, 2010
  • 23. use good selectors & cache selections // BAD $('.foo').addClass('bar'); $('.foo').append('<p>hello world</p>'); $('.foo').css('color', 'red'); $('.foo').css('border', '1px solid blue'); // GOOD // use a better selector, and cache the selection var $foo = $('div.foo'); // test selection length if the element may not exist if ($foo.length) { $foo .addClass('bar') .append('<p>hello world</p>') .css({ color : 'red', border : '1px solid blue' }); } Thursday, March 25, 2010
  • 24. optimize event binding // this is fine ... $('div.foo').bind('click', function(e) { alert('clicked'); }); // ... but this is faster! $('div.foo').bind('mousedown', function(e) { alert('clicked'); }); Thursday, March 25, 2010
  • 25. embrace modern browser features, over pixel perfection Thursday, March 25, 2010
  • 26. Thursday, March 25, 2010
  • 27. Thursday, March 25, 2010
  • 28. Thursday, March 25, 2010
  • 29. Thursday, March 25, 2010
  • 30. http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/ Thursday, March 25, 2010
  • 31. consider performance early and often Thursday, March 25, 2010
  • 32. Thursday, March 25, 2010
  • 33. thanks. blog.rebeccamurphey.com pinboard.in/u:rmurphey/t:responsive-ui/ slideshare.net/rmurphey/responsive-ui/ Thursday, March 25, 2010