Four Layouts of Summer Reading

Our library uses the incredible art of Lisa Nowlain for our children’s summer reading program. It made it significantly easier to develop the web pages which support our four programs (pre-readers, kids, teens, and adults). This week I found out that even when we print out the trees at the size of children, they still look fresh.

Courtesy of Darien Library

Landing Page
To start my work, I sketched out a bunch of layouts for the children’s page. The head wasn’t there when I dropped by the Children’s Library, but her staff choose the design. The layout is almost identical to the Darien Olympics theme of last summer. I then selected my favorite for the landing page for all four programs. It took awhile as I had to create a large PSD file and duplicate the trees across it. The original wooden sign has tiny legs. I duplicated and extended them a little to complete my desired look. The buttons below are not what I wanted. However, the little wooden signs which fill up the brochure don’t work for the web. I have no idea why. So I used the plain ol’ generic default Bootstrap button for our website. I could have chosen another color, but the blue was the best default option.

Courtesy of Darien Library

Kids Page
Likewise, on the kids’ page, I cut off the legs on the sign to make it shorter. The PDFs are massive. I tried to squish them, but it became illegible. Maybe the watercolor background contributed to that? The location of the images is a little funny in order to make it usable on mobile. The tall tree and the kids collapsible below the information. Trying to get the blocks all to the same length was frustrating.

Courtesy of Darien Library

Teens
The background image for the teens page is from another artist (I’m unsure if he wants the attention). I struggled mightily with how to handle all the information on the teen page. The photos are all public domain. The struggle on this page are those movie covers. I ended up giving up on this yesterday. There are actually two more movies. The layout is a row with three columns. Each column has a row with three columns. When I blew the code out so I could look for the problem, it didn’t make sense. There should be enough room in it for up to 12 covers. But when I add in the extra ones, the images disappear and the date wraps to the second line. After 90 minutes, I finally gave up on it at the urging of my coworker. I’m displeased with that, but every tactic I tried failed. I don’t want to have rows with five or six images in it because then the covers are too dominating for the page.

Courtesy of Darien Library

Adults
I worked closely with colleague Virginia in developing the Adult Summer Reading page. She rejected my original header image and sent me three new ones to choose from. I selected the beach chairs. The challenge here was to keep her from the burden of creating a booklist for every single item on the Book Bingo Inspiration list. I managed to find some stuff on the website that would work. Then tasked her with developing 5 or 6 new ones just for this purpose. Her funniest chat was “What steampunk novel would you recommend?” for the new genre list.

The Book Readers Festival is another iteration of reusing Lisa’s artwork in new ways. I needed to make a flyer in a hurry so it could be posted around town. I opened up Canva looking for inspiration. I spotted it right away. Then I adjusted it for the design you see. It now exists as that image + flyer + poster which hangs over the front desk.

Marketing
I’m copying the URL of the pages into a Google URL builder, setting up the tags, and then copying that link into Bitly. I look forward to seeing what the numbers look like at the end of August.

Image Finding

Not centered

Today one fundraiser ended so I was free to change out the header images on our website and social media accounts. This turned out be a tough challenge for our website. My general topic was “flowers, spring.” I hunted around my favorite public domain image sites. Over the course of an hour, I checked nine images. The final one made it up though it’s not exactly what I wanted. Conditions for the frontpage image:

* Wide enough
* Not too dark
* No white background (text is white)
* Not too busy
* Image can’t be centered since the search box and text is there
* Bottom right center has to be dark for the text
* If focused on a single object, it can’t be centered

Since I decided to do a last ditch promotion of the Big Library Read, I tried to find a nice pie image. There were some good ones to choose from, but they didn’t fit the conditions above.

A Better Way to Serve Book Groups

Last Friday I was interviewing a colleague about the library’s website when she mentioned a point of confusion for patrons. Our book group titles show up in the same record as non-book group books. That is, when a patron looks at our website, they see that we have 10 copies of the hottest title and may hurry in to snag it. They’ll check the shelves only to discover it isn’t here. The front desk staff then explain what a book group title is within the catalog.

That got me to thinking. Previously I had made a form for book groups to request their books online. Before that, they had to email directly or call in. The trouble though is that the form does not show up on the same page as book group books in the catalog. So a form submitter already has to have the title in mind when they go to a separate page to make their request. I didn’t find that to be the best process, but I couldn’t get the catalog updated to put a form in on the page (or a link to the form) from the catalog records. Back then, the book group books were not merged with all the other physical books of a specific title like they are now.

Now onto my idea: why don’t we pull the book group titles out of the catalog completely? If we do that though, how do we make them available? A Drupal webform. I could make a new content type for this specific case. Then add custom fields like: genre, type (e.g. short story, poetry), links to review sites, the book cover upload field, and a summary alongside the webform. On the backend, the webform would have a hidden field which takes the title of the node. When a group submits a request, our book group people would get an email which has the relevant information they need in an easy format for them to read.

But how does the group get to the individual book record? I’m glad you asked. There would be a grid layout of book covers for all the book group titles. At the top, you could filter by genre or type, or search for a book. There would probably be additional fields to filter/search by, but those were my starting point. I took this idea to book groups that loved it. I told them that it’d be best if we could recruit a few other hands to help with getting the 300 books in the collection to the new format. However, we had to have final approval before whipping this new experience together.

My idea has been tabled for now. With a new website coming out next year, it would not make sense to invest time getting these 300 books into our current site. We may have to just redo the work on the new site if we run into any trouble with migrating the data. In the short term, I am disappointed. However, I understand the reasoning. Right now I’m still in the discovery phase of the new website (interviewing patrons next). This idea can wait. I look forward to sharing the reality of it next year.

The Finished Summer Reading Website

Property of Darien Library

Property of Darien Library

From the screenshot above, you probably can’t tell much about changes from the finished product to the previous one I wrote about. Oh, you’d be mistaken. Let me show you a little bit about what happened behind the curtain:

The site took around 25 hours to complete. This is despite the fact that I was working on top of a framework that I established three years ago. The issues are numerous such as there not really being a CMS to work with. Any style change I make on the front page will show up on the logged-in homepage. The logged-in version has additional content. This content climbs on top of the content that was already there. So you have to figure out a way to assign classes to the logged in vs. logged out versions of the same tables (yes, tables).

Tim Spalding was very kind to take a look at it and suggested a workaround. Then while looking for the place to change some text on a pop-up, I discovered a Javascript entry area. Hallelujah — I would not have been able to do this without this access. My spouse helped me put together some code which injected new classes into the logged in vs. logged out pages based upon the URL. THEN Firefox continued to be terrible, so I had to put in special targeted CSS just for Firefox. The site would look fantastic on every other browser except Firefox. This has been my experience for years with this browser.

The backend of the site is not divided into one master stylesheet but into many stylesheets per page. Yes, page level. So if I set the background to be X, Y, and Z on the homepage, I had to visit every other page and set up that new background code. It made the process very long and drawn-out.

Property of Darien Library

Property of Darien Library


My favorite part
My coworker sent me the image from the front of their summer reading brochure. I took it apart in Photoshop and added shadows, removed the spotlights, and created a semi-repeating pattern to use as the background. When I added that to the site, I realized I wasn’t happy with it. So I then pulled apart the curtain into multiple layers (with the courtesy of a transparent background and an eraser). I then ran drop shadows over the new individual rows. I then ‘shopped them back together.

What I didn’t incorporate
My colleague’s original design included spotlights. I wanted to add spotlights which would sway gently or slowly warm up. Something cool with CSS3. However, by the time I got to the end of getting it structurally working, I was done. So done.

Summer Reading 2015 Website: WIP

Courtesy of Darien Library

Courtesy of Darien Library

The above is a work in progress. This is our third year of using Evanced’s Summer Reading software. What I’ve done so far is clone last year’s site and then made adjustments for this one. You can view last year’s theme below. I was in the process of starting to dismantle its interior when I remembered to take the screenshot. So forgive the out of alignment aspects.

Courtesy of Darien Library

The text here should say Gamer instead of Star — Courtesy of Darien Library

Regarding this year’s theater design, I wanted to have a curtain that could be lifted with a click of a button. Alas, it was not meant to be. I could probably have done it if I had full control over the site. Unfortunately, it’s table-based and all I can do is some CSS manipulation. Below is what I believe is this year’s default theme.

Untitled

I’m having trouble with our design because it’s breaking in Firefox. I’ve tested it in multiple other browsers (including IE) and it looks on fleek. Firefox has been my nemesis for years in this regards. However, I am using Firefox’s 3D model of the divs to help me pinpoint the different parts of the page are on the site. I’ve completely swapped the original two columns so it can get confusing. Also there isn’t a master stylesheet but approximately 50 tiny ones.

Hopefully by this time tomorrow I’ll be able to share the completely redesigned site!

Setting Up a Staff Blog

I was given the task to set up an internal staff blog. I choose WordPress, of course. The constraints:

  • easy to use
  • easy to update
  • easy to navigate

Plugins:
Advanced Comment Form: to remove unnecessary fields like website address
Subscribe to Comments Reloaded: so commenters get notifications when someone replies
USP Pro: Creates front-end post submissions without an account. This was something I choose since people complain when they have to create and remember even more accounts. So I eliminated that. They’ll just have to put their email address in every time. We went with pro since we wanted to be able to upload various file formats. There may have been a free solution, but it wasn’t worth me spending even more time researching a new plugin and then configuring it to work with the setup.

Organization:
Use categories to organize the site + tags.
Created a video to show people how to use the site.
Use custom menu for “Write Post” link option.

Design:
Twenty Fifteen theme
Very minor tweaks to correct the appearance of lists

My additional requirements that I put on myself:

  • easy to comment
  • get notifications on your posts
  • get notifications on new comments to posts you replied to
  • email all staff when a new post is submitted

I am in the process of fixing two bugs:

Our all-staff email address is limited to only forwarding emails from our own domain address to stop outside spam. My colleague and I are working on a solution to this. It’ll probably deal with emails being sent to me and an Outlook rule that will auto forward that email to all staff from my inbox.

The person who wrote a post gets two comment notification emails whenever someone replies to what they wrote. Still trying to track that down…!

An annoying WordPress bug is that it’s not sending me native notifications of new post submissions, thus why I had to look into an outside plugin.

Snazzy New Web Page Coming Up

Friday
I finished prepping the website for the long holiday weekend. Most of the day though was spent on writing up documentation for the Digital Media Lab on digitizing VHS to DVD. Then I updated the library’s main eBooks web page. It’s plain but I’ll keep working on it!

Wednesday
First day back after Christmas! There was some chaos in the Digital Media Lab which has left me on edge. The supervisor of the area is going to be looking into it. Hopefully in a couple weeks we’ll have things settled and on-track regarding the room. The big thing for the day was working my two hour slot for eReaders are in the House. I had two patrons whom I spent an hour with each. They were non-residents so they cannot check out eBooks from us, but I could teach them about their eReaders. The rewarding part was seeing their confidence grow.

Thursday
I worked on the forthcoming 21 Things for 21st Century Parents website today. Last year I put the website together very quickly. This year I am making each individual icon/badge in Inkscape. I am going with a circular design which is really hot in web trends at the moment. When I have the site ready to share, I will!

The 2012 version of 21 Things.

The 2012 version of 21 Things.

Makers!

Image property of Darien Library for 21 Things