delivering a responsive ui
Post on 08-May-2015
6.507 Views
Preview:
TRANSCRIPT
delivering a responsive uirebecca murphey • refresh the triangle • march 2010
http://www.flickr.com/photos/chavals/3045853162/
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
100ms instantaneous
1s responsive
10s intolerable
Google Home Page (745ms)
Google Results Page (942ms)
Amazon Home Page (5.43s)
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
Thursday, March 25, 2010
http://www.flickr.com/photos/btsunami/1204911091/
load your resources in the right order
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 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>
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 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>
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"> </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>
<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
<!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="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>
<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 & minifyyour resources
Thursday, March 25, 2010
# 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
Thursday, March 25, 2010
Thursday, March 25, 2010
<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
allow for caching... and cachebusting
http://www.flickr.com/photos/vetustense/3838462120/
Thursday, March 25, 2010
# .htaccessExpiresActive OnExpiresDefault "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
cachebusting viaURL versioninghttp://www.rebeccamurphey.com/v/1234/responsive-ui/img/add.png
# .htaccessRewriteCond %{REQUEST_URI} ^/v/[0-9\.]+/RewriteRule ^v/[0-9\.]+/(.*) /$1
Thursday, March 25, 2010
write faster javascript
http://www.flickr.com/photos/otterlove/3208353418/
Thursday, March 25, 2010
// 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
Thursday, March 25, 2010
// 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
Thursday, March 25, 2010
// 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
Thursday, March 25, 2010
embrace modern browser features, over pixel perfection
Thursday, March 25, 2010
Thursday, March 25, 2010
Thursday, March 25, 2010
Thursday, March 25, 2010
Thursday, March 25, 2010
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
Thursday, March 25, 2010
consider performanceearly and often
Thursday, March 25, 2010
Thursday, March 25, 2010
thanks.
blog.rebeccamurphey.com
pinboard.in/u:rmurphey/t:responsive-ui/
slideshare.net/rmurphey/responsive-ui/
Thursday, March 25, 2010
top related