Delivering a Responsive UI

RigsbeeHall rigsbeeha11 (those are two ones) Thursday, March 25, 2010

http://www.ﬂickr.com/photos/chavals/3045853162/ delivering a responsive ui rebecca murphey • refresh the triangle • march 2010 Thursday, March 25, 2010

Thursday, March 25, 2010

“... 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

10s intolerable Amazon Home Page (5.43s) Google Results Page (942ms) Google Home Page (745ms) 1s responsive 100ms instantaneous Thursday, March 25, 2010

what slows sites down? (hint: it’s not the server) Thursday, March 25, 2010

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

load your resources in the right order http://www.ﬂickr.com/photos/btsunami/1204911091/ Thursday, March 25, 2010

<!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’s why you need to care:</p> <ul> <li>“… 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’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.” &mdash Matt Cutts, Google</li> <li>“… the iPhone browser was able to cache a maximum of <strong>19 external Thursday, Marchcomponents</strong>.”</li> 25KB 25, 2010

<!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>

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

</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

combine & minify your resources Thursday, March 25, 2010

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

http://www.ﬂickr.com/photos/vetustense/3838462120/ allow for caching ... and cachebusting Thursday, March 25, 2010

# .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

# .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

http://www.ﬂickr.com/photos/otterlove/3208353418/ write faster javascript Thursday, March 25, 2010

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

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

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

embrace modern browser features, over pixel perfection Thursday, March 25, 2010

http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/ Thursday, March 25, 2010

consider performance early and often Thursday, March 25, 2010

thanks. blog.rebeccamurphey.com pinboard.in/u:rmurphey/t:responsive-ui/ slideshare.net/rmurphey/responsive-ui/ Thursday, March 25, 2010

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

Delivering a Responsive UI

by Rebecca Murphey on Mar 25, 2010

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 304

Statistics

Delivering a Responsive UI Presentation Transcript