Jeff Wisniewski Web Services Librarian University of Pittsburgh [email_address] Fast & Easy Website Tune Ups

Roadmap Credibility Navigation Design Performance SEO SMO

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 © !

PHP example:

<p>Copyright &copy; <?php echo date(&quot;Y&quot;) ?>My Library, My Town</p>

Add Photos to Contacts Tim Simms Geology Librarian 41 Malachite Way Room 12-B

Content & navigation

Move Important Information … out of the “blindness zone”

… 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.

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”>

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.

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

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

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/

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/

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

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

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.

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>

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

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

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

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

www.library.pitt.edu

External CSS

Results

Spring Cleaning Tidy your homepage http://validator.w3.org/#validate_by_uri+with_options

Tidy your homepage

http://validator.w3.org/#validate_by_uri+with_options

Thin Is In Is your CSS…bloated?

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;>

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

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

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/

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

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

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/

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/