Delivering a Responsive UI

http://www.ﬂickr.com/photos/chavals/3045853162/

delivering a
responsive ui
rebecca murphey • refresh the triangle • march 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


10s intolerable

Amazon Home Page (5.43s)

Google Results Page (942ms)
Google Home Page (745ms) 1s responsive

100ms instantaneous

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


load your resources
in the right order
http://www.ﬂickr.com/photos/btsunami/1204911091/


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


</body>
</html>


</article>
</section>
</div>


</body>
</html>


combine & minify
your resources

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;


http://www.ﬂickr.com/photos/vetustense/3838462120/

allow for caching
... and cachebusting

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

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


http://www.ﬂickr.com/photos/otterlove/3208353418/

write faster
javascript


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


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'
});
}


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');
});


embrace modern
browser features,
over pixel perfection

http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/


consider performance
early and often

thanks.

blog.rebeccamurphey.com
pinboard.in/u:rmurphey/t:responsive-ui/
slideshare.net/rmurphey/responsive-ui/


Delivering a Responsive UI

More Related Content

What's hot

Similar to Delivering a Responsive UI

More from Rebecca Murphey

Recently uploaded

Delivering a Responsive UI