Fast & Easy Site Tune-Ups Jeff Wisniewski Web Services Librarian University of Pittsburgh [email_address] NSLS 2009
Do we REALLY hate to redesign? <ul><li>Maintenance = Boring   </li></ul>Redesign = Exciting   NSLS 2009
Redesigning is Expensive! <ul><li>Redesign is expensive for you </li></ul><ul><li>Redesign is expensive for users </li></u...
Amazon 2000 NSLS 2009
Amazon 2006 NSLS 2009
Amazon 2009 NSLS 2009
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...
Users dislike redesigns…a lot <ul><li>Facebook anti-redesign group has 1.7 million members.  </li></ul><ul><li>last.fm: re...
Redesign and the five stages of user grief <ul><li>Denial:  “Why did you change it? I was always able to find what I neede...
Happiness Time Launch YOU USERS
Time until “redesign” (months) 12 0 6 amount of maintenance performed a lot pretty much none
… because two minutes is a minute too long! <ul><li>Credibility </li></ul><ul><li>Content </li></ul><ul><li>Design </li></...
Credibility <ul><li>making your website in such a way that it comes across as trustworthy and knowledgeable </li></ul>NSLS...
It’s a Matter of Trust <ul><li>PHP example: </li></ul><ul><li><p>Copyright &copy; <?php echo date(&quot;Y&quot;) ?>My Libr...
Add Photos to Contacts NSLS 2009 Muriel Simms Geology Librarian 41 Malachite Way Room 12-B
Feature your physical address prominently NSLS 2009
NSLS 2009
NSLS 2009
Design Matters <ul><li>Users judge websites QUICKLY and SUPERFICIALLY </li></ul><ul><li>Users judge well designed websites...
Exercise: Credibility Assessment <ul><li>http://library.manoa.hawaii.edu/ </li></ul>NSLS 2009
Turn Boring Old Contact Info into Exciting hCards Using Microformats! NSLS 2009
What they are <ul><li>microformats are a set of simple, open data formats built upon existing and widely adopted standards...
What they are <ul><li>Microformats are a way of encoding certain types of information so that computers know what type of ...
How to create them <ul><li>Creation tools: </li></ul><ul><li>http://microformats.org/code/hcard/creator </li></ul><ul><li>...
Why they matter <ul><li>Currently supported by firefox and IE </li></ul><ul><li>Soon to be supported by all major browsers...
How they work <ul><li>Information is encoded using a  microformat </li></ul><ul><li>Information is encountered by a microf...
NSLS 2009
NSLS 2009
NSLS 2009
NSLS 2009
NSLS 2009
Do your links stink? <ul><li>They should! Have scent that is…. </li></ul>NSLS 2009
Click here…NOT! <ul><li>Replace all instances of the phrase “click here” </li></ul><ul><li>Click here  for current article...
Be a  wordsmith! <ul><li>Replace vernacular with plain, action orientated words </li></ul><ul><li>Circulation…are we in a ...
Move important info out of the “dead zones” NSLS 2009
<ul><li>Banner Blindness </li></ul><ul><li>Nielsen”: People have a tendency to never look at the slim rectangular area tha...
If it looks like a duck… <ul><li>… or an ad or promotion, it will likely be ignored </li></ul>NSLS 2009
NSLS 2009
Harness the Awesome Power of the 3 Question Survey <ul><li>Surveymonkey.com </li></ul><ul><ul><li>The questions: </li></ul...
Design <ul><li>… matters! </li></ul><ul><li>Users judge websites QUICKLY and SUPERFICIALLY </li></ul><ul><li>Behaviour and...
NSLS 2009
NSLS 2009
Web 2.0-ify Your Logo NSLS 2009
Characteristics <ul><li>Small chunks of large sans-serif type </li></ul><ul><li>Cheery colors </li></ul><ul><li>Rounded ed...
NSLS 2009
Be an Icon icon <ul><li>http://commons.wikimedia.org/wiki/Crystal_Clear </li></ul>NSLS 2009
NSLS 2009
NSLS 2009
Get creative (commons) that is… <ul><li>http://flickr.com/search/advanced/ </li></ul>NSLS 2009
NSLS 2009
The Need for Speed <ul><li>So, just how slow are you, and why? </li></ul><ul><li>Install Firebug + Yslow in Firefox </li><...
Don’t Make the Server Think! <ul><li>Change these: <a href=&quot;http://www.URL.com/directoryname&quot;> </li></ul><ul><li...
Cache cache’ <ul><li>Why does cache matter? </li></ul><ul><li>Empty cache=http requests=slower </li></ul><ul><li>Full cach...
For server admins <ul><li>Server configuration file </li></ul><ul><ul><li>Set certain file types to stay fresh/not expire ...
Add Expire headers <ul><li>When expire headers are set, the browser caches content from the server on the client side.  </...
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><...
Combine small images into image map <ul><li>Yahoo! High Performance research shows that a combining multiple smaller image...
Eliminate Inline Scripts <ul><li>In most cases calling scripts from external files will speed page download time, especial...
Except…For your homepage <ul><li>In line scripts for your homepage </li></ul><ul><li>making HTTP requests is MUCH more exp...
Example <ul><li>www.library.pitt.edu </li></ul><ul><li>External CSS: </li></ul>NSLS 2009 Inline CSS: Speed tested with: ht...
Results NSLS 2009
Spring Cleaning <ul><li>Tidy your homepage </li></ul><ul><ul><li>http://validator.w3.org/#validate_by_uri+with_options </l...
Thin Is In <ul><li>Is your CSS…bloated? </li></ul>NSLS 2009
Search Engine Optimize (SEO) your site <ul><li>Google webmaster tools </li></ul><ul><li>Site link > Diagnostics > Content ...
NSLS 2009
SEO <ul><li>Make sure your pages use heading tags, and make sure you use them properly </li></ul><ul><li><h1> </li></ul><u...
SEO: Page Titles <ul><li>Global find and replace…rewrite page titles with the following format: </li></ul><ul><ul><li>Docu...
Add Labels to Your Forms <ul><li>Why? </li></ul><ul><ul><li>Accessibility: Read by screen readers </li></ul></ul><ul><ul><...
… and While We’re Talking About Forms… <ul><li>Use radio buttons and check boxes appropriately: </li></ul><ul><li>Radio bu...
Social Media Optimize your site <ul><li>Make your site social media friendly. Why? </li></ul><ul><li>Social media provides...
Add Social Bookmarks Links <ul><li>http://addthis.com </li></ul><ul><li>*special credit: add them to catalog records too! ...
NSLS 2009
Social media metrics in a minute <ul><li>Are you having an impact? </li></ul><ul><ul><li>Page rank analysis  </li></ul></u...
Social Media Metrics <ul><ul><li>Social media presence analysis </li></ul></ul><ul><ul><ul><li>Bookmarks delicious.com </l...
Create alerts <ul><li>http://www.google.com/alerts </li></ul>NSLS 2009
Questions? NSLS 2009
Thank you! NSLS 2009
Resources <ul><li>http://httpd.apache.org/docs/1.3/howto/htaccess.html </li></ul><ul><li>http://www.cleancss.com/ </li></u...
Upcoming SlideShare
Loading in …5
×

Fast and Easy Website Tune Ups

1,598 views
1,537 views

Published on

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,598
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • 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

    ×