Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fast and Easy Website Tune Ups

1,739 views

Published on

Published in: Technology, Design
  • Be the first to comment

Fast and Easy Website Tune Ups

  1. 1. Fast & Easy Site Tune-Ups Jeff Wisniewski Web Services Librarian University of Pittsburgh [email_address] NSLS 2009
  2. 2. Do we REALLY hate to redesign? <ul><li>Maintenance = Boring  </li></ul>Redesign = Exciting  NSLS 2009
  3. 3. Redesigning is Expensive! <ul><li>Redesign is expensive for you </li></ul><ul><li>Redesign is expensive for users </li></ul><ul><li>Lots of important sites don’t “redesign” </li></ul>NSLS 2009
  4. 4. Amazon 2000 NSLS 2009
  5. 5. Amazon 2006 NSLS 2009
  6. 6. Amazon 2009 NSLS 2009
  7. 7. This idea is not exactly new… <ul><li>The Quiet Death of the Major Re-Launch </li></ul><ul><li>By Jared M. Spool </li></ul><ul><li>Originally published: May 20, 2003 </li></ul>
  8. 8. Users dislike redesigns…a lot <ul><li>Facebook anti-redesign group has 1.7 million members. </li></ul><ul><li>last.fm: redesign drew over 2,000 comments often strongly negative. </li></ul><ul><li>The Guardian, FT.com, and the BBC also transformed themselves recently, with ‘robust’ opinion voiced on each. </li></ul>
  9. 9. Redesign and the five stages of user grief <ul><li>Denial: “Why did you change it? I was always able to find what I needed!” </li></ul><ul><li>Anger : “You have rendered the site useless and I will never use it again!” </li></ul><ul><li>Bargaining : “If you could just revert back to the OLD ejournal page that would be great!” </li></ul><ul><li>Depression : “I have no idea what I’m going to do now…” </li></ul><ul><li>Acceptance : “While I dislike the design I was able to find the catalog link quite easily…” </li></ul>
  10. 10. Happiness Time Launch YOU USERS
  11. 11. Time until “redesign” (months) 12 0 6 amount of maintenance performed a lot pretty much none
  12. 12. … because two minutes is a minute too long! <ul><li>Credibility </li></ul><ul><li>Content </li></ul><ul><li>Design </li></ul><ul><li>Tech </li></ul><ul><li>Metrics and assessment </li></ul><ul><li>Social </li></ul>NSLS 2009
  13. 13. Credibility <ul><li>making your website in such a way that it comes across as trustworthy and knowledgeable </li></ul>NSLS 2009
  14. 14. It’s a Matter of Trust <ul><li>PHP example: </li></ul><ul><li><p>Copyright &copy; <?php echo date(&quot;Y&quot;) ?>My Library, My Town</p> </li></ul>NSLS 2009 JavaScript example: <p>Copyright &copy; <script type=&quot;text/javascript&quot;> var d = new Date(); document.write(d.getFullYear()); </script> Regardless when the site was created update your © !
  15. 15. Add Photos to Contacts NSLS 2009 Muriel Simms Geology Librarian 41 Malachite Way Room 12-B
  16. 16. Feature your physical address prominently NSLS 2009
  17. 17. NSLS 2009
  18. 18. NSLS 2009
  19. 19. Design Matters <ul><li>Users judge websites QUICKLY and SUPERFICIALLY </li></ul><ul><li>Users judge well designed websites as more credible than those less professional looking. But don’t look TOO slick. </li></ul>NSLS 2009
  20. 20. Exercise: Credibility Assessment <ul><li>http://library.manoa.hawaii.edu/ </li></ul>NSLS 2009
  21. 21. Turn Boring Old Contact Info into Exciting hCards Using Microformats! NSLS 2009
  22. 22. What they are <ul><li>microformats are a set of simple, open data formats built upon existing and widely adopted standards </li></ul><ul><li>re-use existing XHTML and XML to convey metadata and other attributes </li></ul>NSLS 2009
  23. 23. What they are <ul><li>Microformats are a way of encoding certain types of information so that computers know what type of information it is and can take appropriate action with it </li></ul><ul><ul><ul><li>Contact info </li></ul></ul></ul><ul><ul><ul><li>Events </li></ul></ul></ul><ul><ul><ul><li>reviews </li></ul></ul></ul><ul><li>Semantic technology </li></ul><ul><li>They are EASY to create </li></ul>NSLS 2009
  24. 24. How to create them <ul><li>Creation tools: </li></ul><ul><li>http://microformats.org/code/hcard/creator </li></ul><ul><li>http://microformats.org/code/hcalendar/creator.html </li></ul><ul><li>Dreamweaver Microformats Extension tool </li></ul><ul><li>http://www.webstandards.org/action/dwtf/microformats/ </li></ul><ul><li>Viewer: </li></ul><ul><li>https://addons.mozilla.org/en-US/firefox/addon/2240 (Firefox) </li></ul><ul><li>http://www.softpedia.com/get/Tweak/Browser-Tweak/Microformats-Button.shtml (IE) </li></ul>NSLS 2009
  25. 25. Why they matter <ul><li>Currently supported by firefox and IE </li></ul><ul><li>Soon to be supported by all major browsers </li></ul><ul><li>Supported by Yahoo! now and other search engines soon </li></ul><ul><li>Good customer service </li></ul>NSLS 2009
  26. 26. How they work <ul><li>Information is encoded using a microformat </li></ul><ul><li>Information is encountered by a microformat aware tool </li></ul><ul><li>Tool presents user with option to import, export, or otherwise work with the data chunk </li></ul>NSLS 2009
  27. 27. NSLS 2009
  28. 28. NSLS 2009
  29. 29. NSLS 2009
  30. 30. NSLS 2009
  31. 31. NSLS 2009
  32. 32. Do your links stink? <ul><li>They should! Have scent that is…. </li></ul>NSLS 2009
  33. 33. Click here…NOT! <ul><li>Replace all instances of the phrase “click here” </li></ul><ul><li>Click here for current articles. </li></ul><ul><li>becomes </li></ul><ul><li>Current articles are available here. </li></ul>NSLS 2009
  34. 34. Be a wordsmith! <ul><li>Replace vernacular with plain, action orientated words </li></ul><ul><li>Circulation…are we in a hospital??? </li></ul><ul><li>Examples? </li></ul>NSLS 2009
  35. 35. Move important info out of the “dead zones” NSLS 2009
  36. 36. <ul><li>Banner Blindness </li></ul><ul><li>Nielsen”: People have a tendency to never look at the slim rectangular area that's above the page's main headline.” </li></ul>NSLS 2009
  37. 37. If it looks like a duck… <ul><li>… or an ad or promotion, it will likely be ignored </li></ul>NSLS 2009
  38. 38. NSLS 2009
  39. 39. Harness the Awesome Power of the 3 Question Survey <ul><li>Surveymonkey.com </li></ul><ul><ul><li>The questions: </li></ul></ul><ul><ul><li>What is the purpose of your visit to our website today? </li></ul></ul><ul><ul><li>Were you able to complete your task today? </li></ul></ul><ul><ul><li>If you were not able to complete your task today, why not? </li></ul></ul><ul><li>P.S. ask for their email </li></ul>NSLS 2009
  40. 40. Design <ul><li>… matters! </li></ul><ul><li>Users judge websites QUICKLY and SUPERFICIALLY </li></ul><ul><li>Behaviour and Information Technology, Volume 25, Number 2/March-April 2006, pp. 115-126(12) </li></ul>NSLS 2009
  41. 41. NSLS 2009
  42. 42. NSLS 2009
  43. 43. Web 2.0-ify Your Logo NSLS 2009
  44. 44. Characteristics <ul><li>Small chunks of large sans-serif type </li></ul><ul><li>Cheery colors </li></ul><ul><li>Rounded edges </li></ul><ul><li>http://web2.0stylr.com/stylr.aspx </li></ul>NSLS 2009
  45. 45. NSLS 2009
  46. 46. Be an Icon icon <ul><li>http://commons.wikimedia.org/wiki/Crystal_Clear </li></ul>NSLS 2009
  47. 47. NSLS 2009
  48. 48. NSLS 2009
  49. 49. Get creative (commons) that is… <ul><li>http://flickr.com/search/advanced/ </li></ul>NSLS 2009
  50. 50. NSLS 2009
  51. 51. The Need for Speed <ul><li>So, just how slow are you, and why? </li></ul><ul><li>Install Firebug + Yslow in Firefox </li></ul><ul><li>http://www.getfirebug.com/ </li></ul><ul><li>http://developer.yahoo.com/yslow/ </li></ul>NSLS 2009
  52. 52. Don’t Make the Server Think! <ul><li>Change these: <a href=&quot;http://www.URL.com/directoryname&quot;> </li></ul><ul><li>To these: <a href=&quot;http://www.URL.com/directoryname / &quot;> </li></ul>NSLS 2009
  53. 53. Cache cache’ <ul><li>Why does cache matter? </li></ul><ul><li>Empty cache=http requests=slower </li></ul><ul><li>Full cache=fewer http requests=faster </li></ul><ul><li>Exploit the users cache to speed up your site </li></ul>NSLS 2009
  54. 54. For server admins <ul><li>Server configuration file </li></ul><ul><ul><li>Set certain file types to stay fresh/not expire </li></ul></ul><ul><ul><li>Image file types, css, js files, pdfs </li></ul></ul>NSLS 2009
  55. 55. Add Expire headers <ul><li>When expire headers are set, the browser caches content from the server on the client side. </li></ul><ul><li>First-time visitors make lots of requests, the second time visitors visit the page, the browser uses the cached content. </li></ul>NSLS 2009
  56. 56. For the rest of us… <ul><li>STEP 1: You should have a file called .htaccess in your server root. If not create one. </li></ul><ul><li>STEP 2: Add the following code: </li></ul><ul><ul><ul><li><FilesMatch &quot;.(pdf|jpg|jpeg|png|gif|js|css|swf)$&quot;> </li></ul></ul></ul><ul><ul><ul><li>Header set Expires &quot;Thu, 15 Apr 2010 20:00:00 GMT&quot; </li></ul></ul></ul><ul><ul><ul><li></FilesMatch> </li></ul></ul></ul>NSLS 2009
  57. 57. Combine small images into image map <ul><li>Yahoo! High Performance research shows that a combining multiple smaller images into a single image speeds downloads due to fewer http requests </li></ul>NSLS 2009
  58. 58. Eliminate Inline Scripts <ul><li>In most cases calling scripts from external files will speed page download time, especially if these items are cached </li></ul>NSLS 2009
  59. 59. Except…For your homepage <ul><li>In line scripts for your homepage </li></ul><ul><li>making HTTP requests is MUCH more expensive than the size of the data coming down </li></ul>NSLS 2009
  60. 60. Example <ul><li>www.library.pitt.edu </li></ul><ul><li>External CSS: </li></ul>NSLS 2009 Inline CSS: Speed tested with: http://www.websiteoptimization.com
  61. 61. Results NSLS 2009
  62. 62. Spring Cleaning <ul><li>Tidy your homepage </li></ul><ul><ul><li>http://validator.w3.org/#validate_by_uri+with_options </li></ul></ul>NSLS 2009
  63. 63. Thin Is In <ul><li>Is your CSS…bloated? </li></ul>NSLS 2009
  64. 64. Search Engine Optimize (SEO) your site <ul><li>Google webmaster tools </li></ul><ul><li>Site link > Diagnostics > Content analysis > Title tag analysis </li></ul>NSLS 2009
  65. 65. NSLS 2009
  66. 66. SEO <ul><li>Make sure your pages use heading tags, and make sure you use them properly </li></ul><ul><li><h1> </li></ul><ul><li><h2> </li></ul><ul><li><h3> </li></ul>NSLS 2009
  67. 67. SEO: Page Titles <ul><li>Global find and replace…rewrite page titles with the following format: </li></ul><ul><ul><li>Document title | Section name | Library/site name </li></ul></ul>NSLS 2009
  68. 68. Add Labels to Your Forms <ul><li>Why? </li></ul><ul><ul><li>Accessibility: Read by screen readers </li></ul></ul><ul><ul><li>Accessibility: larger click target </li></ul></ul><ul><ul><li>User friendly: Checkbox text (not just the checkbox itself) becomes clickable </li></ul></ul><ul><li>How? </li></ul><ul><li><label for=”affiliation&quot;>Affiliation: </label> </li></ul><ul><li><input type=”checkbox&quot; name=”affiliation” value=“cardholder”> </li></ul><ul><li><input type=”checkbox&quot; name=”affiliation” value=“visitor”> </li></ul>NSLS 2009
  69. 69. … and While We’re Talking About Forms… <ul><li>Use radio buttons and check boxes appropriately: </li></ul><ul><li>Radio buttons: list of two or more options that are mutually exclusive and the user must select exactly one choice. </li></ul><ul><li>Checkboxes are used when there are lists of options and the user may select any number of choices , including zero, one, or several. </li></ul>NSLS 2009
  70. 70. Social Media Optimize your site <ul><li>Make your site social media friendly. Why? </li></ul><ul><li>Social media provides innovative ways for libraries to connect with users we may never see face to face </li></ul><ul><li>To encourage, promote, innovate, learn, adapt </li></ul><ul><li>To improve customer service </li></ul><ul><li>To discover and deliver what users want </li></ul><ul><li>To “market” without marketing </li></ul>NSLS 2009
  71. 71. Add Social Bookmarks Links <ul><li>http://addthis.com </li></ul><ul><li>*special credit: add them to catalog records too! </li></ul>NSLS 2009
  72. 72. NSLS 2009
  73. 73. Social media metrics in a minute <ul><li>Are you having an impact? </li></ul><ul><ul><li>Page rank analysis </li></ul></ul><ul><ul><ul><li>google.com </li></ul></ul></ul><ul><ul><ul><ul><li>best job of the big three search engines in indexing and integrating social media sources like blog posts, videos, and Flickr photo sets </li></ul></ul></ul></ul>NSLS 2009
  74. 74. Social Media Metrics <ul><ul><li>Social media presence analysis </li></ul></ul><ul><ul><ul><li>Bookmarks delicious.com </li></ul></ul></ul><ul><ul><ul><li>Blogs technorati.com </li></ul></ul></ul><ul><ul><li>Tone analysis…what’s the nature of the buzzzzzz? </li></ul></ul><ul><ul><ul><li>Stars </li></ul></ul></ul><ul><ul><ul><li>Scars </li></ul></ul></ul><ul><ul><ul><li>Neutral </li></ul></ul></ul>NSLS 2009
  75. 75. Create alerts <ul><li>http://www.google.com/alerts </li></ul>NSLS 2009
  76. 76. Questions? NSLS 2009
  77. 77. Thank you! NSLS 2009
  78. 78. Resources <ul><li>http://httpd.apache.org/docs/1.3/howto/htaccess.html </li></ul><ul><li>http://www.cleancss.com/ </li></ul><ul><li>http://www.websiteoptimization.com </li></ul><ul><li>http://web2.0stylr.com/stylr.aspx </li></ul><ul><li>http://www.456bereastreet.com/archive/200410/document_titles_and_title_separators/ </li></ul><ul><li>http://www.useit.com/alertbox/20040927.html </li></ul><ul><li>http ://addthis.com </li></ul><ul><li>http://microformats.org </li></ul><ul><li>http://credibility.stanford.edu/ </li></ul>NSLS 2009

×