Official New Website Announcement

Courtesy of Darien Library

Courtesy of Darien Library

This is it! We’ve told the world about us and what we’re doing. Check out the frustratingly small preview image of our new catalog. My boss told me about book recommendations now being baked into the works level (that’s right — works level! Thanks, James for getting this together). He hadn’t finished uttering the words when I spun around in my chair and slammed my fingers to the keyboard to check it out. Then I ran about the building showing my coworkers. Our new catalog is magical.

Pro-tip: it’s very awkward to fangirl anyone to their face, but I really can’t contain my delight with the catalog. The new website is cool, but that catalog…!

The press release from Darien Library

Darien Library is pleased to announce the forthcoming launch of its new website on June 1, 2016. The new website is designed to be a user-centric portal to library events, services, and materials. The new website will launch with SOPAC3, Darien Library’s ground-breaking new catalog system.

The new website overlaps with the catalog and provides a feature-rich patron account experience that includes integrations with the website’s event calendar. Users will be able to register and RSVP for events and keep track of their library activities from their profile screen. The system now also seamlessly includes both physical and digital checkouts on the account page, giving users the information and tools necessary to manage all of their circulation activity. Users are given direct control over their checkout histories and will now have the ability to maintain a wish list of items from the catalog they may want in the future. Numerous other features have been introduced, such as integration with Darien Library’s eCommerce system, Envisionware, so that users can now check their account balance in addition to their fines and fees.

The new system introduces linked accounts. Linked accounts allow family members to link to other family members’ cards so that they can, for example, conveniently see what their children have checked out without having to log in separately. This is a feature that was designed and introduced as a result of direct patron feedback. We believe this will make the web experience for parents and caregivers much easier.

Darien Library has adopted a completely new paradigm when it comes to the new catalog interface. SOPAC3 abandons the bibliographic record level search and uses its own works level concordance at the discovery layer. From a user experience perspective, this is a game changer because it organizes all content types for a title into a single record. No longer will a user see one record for a book, another record for large type, a record for each ebook vendor, and yet another for audiobook. They will see one result with a simple, easy-to-use interface to select the format of their choice. E-Content from Overdrive and Bibliotheca (formerly 3M) can be checked out or placed on hold directly from the catalog with a single click. Work views feature a “look inside” option for previewing titles as well as embedded audio excerpts. Integrated book recommendations are powered by Zola Books’ “Bookish Recommends”.

The website has been designed to be clean and responsive so that it may be viewed on mobile devices. The new website has been in planning for several years and in active development since October 2015. Design decisions were influenced primarily by direct member feedback. The User Experience department at Darien Library wants the new site to feel natural, be a pleasure to use, and become a seamless companion to the library experience.

New Library Website: Staff Photos Finished

I wrote earlier about learning how to set up lighting for our staff photos. After about 30 hours of work in taking the photos, sending them to staff to select their best shot, retake some photos, process the photos, and finally upload them to our staging server. Here is the fruit of that work. You’ll be able to see it in full size very soon.

The stated objectives of this project was to take photos which share a common background to look more uniform on the site. I decided that people should be more or less in the same pose.

Courtesy of Darien Library

Courtesy of Darien Library

Lessons Learned
I set up the photo studio alone, so the lighting is best for my own skin tone. This didn’t always work so well on others. Some photos turned out orange. I’d drag the main light back and forth to try and lessen the effect. After I attached the laptop to the camera so my colleague could see the photos as they actually are, I was able to straighten this out a bit. However, I still had to do some color balancing to fix orange casts on some photos.

At my current age, I’m still wrinkle-free so the lighting fell smoothly across my cheek. For some colleagues, the lighting spilled across their face to highlight their smile lines in an unflattering fashion. Perhaps I shouldn’t confess to this mistake of mine, but it was a serious issue that had to be lessened in Photoshop afterwards. I have a strong belief in treating others’ photos the same way I’d want my own to be handled: if it’s unflattering, don’t post it.

The same pose does not work for all people. I had people lined up so their toes pointed in one direction, rotate their heads to another, and then move their eyes to the camera. This pose did not always show people to their full advantage. I won’t correct this now, but there are a few people whose photos I’ll retake post-launch in order to do better by them.

I was hoping for a tool that would make it easy to batch resize and crop the final photos for the web. No such thing exists it seems. So I took several crops of my boss’ photo and sent it to him to choose the one he liked best. Then I set up guidelines in Photoshop (top of head, chin, left edge of face) from that. When I pasted in a new person’s photo, I’d freehand resize it till it fit those dimensions. This worked in most cases, but the tilt of some people’s heads or their fluffier hair may have thrown this off-kilt. In those instances, I tried my best to accommodate and make the photo work for them.

Finally, I could not tell the final results of the photos until I saw them all together today. Then I reopened some files and made final adjustments: contrast, vibrance, color correction, curves, and levels in order to create a pleasing equilibrium across the photos. Some people’s photos look wonderful on their own, but when paired with others, they needed a little more oomph in some way.

New Library Website: Request a Study Room Form

I’ve received permission to blog about my work on our library’s new website. We kicked off this project on May 5, 2015. Later I’ll write more about what we’ve been up to till now. For tonight, let’s look at the Request a Study Room Form.

Features:

  • If you enter a card number which doesn’t start with 21517, you get directed to a Whoops! page.
  • If you are a ***** card holder, you can then make your reservation. You may not request any date in the past, further than 30 days out, today, or on any day the Library is scheduled to be closed through the end of 2018.
  • Shows the Library’s hours when you go to enter your time request.
First Screen

First Screen

The form is built using JotForm as introduced to me by Andromeda Yelton. The theme is customized by me to match our new website’s design aesthetic which is built on top of Bootstrap. JotForm allows me to create a highly customized theming, conditional logic, and filter submissions to the appropriate person. This particular form is only going to our reference department, so that is straight forward. I have additionally customized the submission form email so our logo is in the header. JotForm’s customer service is also top-notch. I was having trouble getting the conditional logic to work the way I wanted it to and their responses were fast.

If you're not a resident, you see this message.

If you’re not a resident, you see this message.

We’re pretty strict with who can reserve study rooms in advance. They’re a really hot commodity. The conditional logic here looks for the first few numbers of the card and if it doesn’t match our system, you get the above message. The wordsmithing is my own, but will likely be improved by the Head of Reference later.

The calendar limits what a user can do.

The calendar limits what a user can do.

If you get through the screening process, you now see the reservation form. Initially, I had wanted the form to be hidden based upon conditionals, but the “Whoops!” message showed up even before you got to the end of the line. So I broke this form into three sections: library card number, Whoops!, make a reservation request. This worked out beautifully. I then hid the back/next buttons so people couldn’t “escape.”

Anyways, the calendar here shows that you can’t reserve for today (CSS trick) nor can you book more than 30 days out per our rules. It’s a pretty sweet setup. The weakness here is that I can’t limit you from requesting a time when we’re closed. The workaround method is that when you get to the time, a little hover shows up with the Library’s hours.

Once the form is submitted, you are told that you’ll receive a response by tomorrow. On the staff side, you get the little submission form which shows all the in-take information. We then make the reservation using an Outlook calendar.

Story Bible Website Development Project: 2

Last week, I wrote about a project I’m working on for myself. Since then, I got answers back to some of my questions, so I eliminated the USP plugin. The $40 pro version would let me submit multiple posts from the same form, but it would not reload the form without completely reloading the full page. That’d be annoying for what I’m working on.

While doing my research, I got a tip about Caldera Form. It would give me these abilities:

  • Create a custom form with ease
  • Submit the new content as the content type (page, post, custom) that I wanted
  • Would reload the form without reloading the entire page
  • Accepts multiple submissions from the same form

I’m happily testing it out though I did find some limitations:

  • Has limited support for taxonomies and categories (which is important so the post goes to the right place)
  • Support is going to cost you 
  • When I hit submit, the success message comes back with some odd gibberish and the form’s fields still have the content in them. When I checked, I can see that the post did in fact publish

Now it’s back to submitting a ticket to their WordPress.org forum and hoping for a response. Other forms I considered but avoided are Ninja Forms and Gravity Forms.  I chose not to go down that road since it cost money.  Things I read while evaluating Caldera Forms: 

Final thing I started looking into last week: using Encyclopedia/Glossary/Wiki plugin instead of Knowledge Base CPT. I’m checking out this plugin since it will auto-link text in other pages/posts/custom which include a word in the lexicon to the lexicon page.

This is where I’m leaving off this week. I hope you find some value in learning this background knowledge of how I’m developing this WordPress site.

Story Bible Website Development Project

For my WordPress eCourse students, I’m giving them a bonus behind-the-scenes look at how I evaluate plugins and try to find solutions for a personal website project. Since I’ve already got the text written up, I thought I’d share what I’m posting for them.

Site Purpose: Story Bible to keep track of all the details for this narrative.

Requirements:

Link pages to each other like a Wiki and show those relationships
Be nice if it was easy to link pages to each other using Wiki markup
Add paragraph-level annotations
Easy to create new posts without going to the backend

Plugins Currently Installed: (Not all of these are being used at the moment. I may have them installed to test later)

Advanced Custom Fields
Aesop Story Engine — for more of a Medium/longform writing experience. I like the timeline navigation abilities
Chat for Aesop Story Engine — don’t like this much
Contact Form 7 — theme wanted this plugin
Contextual Related Posts
Contextual Related Posts Taxonomy Tools so the above plugin is restricted to showing related posts of the same category or tag
Digress.it — love the idea of this plugin, but it no longer works with the latest versions of WP. It adds paragraph-level annotations
Featured Image Widget — so I can get the image in the sidebar as you see in the screenshot. This particular theme doesn’t allow it, so I lazily used a plugin for this feature instead of coding it myself.
Knowledge Base CPT — this is part of the wiki setup
Olympus Shortcodes — makes it easier to add features/functions. Part of the requirements for the theme
Paragraph Commenting — not visually attractive, but gives me the paragraph-level annotations
User Submitted Posts — allows me to put “create a new post” from the sidebar which works for my purposes. I need more features, but those are in a premium version. I’ll need to make that decision before deciding to invest in that.
WP What Links Here — need for the Wiki like function I wanted to add. I don’t have much control over it out of the box. It doesn’t recognize/see annotations which link to a certain page. I’d like to add this feature.
Theme: Apollo — not free, but I got it as a freebie

Anyways, this site isn’t complete yet and I’ve done a lot of experimentation so far with dozens of different plugins, Google searches, posting on the WP forums, and reviewing plugins in my pursuit of this project.

Degas Poster

Courtesy of Darien Library

Courtesy of Darien Library

The work in the latest MoMA exhibit is beautiful and intimate. I enjoyed looking at it very much. However, not much of it is a showstopper to catch your eye. Fortunately, there was this piece. I consulted with our head of Adult Programming on what to do. We decided to make his name HUGE. The design of this one is very simple, but I like it. My colleague who printed it came back and said it looked like something you’d hang in your college dorm room.

Portrait Lighting AKA What Color is My Hair?

For the new website, my boss has assigned me to take everyone’s headshot. Sure, I’ve taken people’s photos before for various little things in the Library. The photos are okay for being taken in the Digital Media Lab with “good enough” lighting. However, my boss said that people will be welcome to take these new photos and use them for professional headshots. Uh oh. What am I doing.

I took some photos yesterday in our videographer’s studio using a “hey, this looks okay to my naked eye” approach with a colleague’s help. The digital camera lets you preview the photos, but not zoom in so we couldn’t tell what we were doing. Today I opened those photos and saw the problem right away: overexposed. I sat in my chair, having a slight panic attack. Photographing some resistant people is bad enough, but trying to figure out how to fix the lighting by yourself when you have zero experience in complex light setups is another thing entirely.

After I managed to stop panicking at my desk, I grabbed my phone and the SD card. I wished fervently for someone to help me in my endeavour as the model. Even went upstairs to the Children’s Library and made some lame duck excuse after chickening out of asking. Then I decided that the only way forward was to do this entirely on my own. First task was to figure out how to set the camera to take delayed shots. Four hours and 185 minuscule changes later, I found the best lighting setup.

Things I tested:

  • Body pose
  • Head pose
  • Lighting on hair
  • Shoulder angle
  • Glare removal on glasses
  • Portrait mode (softer)
  • No flash (automatic settings — winner)
  • High stool
  • Low stool (winner)
  • Backlighting
  • Fill lighting

My spouse has seen the full set of photos. He said that the first shots look like I’m “so done” with this project. The final ones show a smile as I zero in on the lighting. In reality, I wanted a neutral expression so I wouldn’t focus on my face in particular when reviewing the photos later. The final photos include half-hearted smiles as I wanted to check the shadows that would result from that change.

Overall, I’m thrilled with the final results. My elation is tempered by “does photographing the setup and marking the floor with tape mean I’ll be able to reproduce this setup in the future?” I found a giant sheet of paper and wrote a note pleading with people to not touch the space. Then I clipped it to a chair. I couldn’t remove the glare without messing up the key light, so I’ll have people take two shots of themselves with and without glasses to Photoshop the non-glared eyes into the frames. It’s a compromise.