Website Design

embedded flickr slideshows

Check out HOW TO Quickie: Embedded Flickr Slideshows. I plunked the code into http://weareinflux.com/flickr and I like it. You can also see an example below, which is a display of my photos tagged ‘mobilepic.’ This code is flexible in that you can be selective or inclusive in the photos to be shown. The down side is that only one size can be displayed, requiring some serious devoted real estate. The frame size can be changed, but then the photos are cut off.

Off the top of my head I can think of a few applications for this on a library website:

  • Inform people visually about the meeting room
  • Document an event
  • Show off a computer lab
  • Highlight an art collection

and perhaps my favorite idea…

  • Combine an embedded mp3 file with a slideshow of illustrations to create an amazing online storytime! Kids could listen to a librarian as they watch the story unfold. I’m really tempted to try this, but my drawings would probably scare the kids and the whole project would fail. I may need to employ the help of an artist friend, because there’s probably not many public domain illustrations for children’s books. Tho I do know of Ardvark the Aardvark.

Any other ideas?

Read More
actions > words

There is a fair amount of grumbling going on about the marketing of the Gap’s website redesign. signal vs noise and Power to the People take issue with this big, orange statement from the Gap website.

image from gap.com

The comment quoted by signal vs noise sums it up well:

They’re saying the right things, only they’ve got them backwards. “Latest technologies”, “innovative tools,” and “new features” are pretty much meaningless if the “shopping experience” isn’t better. Now, I don’t want to pick on Gap, but this illustrates (rather well) the point I’m trying to make: Put the people first, then devise simple solutions — the experience is what matters.

This sentiment is really useful not only for our library websites, but our institutions as well. This just another way to state the importance of putting our focus on our users. All of the great technology in our libraries shouldn’t exist for its own sake, but rather should exists because it helps.

However, regarding their criticism of the Gap’s placement of emphasis, I’m not convinced that we need to be telling our patrons that we’re attempting to create an experience. People don’t really want to be told that they are going to have an experience. Talk of experience in PR can smack of marketing jargon and be a major turn off. In other words, it isn’t useful for an institution to proclaim, “We’re user-centered,” or “Come here for an experiential transaction.” Customers and library patrons know full well if an institution is user-centered or if they’ve had an experiental transaction without (or in spite of) being told that they’ve had an experience.

What are we supposed to tell our patrons then? If and only if it were true, I think one great slogan for our libraries would be:

Libraries. We’re easy.

It’s short, catchy, to the point and memorable. The rest of the story would be told with our actions. We’ve got a ways to go before we can pull that one out.

Read More
simple google map “hack”

Many moons ago I posted about some library fun with google maps API. I’ve finally made some time to add data into the map I had for the Western Springs History (for which I also chose a new WordPress theme). Take a look at the Western Springs History interactive map, and if you like it, here some code. Libraries could use something like this to display the location of the building/s, or maybe just map out the best places to eat around the library.

The code for the map calls in an XML file named “data.xml” which should reside in the same directory as your HTML file. You’ll need to change one thing in the code before you try load it into a brower. Sign up for a google maps api key and paste it in where the code instructs towards the top of the document. You’ll likely also want to Ctrl-F to find “map.centerAndZoom(new GPoint(-87.899300, 41.812600), 3).” The first two numbers are the latitude and longitude that will be displayed when your map is loaded. The third number is the level of zoom. Unlike Yahoo! Maps, Google Maps doesn’t do any geocoding, so you can’t simply enter an address for your new GPoint. Fear not, you can use the free geocoder.us to get the lat/long data of an address.

There are all kinds of fancy things you can do with the XML, but here’s what I chose for my map:

<markers>
<marker lat=”XX.XXXXXX” lng=”-XX.XXXXX” img=”URL TO IMAGE” descr=”TEXT THAT APPEARS ON THE RIGHT” addr=”ADDRESS INFO” url=”LINK TO HOUSE RECORD”/>
</markers>

Add in as many points are you like.

Once you have an HTML file with the altered code and a data.xml file in a folder, open it up and see what happens. You can easily customize your map further by reading the Google Maps API Documentation. Also take a look at EZ Maps and the list of map projects from Mapki.

Read More
TFML website redesign

New TFML HomepageI spent some time redesigning and restructuring MPOW’s website. The old site wasn’t getting much attention from me because I couldn’t stand to look at it anymore. The only way to update it was to rip is apart and start over. The bad part about it is that the navigation suffered a bit, I think, but I’ve got a plan to make it better.

The good part is that the site looks so much better, and is now ACTION ORIENTED and USER CENTERED. So instead of “Readers’ Advisory,” users see “find a book or movie.” Instead of “Adult Services,” “Young Adults” and “Youth Services” users see “adults,” “teens” and “kids.”* It is still fully liquid and scales down decently to 800×600.

I’m really tickled with the corner banner reading “support your library” which Brian points out is a visual metaphor as well, holding up the webpage. If you want to put a corner banner on your site, here’s the code I used:

<div style="position:absolute;top:0;left:0;float:left"><a href="PATHTOLINK"><img src="PATHTOIMAGE" /></a>

Also, here’s a link to the support your library gif [via]

It is a small touch, but I gave people the choice of three font sizes on the page. That is, if people are aware what those As on a page do.

Also, now that it doesn’t look like junk, take a look at our Click-A-Story page. It’ll be interesting to see if anyone uses it as a podcast, if people will just listen in their browsers.

I still have a huge laundry list for the site. Some of it is wishful thinking at this point, some of it is very realistic:

  • better action oriented nav
  • integration with OPAC (not holding my breath, but since John Blyberg has written some great code for the Innovative ILS, maybe I can get SWAN folk at the MLS to work with me at some point.
  • visual cues for being in a certain (age-based) section of the site. i don’t think it should be difficult to find some suitable color changes in the CSS. Also possibly a big, fun, “FOR KIDS” gif placed by the banner for the YS pages
  • breadcrumbs leading back to a page’s ‘parent’ (i.e. teen news >> homework help) displayed on each page. this will be simple to do if I make header includes for each department
  • better looking middle column content, without sacrificing its legibility
  • conversation! I didn’t want to tackle enabling comments right now. easy to do technical wise, but it’ll take some time to formulate and write a policy. this one is important and we’ve gotta get it right.
  • more content. the hard part.
  • expose RSS where it exits. the site needs some orange gifs, har har.
  • etc, etc…

We’re going to start a formal process of planning the next generation of our website in January. Participants will include a board member, four staff members and two or three members of the community.

Now that you’ve read the words, you can see some images with annotations in my flickr set new TFML site. Let me know what you think, feel free to point out anything you think is bad, and of course feel free to write me some CSS to accomplish anything I’ve listed above 😛

*note: I got the okay from the head of Youth Services to use the word “kids.” I know sometime YS librarians see the word as derogatory.

UPDATE: you too can try this at home. there are many great open source and public domain CSS layouts available on the web. this one is from ruthsarian layouts. also take a look at blue robot.

Read More
testing, testing again

Now I’m testing Flock’s Flickr tool (say that ten times fast). Using the browser’s blog authoring tool, it is possible to pull up one’s (or anyone’s) photos on Flickr. The pictures can then be dragged-and-dropped into a blog post. I’ll choose to post one of my dog in his Halloween costume. I give you Darth Mao:

darth mao

Interesting to note that the search box in Flock defaults to Yahoo! Could they be poising themselves for a buy-out already? Other options in the search box are google, amazon, ebay, technorati, and wikipedia.

Speaking of wikipedia, tonight the Periodicals librarian beat me to the punch answering a reference question about the usage of a word. She found an answer on wikipedia while I was walking to the dictionary. I tell ya, give’em an inch… 😉 She was pleased and so was I.

One more thought about Flock, or the concept of a highly personalized browser in general. Let’s say, like I have, that I set up my browser to interact with my Flickr account, blogs, del.icio.us bookmarks, and maybe things like RSS feeds and email. I’m sure other things might pop up too like calendar and netflix widgets. This is fine and dandy when I’m on my own machine, but what happens when I’m using a computer at a friend’s house? I won’t have access to my information powerhouse browser, and in fact, I might be invading his space by using a browser with all of his details. Perhaps when this stuff matures, browsers will have a login process to present you with all of your personal goodness and all of the conversations your web applications are having with each other. Right now, though, this seems like a terrifying prospect. Would you give Internet Explorer all of your usernames and passwords *for storage on the web?* Heck no.

Read More
test from the new browser flock

With H5N1 going around, I wonder if they wish they chose a different name. 

I’ve been checking out flock for about 5 minutes now, and I think it has some potential.  It isn’t slow, which a good first step.  There is integration with del.icio.us and flock’s favorites, which seems quite handy. 

So let’s try and post this and see if anything blows up!

UPDATE:  I was able to pull up all my old posts in this browser’s blogging tool and edit this one.

Read More
AIM presence

AOL Instant Messenger is looking to gain some real estate on your website through AIM Presence. A very short registration gives you a line of code to paste into your site. This code will display one of a six small icons, indicating whether you are online, offline, idle, away, or on mobile AIM. Like so:

(this is likely to be the ‘offline’ icon today)

With this release, AOL has reached agreements with SixApart, Facebook and LinkedIn to allow their users to add online presence to their profiles. In other words, people might get accustomed to seeing a graphical representation of a website author’s online status – IMming libraries, I’m looking in your direction! I’ve already seen this on a few library sites, accomplished by a third-party solution. Code straight from AIM is likely to be more reliable, and it probably won’t be long before MSN and Yahoo join in with an effort.

I think that AIM did this right. It is simple to get the code, and the result isn’t garish or somehow advert laden. Instead, it is pretty plain and simple. Does anyone feel like reading the TOS?

[via bigblueball]

Read More
easier dynamic pages with movable type 3.12

You may recall from an earlier post that I updgraded versions of Movable Type, which I’m using as a content management system for my library’s website. The problem is that I can’t get dynamic publishing to work. Therefore I can’t easily have RSS displayed as HTML on the site.

Shifty* sent me an email that cheered me up:

Did you see 3.12 is out? “Dynamic pages are easier to configure: Movable Type creates .htaccess file for webserver configuration.”

http://www.movabletype.org/news/2004/10/movable_type_312_release.shtml

I’ll be on the case, upgrading and testing tomorrow morning.

*see, if i keep linking to her by that name, i can slowly start a meme so that eventually she’ll be a top search result for the word. why? i dunno.

Read More
1 12 13 14