delivering a responsive ui

delivering a responsive uirebecca murphey • refresh the triangle • march 2010

http://www.flickr.com/photos/chavals/3045853162/

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


100ms instantaneous

1s responsive

10s intolerable

Google Home Page (745ms)

Google Results Page (942ms)

Amazon Home Page (5.43s)


what slows sites down?(hint: it’s not the server)


e top 10 websites spend less than 20% of total response time retrieving the HTML document.

— “High Performance Web Sites”, Steve Souders



http://responsive-ui/




http://www.flickr.com/photos/btsunami/1204911091/

load your resources in the right order




<!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 25KB components</strong>.”</li> </li> </ul> <img src="img/speed2.jpg" alt="http://www.flickr.com/photos/chavals/3063822245/">

<header> <h2>Responsive UI Checklist</h2> </header>

<article> <header> <h4>Are your resources in the right order?</h4> </header> <p> Put your CSS in the <head> of your document, and put your JavaScript as close to the closing </body> tag as you can. Make all of your CSS and JavaScript resources external to your HTML file unless you have a <em>really</em> good reason not to. </p> </article> <article> <header> <h4>Are you loading as few resources as possible?</h4> </header> <p> Combine your files (images, CSS, and JavaScript) to reduce the number of requests you're making to the server. Browsers only allow a limited number of simultaneous connections to a given host, so the fewer resources you have, the more quickly they can be downloaded. </p> </article> <article> <header> <h4>Are your resources as small as possible?</h4> </header> <p> Tools like <a href="http://developer.yahoo.com/yui/compressor/">YUI Compressor</a> can take your CSS and JavaScript files and strip out comments and whitespace and “munge” JavaScript variable names to make them shorter. This process of “minification” makes your files smaller, reducing the time required to download them, and thus clearing the way more quickly for other resources. </p> </article> <article> <header> <h4>Are you maximizing cacheability of files?</h4> </header> <p> Setting a <a href="http://www.websiteoptimization.com/speed/tweak/cache/">far-future expires header and setting the max-age Cache-Control value</a> will give browsers a signal that they don't need to re-fetch a resource. This reduces your HTTP overhead and clears the way for other resources to download. </p> <p> When you tell the browser to cache a file, you may later need to tell it to fetch a new version. You can use versioned URLs such as <code>/_v/1234/js/app.js</code>, and then include the following in 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> </body></html>


<!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="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> </body></html>


<!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"> </head><body> <ul id="banner"> <li class="news"><strong>News:</strong> Your website can be faster!</li> </ul>

<div id="wrapper">






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


combine & minifyyour resources


# combine css into one filecat html5reset.css styles.css > tmp.css;

# run yui compressor over the combined filejava -jar ~/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar --type css tmp.css > prod.css;

# remove the tmp file you createdrm tmp.css;

# combine all of the files that aren't likely to change into one filecat jquery.js jquery.blockui.js jquery.cycle.js jquery.validate.js > tmp.js;

# run yui compressor over the combined filejava -jar ~/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar tmp.js > prod.min.js;

# run yui compressor over your app filejava -jar ~/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar app.js > app.min.js;

# remove the tmp file you createdrm tmp.js;

combine & minify css

combine & minify js

spri

tes


allow for caching... and cachebusting

http://www.flickr.com/photos/vetustense/3838462120/




# .htaccessExpiresActive OnExpiresDefault "access plus 480 weeks"ExpiresByType image/gif "access plus 5 hours"

Header set Cache-Control "max-age=290304000, public"

expiration &cache control


cachebusting viaURL versioninghttp://www.rebeccamurphey.com/v/1234/responsive-ui/img/add.png

# .htaccessRewriteCond %{REQUEST_URI} ^/v/[0-9\.]+/RewriteRule ^v/[0-9\.]+/(.*) /$1


http://www.rebeccamurphey.com/v/1234/img/add.png

http://www.rebeccamurphey.com/v/1234/img/add.png

write faster javascript

http://www.flickr.com/photos/otterlove/3208353418/




// BADfor (var i=0; i<10; i++) { $('body').append('<li>list item number ' + i + '</li>');}

// BETTERvar $body = $('body');for (var i=0; i<10; i++) { $body.append('<li>list item number ' + i + '</li>');}

// BESTvar html;

for (var i=0; i<10; i++) { html += '<li>list item number ' + i + '</li>';}

$('body').append(html);

append all at once


// 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 selectionvar $foo = $('div.foo');

// test selection length if the element may not existif ($foo.length) { $foo .addClass('bar') .append('<p>hello world</p>') .css({ color : 'red', border : '1px solid blue' });}

use good selectors & cache selections


// this is fine ...$('div.foo').bind('click', function(e) { alert('clicked');});

// ... but this is faster!$('div.foo').bind('mousedown', function(e) { alert('clicked');});

optimize event binding


embrace modern browser features, over pixel perfection


http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/


http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

consider performanceearly and often


thanks.

blog.rebeccamurphey.com

pinboard.in/u:rmurphey/t:responsive-ui/

slideshare.net/rmurphey/responsive-ui/


delivering a responsive ui

Technology