Your SlideShare is downloading. ×
0
RigsbeeHall
                rigsbeeha11
                (those are two ones)


Thursday, March 25, 2010
http://www.flickr.com/photos/chavals/3045853162/




      delivering a
      responsive ui
      rebecca murphey • refresh...
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 ...
10s intolerable




                                              Amazon Home Page (5.43s)




   Google Results Page (942...
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.
                ...
Thursday, March 25, 2010
load your resources
      in the right order
                           http://www.flickr.com/photos/btsunami/1204911091/

...
<!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>Delivering a Responsive UI</ti...
<!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>Delivering a Responsiv...
your .htaccess file:
                            </p>
                            <pre>
        RewriteCond %{REQUEST_URI}...
</article>
                   </section>
                   </div>

             <script       src="js/jquery.js"></script...
combine & minify
      your resources
Thursday, March 25, 2010
combine & minify css
        # combine css into one file
        cat html5reset.css styles.css > tmp.css;

        # run y...
Thursday, March 25, 2010
<script src="js/LAB.min.js"></script>
                           <script>
                           $LAB
                ...
http://www.flickr.com/photos/vetustense/3838462120/




      allow for caching
      ... and cachebusting
Thursday, March ...
# .htaccess
          ExpiresActive On
          ExpiresDefault "access plus 480 weeks"
          ExpiresByType image/gif ...
# .htaccess
          RewriteCond %{REQUEST_URI} ^/v/[0-9.]+/
          RewriteRule ^v/[0-9.]+/(.*) /$1




       cachebu...
http://www.flickr.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 i...
use good selectors & cache selections
            // BAD
            $('.foo').addClass('bar');
            $('.foo').appe...
optimize event binding
            // this is fine ...
            $('div.foo').bind('click', function(e) {
              ...
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 performance
      early and often
Thursday, March 25, 2010
Thursday, March 25, 2010
Upcoming SlideShare
Loading in...5
×

Delivering a Responsive UI

6,569

Published on

Published in: Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,569
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
95
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Transcript of "Delivering a Responsive UI"

  1. 1. RigsbeeHall rigsbeeha11 (those are two ones) Thursday, March 25, 2010
  2. 2. http://www.flickr.com/photos/chavals/3045853162/ delivering a responsive ui rebecca murphey • refresh the triangle • march 2010 Thursday, March 25, 2010
  3. 3. Thursday, March 25, 2010
  4. 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. 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. 6. what slows sites down? (hint: it’s not the server) Thursday, March 25, 2010
  7. 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. 8. Thursday, March 25, 2010
  9. 9. load your resources in the right order http://www.flickr.com/photos/btsunami/1204911091/ Thursday, March 25, 2010
  10. 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. 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. 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. 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. 14. combine & minify your resources Thursday, March 25, 2010
  15. 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. 16. Thursday, March 25, 2010
  17. 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. 18. http://www.flickr.com/photos/vetustense/3838462120/ allow for caching ... and cachebusting Thursday, March 25, 2010
  19. 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. 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. 21. http://www.flickr.com/photos/otterlove/3208353418/ write faster javascript Thursday, March 25, 2010
  22. 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. 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. 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. 25. embrace modern browser features, over pixel perfection Thursday, March 25, 2010
  26. 26. Thursday, March 25, 2010
  27. 27. Thursday, March 25, 2010
  28. 28. Thursday, March 25, 2010
  29. 29. Thursday, March 25, 2010
  30. 30. http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/ Thursday, March 25, 2010
  31. 31. consider performance early and often Thursday, March 25, 2010
  32. 32. Thursday, March 25, 2010
  33. 33. thanks. blog.rebeccamurphey.com pinboard.in/u:rmurphey/t:responsive-ui/ slideshare.net/rmurphey/responsive-ui/ Thursday, March 25, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×