Fast & Easy Site Tune-Ups Jeff Wisniewski Web Services Librarian University of Pittsburgh [email_address] NSLS 2009

Do we REALLY hate to redesign? Maintenance = Boring  Redesign = Exciting  NSLS 2009

Maintenance = Boring 

Redesigning is Expensive! Redesign is expensive for you Redesign is expensive for users Lots of important sites don’t “redesign” NSLS 2009

Redesign is expensive for you

Redesign is expensive for users

Lots of important sites don’t “redesign”

Amazon 2000 NSLS 2009

Amazon 2006 NSLS 2009

Amazon 2009 NSLS 2009

This idea is not exactly new… The Quiet Death of the Major Re-Launch By Jared M. Spool Originally published: May 20, 2003

The Quiet Death of the Major Re-Launch

By Jared M. Spool

Originally published: May 20, 2003

Users dislike redesigns…a lot Facebook anti-redesign group has 1.7 million members. last.fm: redesign drew over 2,000 comments often strongly negative. The Guardian, FT.com, and the BBC also transformed themselves recently, with ‘robust’ opinion voiced on each.

Facebook anti-redesign group has 1.7 million members.

last.fm: redesign drew over 2,000 comments often strongly negative.

The Guardian, FT.com, and the BBC also transformed themselves recently, with ‘robust’ opinion voiced on each.

Redesign and the five stages of user grief Denial: “Why did you change it? I was always able to find what I needed!” Anger : “You have rendered the site useless and I will never use it again!” Bargaining : “If you could just revert back to the OLD ejournal page that would be great!” Depression : “I have no idea what I’m going to do now…” Acceptance : “While I dislike the design I was able to find the catalog link quite easily…”

Denial: “Why did you change it? I was always able to find what I needed!”

Anger : “You have rendered the site useless and I will never use it again!”

Bargaining : “If you could just revert back to the OLD ejournal page that would be great!”

Depression : “I have no idea what I’m going to do now…”

Acceptance : “While I dislike the design I was able to find the catalog link quite easily…”

Happiness Time Launch YOU USERS

Time until “redesign” (months) 12 0 6 amount of maintenance performed a lot pretty much none

… because two minutes is a minute too long! Credibility Content Design Tech Metrics and assessment Social NSLS 2009

Credibility

Content

Design

Tech

Metrics and assessment

Social

Credibility making your website in such a way that it comes across as trustworthy and knowledgeable NSLS 2009

making your website in such a way that it comes across as trustworthy and knowledgeable

It’s a Matter of Trust PHP example: <p>Copyright &copy; <?php echo date(&quot;Y&quot;) ?>My Library, My Town</p> NSLS 2009 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 NSLS 2009 Muriel Simms Geology Librarian 41 Malachite Way Room 12-B

Feature your physical address prominently NSLS 2009

NSLS 2009

NSLS 2009

Design Matters Users judge websites QUICKLY and SUPERFICIALLY Users judge well designed websites as more credible than those less professional looking. But don’t look TOO slick. NSLS 2009

Users judge websites QUICKLY and SUPERFICIALLY

Users judge well designed websites as more credible than those less professional looking. But don’t look TOO slick.

Exercise: Credibility Assessment http://library.manoa.hawaii.edu/ NSLS 2009

http://library.manoa.hawaii.edu/

Turn Boring Old Contact Info into Exciting hCards Using Microformats! NSLS 2009

What they are microformats are a set of simple, open data formats built upon existing and widely adopted standards re-use existing XHTML and XML to convey metadata and other attributes NSLS 2009

microformats are a set of simple, open data formats built upon existing and widely adopted standards

re-use existing XHTML and XML to convey metadata and other attributes

What they are Microformats are a way of encoding certain types of information so that computers know what type of information it is and can take appropriate action with it Contact info Events reviews Semantic technology They are EASY to create NSLS 2009

Microformats are a way of encoding certain types of information so that computers know what type of information it is and can take appropriate action with it

Contact info

Events

reviews

Semantic technology

They are EASY to create

How to create them Creation tools: http://microformats.org/code/hcard/creator http://microformats.org/code/hcalendar/creator.html Dreamweaver Microformats Extension tool http://www.webstandards.org/action/dwtf/microformats/ Viewer: https://addons.mozilla.org/en-US/firefox/addon/2240 (Firefox) http://www.softpedia.com/get/Tweak/Browser-Tweak/Microformats-Button.shtml (IE) NSLS 2009

Creation tools:

http://microformats.org/code/hcard/creator

http://microformats.org/code/hcalendar/creator.html

Dreamweaver Microformats Extension tool

http://www.webstandards.org/action/dwtf/microformats/

Viewer:

https://addons.mozilla.org/en-US/firefox/addon/2240 (Firefox)

http://www.softpedia.com/get/Tweak/Browser-Tweak/Microformats-Button.shtml (IE)

Why they matter Currently supported by firefox and IE Soon to be supported by all major browsers Supported by Yahoo! now and other search engines soon Good customer service NSLS 2009

Currently supported by firefox and IE

Soon to be supported by all major browsers

Supported by Yahoo! now and other search engines soon

Good customer service

How they work Information is encoded using a microformat Information is encountered by a microformat aware tool Tool presents user with option to import, export, or otherwise work with the data chunk NSLS 2009

Information is encoded using a microformat

Information is encountered by a microformat aware tool

Tool presents user with option to import, export, or otherwise work with the data chunk

NSLS 2009

NSLS 2009

NSLS 2009

NSLS 2009

NSLS 2009

Do your links stink? They should! Have scent that is…. NSLS 2009

They should! Have scent that is….

Click here…NOT! Replace all instances of the phrase “click here” Click here for current articles. becomes Current articles are available here. NSLS 2009

Replace all instances of the phrase “click here”

Click here for current articles.

becomes

Current articles are available here.

Be a wordsmith! Replace vernacular with plain, action orientated words Circulation…are we in a hospital??? Examples? NSLS 2009

Replace vernacular with plain, action orientated words

Circulation…are we in a hospital???

Examples?

Move important info out of the “dead zones” NSLS 2009

Banner Blindness Nielsen”: People have a tendency to never look at the slim rectangular area that's above the page's main headline.” NSLS 2009

Banner Blindness

Nielsen”: People have a tendency to never look at the slim rectangular area that's above the page's main headline.”

If it looks like a duck… … or an ad or promotion, it will likely be ignored NSLS 2009

… or an ad or promotion, it will likely be ignored

NSLS 2009

Harness the Awesome Power of the 3 Question Survey Surveymonkey.com 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 NSLS 2009

Surveymonkey.com

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

Design … matters! Users judge websites QUICKLY and SUPERFICIALLY Behaviour and Information Technology, Volume 25, Number 2/March-April 2006, pp. 115-126(12) NSLS 2009

… matters!

Users judge websites QUICKLY and SUPERFICIALLY

Behaviour and Information Technology, Volume 25, Number 2/March-April 2006, pp. 115-126(12)

NSLS 2009

NSLS 2009

Web 2.0-ify Your Logo NSLS 2009

Characteristics Small chunks of large sans-serif type Cheery colors Rounded edges http://web2.0stylr.com/stylr.aspx NSLS 2009

Small chunks of large sans-serif type

Cheery colors

Rounded edges

http://web2.0stylr.com/stylr.aspx

NSLS 2009

Be an Icon icon http://commons.wikimedia.org/wiki/Crystal_Clear NSLS 2009

http://commons.wikimedia.org/wiki/Crystal_Clear

NSLS 2009

NSLS 2009

Get creative (commons) that is… http://flickr.com/search/advanced/ NSLS 2009

http://flickr.com/search/advanced/

NSLS 2009

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/ NSLS 2009

So, just how slow are you, and why?

Install Firebug + Yslow in Firefox

http://www.getfirebug.com/

http://developer.yahoo.com/yslow/

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

Change these: <a href=&quot;http://www.URL.com/directoryname&quot;>

To these: <a href=&quot;http://www.URL.com/directoryname / &quot;>

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 NSLS 2009

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 NSLS 2009

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. NSLS 2009

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> NSLS 2009

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 NSLS 2009

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 NSLS 2009

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 NSLS 2009

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: NSLS 2009 Inline CSS: Speed tested with: http://www.websiteoptimization.com

www.library.pitt.edu

External CSS:

Results NSLS 2009

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

Tidy your homepage

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

Thin Is In Is your CSS…bloated? NSLS 2009

Is your CSS…bloated?

Search Engine Optimize (SEO) your site Google webmaster tools Site link > Diagnostics > Content analysis > Title tag analysis NSLS 2009

Google webmaster tools

Site link > Diagnostics > Content analysis > Title tag analysis

NSLS 2009

SEO Make sure your pages use heading tags, and make sure you use them properly <h1> <h2> <h3> NSLS 2009

Make sure your pages use heading tags, and make sure you use them properly

<h1>

<h2>

<h3>

SEO: Page Titles Global find and replace…rewrite page titles with the following format: Document title | Section name | Library/site name NSLS 2009

Global find and replace…rewrite page titles with the following format:

Document title | Section name | Library/site name

Add Labels to Your Forms Why? Accessibility: Read by screen readers Accessibility: larger click target 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”> NSLS 2009

Why?

Accessibility: Read by screen readers

Accessibility: larger click target

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. NSLS 2009

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.

Social Media Optimize your site Make your site social media friendly. Why? Social media provides innovative ways for libraries to connect with users we may never see face to face To encourage, promote, innovate, learn, adapt To improve customer service To discover and deliver what users want To “market” without marketing NSLS 2009

Make your site social media friendly. Why?

Social media provides innovative ways for libraries to connect with users we may never see face to face

To encourage, promote, innovate, learn, adapt

To improve customer service

To discover and deliver what users want

To “market” without marketing

Add Social Bookmarks Links http://addthis.com *special credit: add them to catalog records too! NSLS 2009

http://addthis.com

*special credit: add them to catalog records too!

NSLS 2009

Social media metrics in a minute Are you having an impact? Page rank analysis google.com best job of the big three search engines in indexing and integrating social media sources like blog posts, videos, and Flickr photo sets NSLS 2009

Are you having an impact?

Page rank analysis

google.com

best job of the big three search engines in indexing and integrating social media sources like blog posts, videos, and Flickr photo sets

Social Media Metrics Social media presence analysis Bookmarks delicious.com Blogs technorati.com Tone analysis…what’s the nature of the buzzzzzz? Stars Scars Neutral NSLS 2009

Social media presence analysis

Bookmarks delicious.com

Blogs technorati.com

Tone analysis…what’s the nature of the buzzzzzz?

Stars

Scars

Neutral

Create alerts http://www.google.com/alerts NSLS 2009

http://www.google.com/alerts

Questions? NSLS 2009

Thank you! NSLS 2009

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 ://addthis.com http://microformats.org http://credibility.stanford.edu/ NSLS 2009

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 ://addthis.com

http://microformats.org

http://credibility.stanford.edu/