Book Groups Dashboard

I’ve been discussing with my colleague how automation can improve her productivity. While I went through what we’d need to do to make something happen, I paused and realized that what they needed was a dashboard to manage everything they need to track. Since I had some time set aside for them already, I kicked the planned project down the road to give them extra time to work on it. Then I settled into hacking together a quick book groups dashboard.

Courtesy of Darien Library

The Process
I began by looking up free dashboard templates. After examining a few dozen, I decided that DashGum was the one for my needs (view demo). The main files I edited were the index.html, panels.html, and style.css. My colleagues told me what websites they accessed the most often. For their needs, these are book review websites. I use Sublime as my text editor. The main color scheme of bright green and blue are based upon the colors they like to represent themselves with.

The Layout
My first consideration is that I wanted to personalize this dashboard for each member of the team. So I added their photo, name, and their work area title. The top row in the example are the things this coworker needs to access the most. They are simple links. Each link opens in a new tab so they can keep their dashboard up in one tab (better for their use if not my recommendation). Below that are the book review sites they use the most. This design is not ideal because it’s eating up a lot of space, but it works for now. On the right is for my benefit: a way to keep them on target with submitting publicity items to me. In the sidebar are some less often used links which may be useful for their day to day work. The icons are just what Font Awesome icons the theme comes packaged with. I quickly selected those particular icons.

Personalization
The two dashboards I made are almost identical. However, one colleague is comfortable with using MailChimp while the other is not. So I removed links which open up MailChimp.

Weaknesses
Since this was a quick, hacked together project, it is not perfect. At the moment, the two pages are living on our shared network drive. This allows me to update the pages from afar, but I’m managing two separated index.html files since they’re custom to the needs of each person.

My colleagues also share a Google account between them which they are both logged into in Chrome. So on one person’s computer, I could set the home button to her dashboard. With one account, I could not set the home button to the other to her own dashboard. So I gritted my teeth and made it as a bookmark. She’s happy enough with it right now. Perhaps Chrome profiles could alleviate this issue?

Reception

I just used my new dashboard to look up a book I hadn’t heard about-it is fabulous!!! Thank you so much. So easy getting in and out of! So far I am fully enjoying all of its charms!

What’s Next
The layout is not responsive. I work on large monitors, but when I tested on a smaller monitor, the text in the review sites word-wrapped in an ugly way.

They do all their work in an Outlook calendar. It’d be great to provide a link to opening Outlook to that specific place in the software since they have to make several clicks to view it. My current understanding is that I can’t link to their calendar. I tested the waters to see if I could migrate them out of it, but one of them has a strong preference for the software.

It is too bad that Asana does not offer a way to embed task lists elsewhere (by design). Then instead of my manually updated Publicity Deadlines, I could just include my work list there so they could see where I am in working through this month’s book group work.

Review of Evanced Summer Reading Software

Provided by Evanced!

Property of Darien Library

This year we choose to do something a little different for our summer reading website. Last year’s website was a single page with me adding custom icons that reacted to being hovered over. Kiera, the head of the Children’s Library, decided that she wanted to go “all online” this year. She wanted to have children to be automatically entered in the drawing whenever they read X amount of minutes. She then discovered that we could use the Evanced Summer Reader software since we are a Connecticut library (check to see if your state library offers any goodies to your library).

Kiera and I attended one in-person training session to learn the product. It was promoted as being easy to customize. Within moments I realized that I would have to do some major overrides in the CSS to get what we wanted out of the system. My first attempts were shaky as the backend is broken down into dozens of CSS stylesheets. It’s somewhat difficult to figure out where you need to make a change to keep it consistent! So I wrote in to Evanced and they gave me some pointers. After that I was able to make changes on my own. I did discover a last minute weird behavior where I could not position the Registration button above the dynamic text. This surprised me to say the least!

You can see in the screenshot above what the initial site looked like and the comparison to our live site. Since the design for this year came in a bit later that I anticipated, the site is not fully customized as to how I’d like.

Details:

  • The spies/logo was designed by a freelancer that we hired.
  • The bright starburst background was originally in the logo, but I edited it out and placed it as the background of the website instead.
  • Using more spy language like “Gumshoe” and “Agent Name” was an inspired last minute change on my end.
  • The strange placement of items on the page is two fold:
    1. The system does not recognize between a logged in vs. a logged out user.
    2. Browser differences.

Overall, I’m pleased with our website. I’m all hyped up with an idea for next year’s theme. Check back then to see if it happens!

Redesigned Services Page

First, the old page:
I'm a View!

The new version (still has some kinks):
I'm a page!

While I was hoping to have a lot more input on this page from staff, I ended up doing 90% of the work myself. That meant creating new pages for each of those links, making up descriptions, and worrying over the language. Some pages have barely any content on them (see WiFi), but the information did not fit in nicely elsewhere. Some of the stuff off the old page still needs to be moved to a new home (mostly in the About section). There is also an issue with that Javascript chat box causing the page to jerk when it first loads.

However, I feel like this is much clearer than the previous design. I am also striving for the three click rule:

  1. Services
  2. Topic
  3. Very specific (not used in most cases)

CSS3 Transition in Chrome and IE

The last image is rotated -15 degrees

The last image is rotated -15 degrees


I am using CSS3 transitions to do rotations. My observations:

  1. PNG and SVG images look sharp in Chrome. However, when they move, they go jagged. To fix this tendency in Chrome, you need to make a SVG file which is exactly the size you will display it on the page. Then in the CSS, you declare the size as well (I used just the width property). This exact size specification will make the SVG appear smoothly in IE 9.
  2. Any version of IE before 9 will either a) not display your SVG at all or b) show a red x box.
  3. The unpleasing way of doing things is to then make a JPG image which you can have animated in compatible browsers but will not move in non-modern browsers.

Resources

Work in Progress: Moving Locally

So my cheap webhost is not cutting it for my side project. So I’m now moving it to my local machine since it is 99% for my own usage. The directions on this page for XAMPP are dead simple to follow. You have to do a little mental tweaking since they are a bit outdated, but you’ll quickly see the holes.

Next up, I copied the modules and files (for me, just photos) over to the new location. The images were located in sites/default.