• Save
Fast and Easy Website Tuneups
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Fast and Easy Website Tuneups

on

  • 3,349 views

 

Statistics

Views

Total Views
3,349
Views on SlideShare
3,349
Embed Views
0

Actions

Likes
2
Downloads
0
Comments
3

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Fast and Easy Website Tuneups Presentation Transcript

  • 1. Jeff Wisniewski Web Services Librarian University of Pittsburgh [email_address] Fast & Easy Website Tune Ups
  • 2. Roadmap
    • Credibility
    • Navigation
    • Design
    • Performance
    • SEO
    • SMO
  • 3. Credibility
  • 4. It’s a Matter of Trust
    • PHP example:
    • <p>Copyright &copy; <?php echo date(&quot;Y&quot;) ?>My Library, My Town</p>
    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. Add Photos to Contacts Tim Simms Geology Librarian 41 Malachite Way Room 12-B
  • 6. Content & navigation
  • 7. Move Important Information
    • … out of the “blindness zone”
  • 8. Click here…NOT!
    • Replace all instances of the phrase “click here”.
    • Click here for current articles.
    • becomes
    • Current articles are available here.
  • 9. Add Labels to Your Forms
    • Why?
      • Accessibility: Read by screen readers
      • User friendly: Checkbox text (not just the checkbox itself) becomes clickable
    • How?
    • <label for=”affiliation&quot;>Affiliation: </label>
    • <input type=”checkbox&quot; name=”affiliation” value=“cardholder”>
    • <input type=”checkbox&quot; name=”affiliation” value=“visitor”>
  • 10. … and While We’re Talking About Forms…
    • Use radio buttons and check boxes appropriately:
    • Radio buttons: list of two or more options that are mutually exclusive and the user must select exactly one choice.
    • Checkboxes are used when there are lists of options and the user may select any number of choices , including zero, one, or several.
  • 11. Design
  • 12. Web 2.0-ify Your Logo
  • 13. Characteristics
    • Small chunks of large sans-serif type
    • Cheery colors
    • Rounded edges
    • http://web2.0stylr.com/stylr.aspx
  • 14.  
  • 15. Be an Icon icon
    • http://commons.wikimedia.org/wiki/Crystal_Clear
  • 16. Internet Librarian 2008
  • 17.  
  • 18. Smashing icons
    • http://www.smashingmagazine.com/2008/03/06/35-really-incredible-free-icon-sets/
  • 19. Performance
  • 20. The Need for Speed
    • So, just how slow are you, and why?
    • Install Firebug + Yslow in Firefox
    • http://www.getfirebug.com/
    • http://developer.yahoo.com/yslow/
  • 21. Cache cache’
    • Why does cache matter?
    • Empty cache=http requests=slower
    • Full cache=fewer http requests=faster
    • Exploit the users cache to speed up your site
  • 22. For server admins
    • Server configuration file
      • Set certain file types to stay fresh/not expire
      • Image file types, css, js files, pdfs
    Internet Librarian 2008
  • 23. Add Expire headers
    • When expire headers are set, the browser caches content from the server on the client side.
    • First-time visitors make lots of requests, the second time visitors visit the page, the browser uses the cached content.
  • 24. For the rest of us…
    • STEP 1: You should have a file called .htaccess in your server root. If not create one.
    • STEP 2: Add the following code:
        • <FilesMatch &quot;.(pdf|jpg|jpeg|png|gif|js|css|swf)$&quot;>
        • Header set Expires &quot;Thu, 15 Apr 2010 20:00:00 GMT&quot;
        • </FilesMatch>
  • 25. Combine small images into image map
    • Yahoo! High Performance research shows that a combining multiple smaller images into a single image speeds downloads due to fewer http requests
    Internet Librarian 2008
  • 26. Eliminate Inline Scripts
    • In most cases calling scripts from external files will speed page download time, especially if these items are cached
  • 27. Except…For your homepage
    • In line scripts for your homepage
    • making HTTP requests is MUCH more expensive than the size of the data coming down
  • 28. Example
    • www.library.pitt.edu
    • External CSS
    Inline CSS Speed tested with: http://www.websiteoptimization.com
  • 29. Results
  • 30. Spring Cleaning
    • Tidy your homepage
      • http://validator.w3.org/#validate_by_uri+with_options
  • 31. Thin Is In
    • Is your CSS…bloated?
  • 32. Don’t Make the Server Think!
    • Change these: <a href=&quot;http://www.URL.com/directoryname&quot;>
    • To these: <a href=&quot;http://www.URL.com/directoryname / &quot;>
  • 33. Search Engine Optimization
  • 34. Page Titles
    • Google webmaster tools
    • Site link > Diagnostics > Content analysis > Title tag analysis
  • 35.  
  • 36. Page Titles
    • Global find and replace…rewrite page titles with the following format:
      • Document title | Section name | Library/site name
  • 37. Be social, movable and mixable
  • 38. Add Social Bookmarks Links
    • http://www.toprankblog.com/tools/social-bookmarks/
  • 39.  
  • 40. Turn Boring Old Contact Info Into Exciting hCards!
    • http://microformats.org/code/hcard/creator
    • Dreamweaver Microformats Extension
    • http://www.webstandards.org/action/dwtf/microformats /
    • https://addons.mozilla.org/en-US/firefox/addon/2240
  • 41.  
  • 42.  
  • 43.  
  • 44. Harness the Awesome Power of the 3 Question Survey
    • Surveymonkey.com or Google Docs
      • The questions:
      • What is the purpose of your visit to our website today?
      • Were you able to complete your task today?
      • If you were not able to complete your task today, why not?
    • P.S. ask for their email
  • 45. Resources
    • http://httpd.apache.org/docs/1.3/howto/htaccess.html
    • http://www.cleancss.com/
    • http://www.websiteoptimization.com
    • http://web2.0stylr.com/stylr.aspx
    • http://www.456bereastreet.com/archive/200410/document_titles_and_title_separators/
    • http://www.useit.com/alertbox/20040927.html
    • http://www.toprankblog.com/tools/social-bookmarks/