Fast and Easy Website Tuneups

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 © <?php echo date("Y") ?>My Library, My Town</p>
JavaScript example: <p>Copyright © <script type="text/javascript"> 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">Affiliation: </label>
<input type=”checkbox" name=”affiliation” value=“cardholder”>
<input type=”checkbox" 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

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 ".(pdf|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</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

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="http://www.URL.com/directoryname">
To these: <a href="http://www.URL.com/directoryname / ">

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/

Fast and Easy Website Tuneups

by Jeff Wisniewski on Oct 24, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Fast and Easy Website Tuneups — Presentation Transcript