Fast & Easy Site Tuneups Session

Jeff Wisniewski’s presentation was apropos and exciting for me, because it talked about theoretically quick fixes to make your website better. I like his philosophy of iterative improvement of your site because – as he pointed out so well – the full redesign process that so many libraries engage in can take a long time and cause considerable disruption along the way.

He reminded us that it would be a good idea to create an external script- such as a javascript that pulls the current year into the copyright statement. He also suggested that we do more with our “contacts”, including adding photos to contact information to give the library and face and using microformats to make our contact info more usable. Look at the Dreamweaver Microformats extension - http://www.webstandards.org/action/dwtf/microformats/ & review hCard creator - http://microformats.org/code/hcard/creator. He talked about the use fo Firefox extensions, such as Tails - https://addons.mozilla.org/en-US/firefox/addon/2240 - and Operator - http://labs.mozilla.com/2006/12/introducing-operator/ - to read microformats within web pages.

Jeff suggested harnessing the “awesome power of the 3 question survey”. One example would be: (1) what was the purpose of your visit to our website today? (2) were you able to complete your task today? (3) if not, why not? You could use SurveyMonkey or similar product to tally results.

He also spoke about “scanhostile” (a new word he coined) phrasing, such as “click here” for hyperlinks. He suggested use of the global find & replace function to seek out instances of the dreaded “click here”.

On the style front, he suggested you try automatic creation of a friendly Web2.0 type logo through a site like Web2.0 Stylr. Characteristics of Web2.0 graphics include: (1) small chunks of large sans serif type; (2) cheery colors; (3) rounded edges. Try Web2.0 Stylr - http://web2.0stylr.com/stylr.aspx. He also suggested we add more graphical information, such as common icons to our site. To get them for free, try http://commons.wikimedia.org/wiki/Crystal_Clear where there are freely downloadable, high-resolution (.png format) icons. And remove items out of the “blindness zone” on your webpage. For example, there is the dreaded “banner blindness”, in which web users have become so accustomed to advertising appearing across the top their eyes skip to lower down on the page.

To reduce load on your web server add the trailing slash to all hyperlinks to subdirectories (e.g., in my case, turn something like http://www.cslib.org/agencies to http://www.cslib.org/agencies/).

To increase the speed that your pages load, you can first test slowness. One tool is YSlow (http://developer.yahoo.com/yslow/), a Firefox extension (requires preinstallation of the Firebug extension - http://www.getfirebug.com/ ). Tidy your pages using the html validator at W3C - http://validator.w3.org/ - click on the “More Options” & check the box next to “Clean up Markup with HTML Tidy”.

Take advantage of better caching to increase the speed your pages load. On the server side, you can modify file caching & cache expiration by file extension – e.g., increase caching of images. If you have many small images it = many http requests, which can slow things down, so consider turned small images into 1 larger image. Eliminating inline scripts & styles increases the speed of all pages on your site – EXCEPT your home page. This is per Yahoo’s research. In your home page, have inline scripts, but throughout the rest of your site, do not – use external scripting. He showed results of a test using www.websiteoptimization.com that proved this. Also, check for & clean up bloated CSS.

For Search Engine Optimization, he reminded anyone not already using Google Webmaster Tools to take advantage of them. He used them to run a diagnostic on title tags. Poor page titling reduces search engine findability of pages. Use a global find & replace, if needed, to address page titling problems. The ideal pattern for a page title is: Document Title: Section Name: Library Site Name.

To improve accessibility and usability, add labels to your forms and use the right type of form field. Labeling form fields has the added benefit of – when applied to checkboxes – making even clicking around the field – on the label – add the check into the box (so if you have users with mousing issues, this will make the checkboxes function better for them). Be aware that radio buttons are to be used for mutually exclusive options and checkboxes for those times when the user would want to make 1 or more choices.

Finally, make your site social media-friendly. For example, create an easy way to add bookmarks to all pages, such as a quick snippet of javascript (I think the site he suggested to create the bookmark this page script snippet was http://www.addtobookmarks.com/).