Jeff Wisniewski Web Services Librarian University of Pittsburgh [email_address] Fast & Easy Website Tune Ups
Roadmap <ul><li>Credibility </li></ul><ul><li>Navigation </li></ul><ul><li>Design </li></ul><ul><li>Performance </li></ul>...
Credibility
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 Tim Simms Geology Librarian 41 Malachite Way Room 12-B
Content & navigation
Move Important Information <ul><li>… out of the “blindness zone” </li></ul>
Click here…NOT! <ul><li>Replace all instances of the phrase “click here”. </li></ul><ul><li>Click here  for current articl...
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...
Design
Web 2.0-ify Your Logo
Characteristics <ul><li>Small chunks of large sans-serif type </li></ul><ul><li>Cheery colors </li></ul><ul><li>Rounded ed...
 
Be an Icon icon <ul><li>http://commons.wikimedia.org/wiki/Crystal_Clear </li></ul>
Internet Librarian 2008
 
Smashing icons <ul><li>http://www.smashingmagazine.com/2008/03/06/35-really-incredible-free-icon-sets/ </li></ul>
Performance
The Need for Speed <ul><li>So, just how slow are you, and why? </li></ul><ul><li>Install Firebug + Yslow in Firefox </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>Inline CSS Speed tested with: http://www.web...
Results
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>
Don’t Make the Server Think! <ul><li>Change these: <a href=&quot;http://www.URL.com/directoryname&quot;> </li></ul><ul><li...
Search Engine Optimization
Page Titles <ul><li>Google webmaster tools </li></ul><ul><li>Site link > Diagnostics > Content analysis > Title tag analys...
 
Page Titles <ul><li>Global find and replace…rewrite page titles with the following format: </li></ul><ul><ul><li>Document ...
Be social, movable and mixable
Add Social Bookmarks Links <ul><li>http://www.toprankblog.com/tools/social-bookmarks/ </li></ul>
 
Turn Boring Old Contact Info Into Exciting hCards! <ul><li>http://microformats.org/code/hcard/creator </li></ul><ul><li>Dr...
 
 
 
Harness the Awesome Power of the 3 Question Survey <ul><li>Surveymonkey.com or Google Docs </li></ul><ul><ul><li>The quest...
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 Tuneups

2,063 views

Published on

Published in: Technology, Design
3 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,063
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
3
Likes
2
Embeds 0
No embeds

No notes for slide
  • Fast and Easy Website Tuneups

    1. 1. Jeff Wisniewski Web Services Librarian University of Pittsburgh [email_address] Fast & Easy Website Tune Ups
    2. 2. Roadmap <ul><li>Credibility </li></ul><ul><li>Navigation </li></ul><ul><li>Design </li></ul><ul><li>Performance </li></ul><ul><li>SEO </li></ul><ul><li>SMO </li></ul>
    3. 3. Credibility
    4. 4. 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>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 © !
    5. 5. Add Photos to Contacts Tim Simms Geology Librarian 41 Malachite Way Room 12-B
    6. 6. Content & navigation
    7. 7. Move Important Information <ul><li>… out of the “blindness zone” </li></ul>
    8. 8. 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>
    9. 9. Add Labels to Your Forms <ul><li>Why? </li></ul><ul><ul><li>Accessibility: Read by screen readers </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>
    10. 10. … 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>
    11. 11. Design
    12. 12. Web 2.0-ify Your Logo
    13. 13. 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>
    14. 15. Be an Icon icon <ul><li>http://commons.wikimedia.org/wiki/Crystal_Clear </li></ul>
    15. 16. Internet Librarian 2008
    16. 18. Smashing icons <ul><li>http://www.smashingmagazine.com/2008/03/06/35-really-incredible-free-icon-sets/ </li></ul>
    17. 19. Performance
    18. 20. 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>
    19. 21. 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>
    20. 22. 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>Internet Librarian 2008
    21. 23. 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>
    22. 24. 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>
    23. 25. 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>Internet Librarian 2008
    24. 26. 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>
    25. 27. 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>
    26. 28. Example <ul><li>www.library.pitt.edu </li></ul><ul><li>External CSS </li></ul>Inline CSS Speed tested with: http://www.websiteoptimization.com
    27. 29. Results
    28. 30. Spring Cleaning <ul><li>Tidy your homepage </li></ul><ul><ul><li>http://validator.w3.org/#validate_by_uri+with_options </li></ul></ul>
    29. 31. Thin Is In <ul><li>Is your CSS…bloated? </li></ul>
    30. 32. 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>
    31. 33. Search Engine Optimization
    32. 34. Page Titles <ul><li>Google webmaster tools </li></ul><ul><li>Site link > Diagnostics > Content analysis > Title tag analysis </li></ul>
    33. 36. 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>
    34. 37. Be social, movable and mixable
    35. 38. Add Social Bookmarks Links <ul><li>http://www.toprankblog.com/tools/social-bookmarks/ </li></ul>
    36. 40. Turn Boring Old Contact Info Into Exciting hCards! <ul><li>http://microformats.org/code/hcard/creator </li></ul><ul><li>Dreamweaver Microformats Extension </li></ul><ul><li>http://www.webstandards.org/action/dwtf/microformats / </li></ul><ul><li>https://addons.mozilla.org/en-US/firefox/addon/2240 </li></ul>
    37. 44. Harness the Awesome Power of the 3 Question Survey <ul><li>Surveymonkey.com or Google Docs </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>
    38. 45. 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://www.toprankblog.com/tools/social-bookmarks/ </li></ul>

    ×