So, remember back to May 19 of this year when I began talking about creating templates in Dreamweaver, and again on July 21, when I blogged part two of that series? And also remember how I drone on about technology always changing?

Well…. Throw those two blogs out the window and digest this: I am no longer using Dreamweaver to make our webpages. Our library has moved to Drupal for content-based webpages. And in doing so, I needed to learn it quick. Now, granted, I was given a great deal of leeway as to when to implement this for our pages. I could wait a year. But I had my own agenda. Not only did I need to move Digital Collection pages over, but also Special Collection pages. And I set my timeline to be the end of 2015. Well…why not?

Let me take this blog space to begin talking about Drupal, and my first impressions.

First, the benefit for the library is that more departments are allowed to contribute their own content, instead of having someone from IT doing it, thereby causing a delay in getting the information up to researchers. Because Digital Collections and Special Collections has been creating their own pages for several years now, we were made the testing team to see if we could get this done, and how long it would take. (We meaning: me. I have all but taken over maintaining the Special Collection pages. Brad Kuennen has taken on more responsibilities, leaving most of the fun work to me. Yea ME!)

But back to self-authoring. This is a good thing for a large portion of library departments. Allowing each department to design and implement their pages grants those departments to update their information on the fly and this pretty awesome too.

Plus, to have “templates” in place helps to maintain the overall layout theme of the university. In having a consistent design, every page of the university appears more uniform. Then there is the concept of responsive design. I myself have had issues with this very thing in the past. This is where Drupal comes in and does the heavy lifting. Once you’ve created a page, it automatically makes it responsive. In other words, whether displayed on desktop or mobile device, or tablet, the page will be displayed in the best possible manner. The image(s) will shrink down to the appropriate size and what is called a hamburger will appear (typically in the upper left or right hand corner of the page,) for the drop-down menu.

Home_hbgr

(This is what a “hamburger” looks like on a sized-down, (read: mobile) responsive page. It squishes a menu down into the three horizontal line icon; when you tap on it, it drops the menu down; again, it usually appears on mobile-designed pages.)

So, what does that mean for designing pages going forward then? Well, a lot of things. First of all, because our library has a great library-external, but on-campus, support from the ITUIS department, I don’t have to worry about consistency across web browsers as I had to in the past. The ITUIS department has worked those issues out with Drupal already. We don’t have to re-invent the wheel here; they follow ISU template guidelines and work from there. Thankfully, because Digital Collections and Special Collections are on a separate server, this allows us to maintain our sites separately, which in turn gives us even greater control over the design and layout of our pages. But what does that really mean? There are differences; let’s take a look.

Here’s our old page on desktop, created in Dreamweaver:

Home_old2

And here’s the new, created in Drupal:

Home_new

The first obvious difference is the spacing in the vertical menu on the left. Drupal doesn’t allow close spacing (at least on the theme that ISU maintains.) The slider image is wider, but height is narrower; and the dark boxes are no longer as clearly separated (no white line between them.) These images are both pretty similar on tablets; the only difference being that for Drupal, the menu runs a little longer down the side, and the boxes on bottom are clearly separated:

Home_tab_ls

BUT, take a look at the portrait view layout on a tablet.

Old Home (Dreamweaver) on mobile and tablet, portrait view:

Home_mobile_old

(In portrait, you just get a piece of the image, as it is a fixed layout. This is a desktop view of mobile device. An actually mobile device would cut off the top of the second box; but the layout is identical.)

New Home (Drupal) on tablet, portrait view:

Home_tab_port

(A lot better separation here, plus no cut-off of images.

And New Home (Drupal) on mobile:

Home_mobile

The point is Drupal makes designing responsive pages pretty easy. The most intensive part was copy and pasting the pages over from Dreamweaver, and constantly contacting the ITUIS department to get the styles displaying correctly. I’m glad I started with the smaller Digital Collection site however, because when we attempted to make the new pages go live, everything was defaulting to a wrong URL link. First, we thought we were going to need to manually re-mapped all the pages to the new pages, so that old URLs would bounce to the new page URL. Now, ITUIS has stepped in and indicated they will be able to solve this issue using another tool. We will have to monitor this unfolding drama and we will have to think it through for the larger Special Collection pages.

Advertisements