Fast and Easy Website Tune Ups

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

Redesigning is Expensive! Redesign is expensive for you Redesign is expensive for users Lots of important sites don’t “redesign” 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

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.

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

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 making your website in such a way that it comes across as trustworthy and knowledgeable NSLS 2009

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

Feature your physical address prominently 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

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

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

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

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

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

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

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

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

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

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

If it looks like a duck… … 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

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

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

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

Get creative (commons) that is… 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

Don’t Make the Server Think! Change these: <a href="http://www.URL.com/directoryname"> To these: <a href="http://www.URL.com/directoryname / "> NSLS 2009

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

For server admins Server configuration file Set certain file types to stay fresh/not expire Image file types, css, js files, pdfs NSLS 2009

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

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

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

Eliminate Inline Scripts In most cases calling scripts from external files will speed page download time, especially if these items are cached NSLS 2009

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

Example www.library.pitt.edu External CSS: NSLS 2009 Inline CSS: Speed tested with: http://www.websiteoptimization.com

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

Thin Is In Is your CSS…bloated? NSLS 2009

Search Engine Optimize (SEO) your site 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

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

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">Affiliation: </label> <input type=”checkbox" name=”affiliation” value=“cardholder”> <input type=”checkbox" name=”affiliation” value=“visitor”> NSLS 2009

… 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

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

Add Social Bookmarks Links 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

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

Create alerts http://www.google.com/alerts 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

Fast and Easy Website Tune Ups

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to Fast and Easy Website Tune Ups

Similar to Fast and Easy Website Tune Ups (20)

More from Jeff Wisniewski

More from Jeff Wisniewski (18)

Recently uploaded

Recently uploaded (20)

Fast and Easy Website Tune Ups