EDUCAUSE 2014

Brian Farr and I will be discussing our library website rebuild and the ins and outs of successfully using Wordpress as a CMS at this year's EDUCAUSE conference in Orlando, Florida. We'll be presenting at 2:30pm on Tuesday, in Meeting Room W311F-H. [Tuesday schedule]

Our talk, Building Academic Websites (in the Real World) will also be webcast, so if you'll be attending the virtual conference, you can catch us there too!



As usual, I'll include links to any of the resources we talk about, and try to keep the list updated as new topics or questions arise:

• List of Helpful WordPress Resources
• Tutorial for using scripts to add functionality to Google Forms

And, because animated gifs don't work in slideshare, here's the run-through of the evolution of the new site. Agile development FTW!

CUNY IT Conference - Building Academic Websites (in the Real World)

I'm presenting tomorrow at the 2013 CUNY IT Conference, where Brian Farr (our Systems Manager) and I will be talking about the process of developing our new library website. If you'll be at the conference, consider coming to see our talk at 2:15pm. [Conference schedule]

• Slides from our talk
• List of Helpful WordPress Resources
• Tutorial for using scripts to add functionality to Google Forms
• Slides from a similar talk I gave for ACRL-NY, which are more boring, but also more informational

I also have some fun slideshows of the site-building process, with screenshots and mockups and crazy marked up documents, which I'll add next week.

the anatomy of a crash, part 1

In accordance with Finagle's corollary to Murphy's Law, the website broke the day our sysadmin went on a 2 week vacation on another continent. What's most surprising about this is how little it surprised me. First, what happened:

Our library website is using a very old installation of the Joomla content management system (1.5.7 I believe.) Our implementation, for whatever reason, is insecure. I know very little about Joomla or server security, other than to nod sagely and say, "could be an SQL injection attack" (much in the same way dudes will surround an open car hood, though they know nothing about fixing cars, and say, "it's probably the transmission.")

So last Friday, sometime around 11am, our website stopped being an actual website, and started being just a page that displayed the site title. Not so useful for users, I'd imagine. My first instinct is to look at the main index.php page to see if it's been replaced with a different one. I've dealt with this hack in the past, just the result of some asshole saying "LOOK WHAT I CAN DO!" You just delete the new index file they put in, and put yours back in.

When I checked our index file, it was present, not renamed, and all the content was accounted for. At the end of the file there was a php command that was trying to redirect the site to some .biz.tr website, so I took out that code and figured the problem was fixed. Nope, site was still b0rked. I went into all the sub-folders' index files, and found some malicious code in them too, so I decided to just replace all of them with clean backup versions. Still. B0rked. On to the config file. Everything looks fine there, but I replace it with a back up version anyway.

Also it was about this time I sent out an email to the staff that basically said YES I KNOW THE SITE IS DOWN YOU CAN ALL STOP CALLING ME ABOUT IT.

At this point I'm stumped, so I call the head of Media Services, who maintains the servers. He goes in to check which files were accessed at 11am that day. None. Uh, ok. He has me go into the database, to see if the content looks ok, and it does. It occurs to me that I'm able to get into the site from the admin panel, which is a subfolder in the site root, so it's not that the whole site directory is corrupt. Subpages of the actual site, however, are not loading.

We finally realize that this is not going to be an easy fix, so I put up a temporary webpage linking to common services, most of which are on different servers, so they're fine (catalog, database list, LibGuides, and Google forms.)

The head of Media Services then spent his weekend picking through all the myriad of folders on the server to find workable backups of pretty much all the pieces of the site (which, in a content management system, are many.) He then pieced the site back together, file by file. I honestly don't know the details of how he made this happen, because whenever I asked him about it, he sounded like he was going to cry or murder a baby panda, so I'm just gonna let that go. He obviously has some sort of PTSD, and I don't want to poke the painful memories of "the incident." He did mention something about finding out that the site was actually hacked in June, and was only taken down just now by a remotely-issued command that activated the previously-inserted code. Insidious bastards.

I did a Google search for the spam url I found in the main index page, and it's been injected into tons of insecure Joomla installs. I only mention this because people keep asking what kind of douchebag hacker makes it his life work to take down crappy college library websites. It was just a bot that looked for vulnerable targets. Nothing personal, my friends.

The good news is that I learned many lessons from this whole debacle, and have much to share with you along the lines of "how to make sure this doesn't happen to you because it's not fun." I'm going to put that in another post though, because I need to go pour myself a giant tumbler of whiskey right now. Stay tuned...

Crappy image maps messing with my mind

Please, for the life of Brian, give adequate thought to creating image maps (images that contain multiple links, mapped to different areas of the image.) While they can be useful, and even creative, they can also be confusing. (The one in the linked Wikipedia entry is a good example of a creatively-designed image map, that has some functional issues.)

In web design, you rely on certain conventions to indicate to the user what can be clicked on (ie-a link.) If you use an image as a link, users can see the image is click-able by mousing over it, and seeing if the pointer changes from an arrow to a hand. However, if you make an image into an image map, but divide the entire image into click-able sections, it can be hard to tell the different areas of the image link to different places. You can help alleviate this problem by restricting the click-able areas to distinct areas, separated by some non-click-able space, and also by using tool-tips or title tags to describe the link hidden in that part of the image.

My motivation for this post? My own damn library's website. Check out the header on this page: http://www.library.csi.cuny.edu. It took me a moment to realize that the entire header didn't link back to our website, but also contained a link to the school's website. After much clicking and confusion, I realized that the bottom part of that image not only contains a link to the *school's* website, but also the school *system.* Now, maybe you got that at first glance, but I honestly didn't, and I highly doubt I'm the only one to make that mistake. Part of the problem is that the site was created years ago, and as I mentioned in the Harvard Library website post, alt tags are no longer rendered as tool tips by all browsers (I'm using Chrome, and they don't show up when you hover over the links in it.)

I opened the page in Dreamweaver to be able to visualize where the links were mapped to (see below,) and I can honestly say that they tried to keep the links tight to the text, but I think that the bottom two links are just too close together for it to be quickly apparent to the user that they link to two separate places.

How would I have done it? I would have probably made the "CSI" part link to the school, and the rest would link to the library. I'd probably add the "City University of New York" as a regular text link, underneath the header image, or possibly just in the footer.

Just remember when creating image maps: unless the user hovers over various areas of the image to find the links/tool tips, there is no external indicator as to what part of the image links to what (ie-you can't tell just by looking at it.) You have to rely on visual cues and web design standards to cue the user in to the fact that the image contains a.) a link and/or b.) multiple links. They may not take the time to wave their cursor across the whole image to discover just how many links there are, and what they link to.*

*Some cues that there are multiple links are:

• Scrolling over the image and noticing that the entire image is not click-able. Many developers will not bother creating an image map to insert a single link in an image, unless they have a good reason to; they'll just make the entire image the link.
• Patterns... If it's a picture of the solar system, and the first two planets are links, the user will guess that the rest of the planets are too. Same thing with maps where more than one location is linked, or groups of people where more than one person is linked. (etc, etc...)
• Added visual cues such as numbers, letters, or symbols that indicate where the user might find a link. (Example: http://www.frankmanno.com/ideas/css-imagemap/#ex)

FORKED!

The list of library tech peeps was starting to get a bit unwieldy, so I forked it! Sheet 1 of the list is website and user experience types, while sheet 2 is digital projects/eResources/systems/repository types. I know there's some overlap, so when in doubt, I tried to think if I would classify that particular person as "front-end" or "back-end." And yes, I do giggle whenever I think of someone as a "back-end" person. I AM TEH MAHTYUR.

If you think I've mis-classified you, or if I have your link(s) wrong, just let me know, and I'll fix it ASAP, because I now have a Gdrive app on my phone so I can be fly on the fly. Waitwhat? Shuddup it's Monday and I've had 3 cups of coffee already.

Catching Up On the World of Library WebTech

So, I thought myself fairly knowledgeable in the area of library technology. Turns out, every aspect of library technology has its own communities, its own published body of knowledge, its own go-to gals and guys. Yes, you say, well, duh. I thought much of my experience in social media and online marketing would carry over into my new web services position, but I'm finding out that this is a wonderful new pond, with wonderful new fish.

As I learn of this stuff, so shall you, because I'm pedantic like that. I mean generous. Whatevs. Either way, I am starting a list for myself of web services-type librarians. I'm mostly concerned with blogs I should be reading, people I should be following on Twitter, and library websites I should look to for best practices. You should help me with this endeavor, because you're a nice person, and you totally just thought of someone or something I left off the list.



Who is missing from this list? Let me know in the comments!

PS - If you're having trouble viewing the silly embedded spreadsheet, you can view the full spreadsheet here.

PPS - Yes, I should have linked those twitter usernames. I will. Tomorrow. [DONE]

PPPS - I split the list into 2 lists.

Just one more thing...

One thing I forgot to mention in yesterday's post on Harvard's library site... They have a really sleek user feedback system. When you click on the "Tell Us" button at the top of the page, you get the following javascript pop up:

I love that it not only gives you a place to provide feedback, but also tracks and reports on known issues. This saves time for both the user, and the helpdesk, since the helpdesk is used to receiving untold numbers of reports on the same printer being broken, or the wireless being down. This system allows users to see what issues are currently being dealt with before submitting their comment. Users can also comment on or "vote up" issues without having to submit a new ticket.

I did a little snooping around in the code, and it would seem that they are using (and correct me if I'm wrong here) an online helpdesk system called UserVoice. I like not only the functionality of the software, but also the sleek way it integrates into your website, and provides a social aspect to the online helpdesk. Nicely done, all around!

Harvard Library: a closer look

I took a look at the Harvard Library website over the weekend, to pick apart the elements of the site that I really like. First and foremost, I love the minimalist layout and color scheme. The white background makes it look less boxy, and the sections are separated by horizontal lines instead of rectangular borders. I know library websites are chock full of content that we want our users to be aware of, but when there's too much content on a page, I find I can't focus on anything.

When it comes to details, I like the mix of text and images. They use icons in the upper right corner to draw attention to popular services (1). I think these are fairly good icon choices, but in general you have to be careful with them. You can get creative, but don't use an icon that's commonly known for one thing, for something else. For example, a wrench or gear(s) is often used for "settings," so this icon can cause confusion when linking to something else. I think they're ok here, though, since they include easy-to-read labels under the icons. (Joshua Porter just posted on the use of labels with icons. How fortuitous!)

It's common practice these days, but I'll mention it anyway: I like having the search box function front and center (2). I think this site does the service one better though, in including a "What am I searching?" feature. Library collections can be confusing, and often we have different search functions for different collections (catalog for books, integrated search for databases, digital repository for archives, discovery service for everything...) I know not everyone will read the text, but it's concise enough not to be obtrusive, and adds useful information for anyone willing to scan over it.

The scrolling news items at the bottom of the page (3) offer another graphical element on an otherwise sparse page, and allow you to highlight events, collections and perhaps even offer a place for alternate entry points to resources for specific communities or to commonly-asked-about services. For example, you could create one specifically for students or faculty, or have one for using Blackboard, logging onto the campus network, or finding textbooks in the library. 

The drop-down links at the top of the page (4) use symbols to denote internal links (which open in the same window) and external links (which open in a new window/tab.) This is especially important in library sites, as many resources we offer are provided by third-party vendors, and it can be disconcerting to click on a link and be faced with a different website, with a completely different look and feel from your own. 

I'm just gonna go ahead and say it. I like deep footers (5). It was at a workshop a few years ago, where a presenter was talking about the NYPL migrating to Drupal, where I first met the deep footer (you can see it in action here), and though I can't remember if it clicked for me right away, or if it upset my 2002 web developer sensibilities, I now think of it as a great, unobtrusive way to add relevant links to your site. I like it especially as a place for all your social media links/icons, as well as for links to content that your users might find useful, but that are outside your own site. For academic libraries, those links might be to the school registrar, the writing and/or tutoring center, and the academic calendar. Especially since many university home pages are catered towards prospective students, rather than current students, these links can help position the library's homepage as a portal for students who want to access information and resources for the school as a whole. 

Finally, I like that when you scroll over the drop down link boxes, you can not only click on the links that appear in that drop down menu, but also the main category under which they are grouped. This gives you a landing page for each category, and a chance to help guide users who want more information on that category, or aren't sure which link they need in the group. The only thing that threw me a bit, was that the landing page links did not match up more closely with the options in the drop down (6). This creates a bit of a logical disconnect in terms of "training" users on navigation. (ie- If they visit the landing page on their first visit, does that help them understand and be able to use the quick navigation on their next visit?)

One final note regarding accessibility: When I learned html (many moons ago) you used the "alt" attribute for both accessibility and as a way to provide information via mouse-over text (or "tooltips".) While poking around in the code of this site, I noticed that they were using both an "alt" *and* a "title" attribute with most of the images. Apparently, it's now standard to include both of these, as not all browsers will render the "alt" tag as a tooltip if the "title" is absent (which used to be the case.) So you want to include an "alt" description for accessibility (and for images that don't display) and a "title" description with whatever information you want the user to see when they mouse over the link or image. For a more thorough explanation of the alt vs title attribute, see: http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/ 

To learn more about how screen readers treat various html elements, I found this resource helpful: http://webaim.org/techniques/screenreader/ (If your library uses LibGuides, they also have an accessibility page, with info on what they do, and what you need to do, to ensure 508 compliance: http://help.springshare.com/accessibility)

Onward Toward the Next Next Gen Library Website

I want to do a series of posts on designing and building a website for an academic library. I'm mostly doing it for myself, as a way to organize my thoughts on the process (since I will be building a library site this semester,) but I thought it might also be useful to share some of the resources I am and will be collecting. And, of course, it's always helpful to have a place to think out loud, so you can get feedback from outside sources.

I do want to make a point before I get started though; these posts are meant to be critique, not criticism. (Or, at least *constructive* criticism.) I don't want to tear anyone down, or poke fun at anyone's efforts. I understand how hard it is to get things done in libraries, given our limited budgets, and the multiple roles everyone on staff must play. Rarely does a library have the staff or the money to hire a specialist to design and build a website, and even when they do, it's hard to find someone with that skill set who also understands libraries and library culture. I feel lucky that I'm in the unique position of having been a reference and instruction librarian for 7 years, and am now in a job that allows me to use the insights I gained working directly with faculty and students to make our website work better for them.

If sacrifices must be made, due to the afore-mentioned budget and time constraints, I can give you a wee piece of advice on the topic: sacrifice style for function, every time. Choose the easiest-to-use software, and make the most popular resources and services the easiest to find. People may snicker at your color choices (I recommend checking out design seeds to help with that) but that's much better than them being frustrated by not being able to find what they're looking for. Snarky users are not necessarily unhappy users. Frustrated users are pretty much *always* unhappy users.

In searching around, I found (and was directed to) several library sites (both academic and public) that I like, and am using for inspiration. Check out:

Harvard Library
Salt Lake City Public Library
Detroit Public Library

I'll tell you why I like them. With the rise in popularity of open source content management systems like Drupal, Joomla and WordPress, websites got very "boxy." Because these CMS's are organized around interchangeable modules, people tend to just drop those module boxes into their site like a puzzle. The above-three sites (at least 2 of which use Drupal) get around that boxy look by using a white background, so the content boxes blend into the rest of the site. This style also works well with responsive design, which uses stylesheets to create a website that is automatically optimized for whatever screen-size or orientation it is viewed at. The trend towards ubiquitous computing means sites have to be able to easily "jump" from desktop to laptop to tablet to smartphone with minimal sacrifices to functionality.

I think for the next couple of posts I might actually pick one site for each, and go over what I like about it. In the mean time, if you're just getting started with web design (or even if you're an old pro,) I highly recommend taking a look at Hongkiat, which has great design and technical tips, as well as tutorials and guides for all aspects of web design and development.