Delivering a Responsive UI
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Delivering a Responsive UI

  • 8,080 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
8,080
On Slideshare
7,776
From Embeds
304
Number of Embeds
3

Actions

Shares
Downloads
94
Comments
0
Likes
16

Embeds 304

http://coderwall.com 279
http://www.slideshare.net 19
http://paper.li 6

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