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

Fast and Easy Website Tuneups






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



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.

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

Fast and Easy Website Tuneups Fast and Easy Website Tuneups Presentation Transcript

  • Jeff Wisniewski Web Services Librarian University of Pittsburgh [email_address] Fast & Easy Website Tune Ups
  • Roadmap
    • Credibility
    • Navigation
    • Design
    • Performance
    • SEO
    • SMO
  • Credibility
  • 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 © !
  • Add Photos to Contacts Tim Simms Geology Librarian 41 Malachite Way Room 12-B
  • Content & navigation
  • Move Important Information
    • … out of the “blindness zone”
  • Click here…NOT!
    • Replace all instances of the phrase “click here”.
    • Click here for current articles.
    • becomes
    • Current articles are available here.
  • 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”>
  • … 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.
  • Design
  • Web 2.0-ify Your Logo
  • Characteristics
    • Small chunks of large sans-serif type
    • Cheery colors
    • Rounded edges
    • http://web2.0stylr.com/stylr.aspx
  • Be an Icon icon
    • http://commons.wikimedia.org/wiki/Crystal_Clear
  • Internet Librarian 2008
  • Smashing icons
    • http://www.smashingmagazine.com/2008/03/06/35-really-incredible-free-icon-sets/
  • Performance
  • 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/
  • 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
  • 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
  • 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.
  • 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>
  • 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
  • Eliminate Inline Scripts
    • In most cases calling scripts from external files will speed page download time, especially if these items are cached
  • 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
  • Example
    • www.library.pitt.edu
    • External CSS
    Inline CSS Speed tested with: http://www.websiteoptimization.com
  • Results
  • Spring Cleaning
    • Tidy your homepage
      • http://validator.w3.org/#validate_by_uri+with_options
  • Thin Is In
    • Is your CSS…bloated?
  • 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;>
  • Search Engine Optimization
  • Page Titles
    • Google webmaster tools
    • Site link > Diagnostics > Content analysis > Title tag analysis
  • Page Titles
    • Global find and replace…rewrite page titles with the following format:
      • Document title | Section name | Library/site name
  • Be social, movable and mixable
  • Add Social Bookmarks Links
    • http://www.toprankblog.com/tools/social-bookmarks/
  • 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
  • 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
  • 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/