Extreme Makeover: Library Website Edition Elizabeth Thomsen and Kevin Grocki NOBLE : North of Boston Library Exchange Massachusetts Library Association May 4, 2007

Elizabeth Thomsen and Kevin Grocki

NOBLE : North of Boston Library Exchange

Massachusetts Library Association

May 4, 2007

Once Upon a Time… Your library website was new. Maybe it was A homemade effort The product of one talented staff member, now gone or busy The collaboration of several staff members, all now gone or busy The work of a professional designer outside your own organization

Your library website was new. Maybe it was

A homemade effort

The product of one talented staff member, now gone or busy

The collaboration of several staff members, all now gone or busy

The work of a professional designer outside your own organization

What Happened to Your Website ? Not much Too much

Not much

Too much

Not Much It looks like it looked in 1996 Static, brochure-style site Person who did it left You rarely use it and neither does anyone else It’s better than nothing

It looks like it looked in 1996

Static, brochure-style site

Person who did it left

You rarely use it and neither does anyone else

It’s better than nothing

Too Much Lots of people worked on it over the years Lots of different programs and methods Lots of good content Lots of outdated stuff Lots of stuff that winks, blinks, spins, etc. Lots of dead links, missing files, etc.

Lots of people worked on it over the years

Lots of different programs and methods

Lots of good content

Lots of outdated stuff

Lots of stuff that winks, blinks, spins, etc.

Lots of dead links, missing files, etc.

Either way… You feel embarrassed and guilty whenever the subject of your website comes up You feel annoyed and guilty whenever you have to update it You make occasional efforts to work on it, but you really just want to start over

You feel embarrassed and guilty whenever the subject of your website comes up

You feel annoyed and guilty whenever you have to update it

You make occasional efforts to work on it, but you really just want to start over

Things Fall Apart Website are like gardens or lawns or houses or library collections or relationships Websites need regular tending to keep them in shape Respect the past – it’s easy but wrong to make fun of tacky old websites

Website are like gardens or lawns or houses or library collections or relationships

Websites need regular tending to keep them in shape

Respect the past – it’s easy but wrong to make fun of tacky old websites

Redesign Rules Planning a library website is like planning a library building How will people enter, move around, find what they need? Mistakes are way less costly Planning is good, but don’t get stuck there

Planning a library website is like planning a library building

How will people enter, move around, find what they need?

Mistakes are way less costly

Planning is good, but don’t get stuck there

Gradual Changes or Relaunch? Which is easier? Which is better service? Which is better PR? No easy answers Don’t get caught between – new site not ready but you’ve lost interest in the old one

Which is easier?

Which is better service?

Which is better PR?

No easy answers

Don’t get caught between – new site not ready but you’ve lost interest in the old one

It’s All About Content What content do you already have on your website that’s worth keeping? What content do you have elsewhere – newsletters, booklists, articles, etc.? What new content do you want to add?

What content do you already have on your website that’s worth keeping?

What content do you have elsewhere – newsletters, booklists, articles, etc.?

What new content do you want to add?

Writing for the Web Short, simple, clear writing Informal : Talk like a human being Newspaper style : most important facts first Headings and Links are important – choose those words carefully Avoid the Click Here syndrome

Short, simple, clear writing

Informal : Talk like a human being

Newspaper style : most important facts first

Headings and Links are important – choose those words carefully

Avoid the Click Here syndrome

Links Bad: If you want to read more about George Washington, click here . Better: Read more about George Washington Best: George Washington – Read more about our first President

Bad:

If you want to read more about George Washington, click here .

Better:

Read more about George Washington

Best:

George Washington – Read more about our first President

Think Like Your Users Who are your users? What do they want to know? Basics : hours, directions, phone numbers, how to get a library card How to get help: Butler University

Who are your users?

What do they want to know?

Basics : hours, directions, phone numbers, how to get a library card

How to get help: Butler University

Basic Library Services The library catalog : search box, linked titles, linked reserve buttons Online databases : avoid double links (library and home)

The library catalog : search box, linked titles, linked reserve buttons

Online databases : avoid double links (library and home)

Findability and Searchability How did they get to your site? (Look at your search logs) Do they know where they are? (not everyone comes in through the front door) Search site

How did they get to your site?

(Look at your search logs)

Do they know where they are?

(not everyone comes in through the front door)

Search site

Metadata Title element : identify library, state, page (but short enough to bookmark) Meta description element: <meta name=“description” content=“”> Domain name: sense of identity Favicon : subtle visual cue: Melrose

Title element : identify library, state, page (but short enough to bookmark)

Meta description element:

<meta name=“description” content=“”>

Domain name: sense of identity

Favicon : subtle visual cue: Melrose

Add Visual Interest… …but lose the old, bad clip art Also lose most animated graphics Best images to use are photographs, book covers, art by children and teens Be careful about copyright Be careful about privacy rights

…but lose the old, bad clip art

Also lose most animated graphics

Best images to use are photographs, book covers, art by children and teens

Be careful about copyright

Be careful about privacy rights

Photographs for Your Website Keep the digital camera handy and take pictures of everything Enlist patrons and volunteer photographers

Keep the digital camera handy and take pictures of everything

Enlist patrons and volunteer photographers

Search Flickr for Photographs An advanced search lets you find photographs that have been assigned a Creative Commons license. Most allow free use with attribution for noncommercial sites, some also allow modification Photographs for Your Website from Flickr

An advanced search lets you find photographs that have been assigned a Creative Commons license. Most allow free use with attribution for noncommercial sites, some also allow modification

Photographs for Your Website from Flickr

Dynamic Content Dynamic content changes by itself Use Javascript* for random or rotating images or snippets of text. Viewers see something different every time they visit, you can to use more items Saugus Public Library – “Did you know…” Javascript Rotation Builder

Dynamic content changes by itself

Use Javascript* for random or rotating images or snippets of text. Viewers see something different every time they visit, you can to use more items

Saugus Public Library – “Did you know…”

Javascript Rotation Builder

Get Creative with Cool Tools Enhance your photographs with borders, text, and special effects using easy tools Lansing Celebrity Read Posters Motivational Posters Make photo galleries with a few clicks using Picasa* Lynn Public Library Building

Enhance your photographs with borders, text, and special effects using easy tools

Lansing Celebrity Read Posters

Motivational Posters

Make photo galleries with a few clicks using Picasa*

Lynn Public Library Building

Badges Badges are small pieces of Javascript* generated by another website to put on your own. When someone visits your page, the badge pulls in random or rotating content from the other site. Examples: Upcoming.org, Flickr, Furl Badge Samples

Badges are small pieces of Javascript* generated by another website to put on your own. When someone visits your page, the badge pulls in random or rotating content from the other site.

Examples: Upcoming.org, Flickr, Furl

Badge Samples

Adding Web Feeds to Pages Use feed2js* to generate Javascript that will display RSS feeds on your pages Sources can be your own blog, newspapers, Yahoo News, NPR, social bookmarking sites, licensed databases, etc. Feed2js | Merrimack College

Use feed2js* to generate Javascript that will display RSS feeds on your pages

Sources can be your own blog, newspapers, Yahoo News, NPR, social bookmarking sites, licensed databases, etc.

Feed2js | Merrimack College

The Think Smart Approach Use techniques that make it quick and easy for the library staff to add new content Use dynamic content so your website always looks fresh Don’t write every page from scratch – use rubber stamp approaches Separate content from presentation

Use techniques that make it quick and easy for the library staff to add new content

Use dynamic content so your website always looks fresh

Don’t write every page from scratch – use rubber stamp approaches

Separate content from presentation

Principle of Economy Do as little work as possible Minimum effort, maximum impact Write once, use many times True of both text and code Two basic techniques: SSI and CSS

Do as little work as possible

Minimum effort, maximum impact

Write once, use many times

True of both text and code

Two basic techniques: SSI and CSS

SSI: Server Side Includes Header, footer, navigation menu, other standard text are separate files Web pages have a command telling the server to include them: <!-- virtual include=“header.txt” --> Changing one file changes every page Simplifies the code on every page Must be supported by the server

Header, footer, navigation menu, other standard text are separate files

Web pages have a command telling the server to include them:

<!-- virtual include=“header.txt” -->

Changing one file changes every page

Simplifies the code on every page

Must be supported by the server

Conditional SSI You can add different text or code in different circumstances : for example, based on the season, or whether the user is inside or outside the library Unlike Javascript, not dependent on browser configuration

You can add different text or code in different circumstances : for example, based on the season, or whether the user is inside or outside the library

Unlike Javascript, not dependent on browser configuration

CSS: Cascading Style Sheets Set of rules for styling a page Can control all presentation elements, including fonts, colors, background images, position of elements, link styles, mouseover effects and more HTML document links to the stylesheet, which then tells the browser how to display the page

Set of rules for styling a page

Can control all presentation elements, including fonts, colors, background images, position of elements, link styles, mouseover effects and more

HTML document links to the stylesheet, which then tells the browser how to display the page

CSS Example Without CSS, presentation is explained in the HTML <center> <font face =“Arial” size =“large” color=“#CCFF99”> <h1>The History of the World</h1> </font> </center>

Without CSS, presentation is explained in the HTML

<center>

<font face =“Arial” size =“large” color=“#CCFF99”>

<h1>The History of the World</h1>

</font>

</center>

CSS Example With CSS, the stylesheet file has a rule for how to display heading level 1 : H1 {text-align: center; font-family: Arial, sans-serif; font-color: #ccff99; font-size: 120%} And here’s the HTML: <h1>The History of the World</h1>

With CSS, the stylesheet file has a rule for how to display heading level 1 :

H1 {text-align: center;

font-family: Arial, sans-serif;

font-color: #ccff99;

font-size: 120%}

And here’s the HTML:

<h1>The History of the World</h1>

Advantages of Using CSS All the rules are defined in one place, making them easy to change. To change the the look of headings throughout the site, you don’t edit the pages, you just change the rule Each page is much smaller and simpler, making them easier to edit File sizes are smaller, faster transfer

All the rules are defined in one place, making them easy to change. To change the the look of headings throughout the site, you don’t edit the pages, you just change the rule

Each page is much smaller and simpler, making them easier to edit

File sizes are smaller, faster transfer

The Power of CSS Simple code can be more accessible to non-graphical browsers like Lynx, screen-reading programs, etc. Can use separate stylesheets for different media: screen, print, handheld Examples: Simple CSS Exercise | CSS Zen Garden

Simple code can be more accessible to non-graphical browsers like Lynx, screen-reading programs, etc.

Can use separate stylesheets for different media: screen, print, handheld

Examples:

Simple CSS Exercise | CSS Zen Garden

Content Management System A Content Management System is a program that provides an interface for entering, editing and deleting both web content and “containers” for displaying that content To write a new page, you enter just the new content; that data is displayed using templates and stylesheets Usually understands different content types: pages, posts, etc.

A Content Management System is a program that provides an interface for entering, editing and deleting both web content and “containers” for displaying that content

To write a new page, you enter just the new content; that data is displayed using templates and stylesheets

Usually understands different content types: pages, posts, etc.

CMS Examples Drupal, Joomla, Plone WordPress : Is your website really a blog? This site lets you try demo versions of many different systems: www. opensourcecms .com

Drupal, Joomla, Plone

WordPress : Is your website really a blog?

This site lets you try demo versions of many different systems:

www. opensourcecms .com

More about WordPress [Added May 7] WordPress is free open source software. It’s supported by a large and active community of users, and there are many themes and extensions that you can use to customize your site and add new functionality.

WordPress is free open source software. It’s supported by a large and active community of users, and there are many themes and extensions that you can use to customize your site and add new functionality.

You can learn more about WordPress at the official website: http://www.wordpress.org If you’re interested in using WordPress for blogging or as a CMS, check with your webhosting service or IT department to see if they support WordPress or are willing to do so.

You can learn more about WordPress at the official website: http://www.wordpress.org

If you’re interested in using WordPress for blogging or as a CMS, check with your webhosting service or IT department to see if they support WordPress or are willing to do so.

WordPress.com There’s also a free WordPress hosting service : http://www.wordpress.com This is a good service, for individuals, small organizations, or anyone who just wants to try the system, but is running a multiuser version of the software and offers fewer options for customization, adding themes and extensions.

There’s also a free WordPress hosting service : http://www.wordpress.com

This is a good service, for individuals, small organizations, or anyone who just wants to try the system, but is running a multiuser version of the software and offers fewer options for customization, adding themes and extensions.

Essential Tools Firefox extensions Firefox Extensions Find a simple program for basic image editing and adjustment: crop, resize, adjust colors Picasa – Free program from Google, simple photo management for your PC Picnik – Really easy, elegant, web-based editing, integrates with Flickr

Firefox extensions

Firefox Extensions

Find a simple program for basic image editing and adjustment: crop, resize, adjust colors

Picasa – Free program from Google, simple photo management for your PC

Picnik – Really easy, elegant, web-based editing, integrates with Flickr

Questions? Elizabeth Thomsen [email_address] Kevin Grocki kgrocki @gmail.com Presentation on Slideshare http://www.slideshare.net

Elizabeth Thomsen

[email_address]

Kevin Grocki

kgrocki @gmail.com

Presentation on Slideshare http://www.slideshare.net