Tag Archive for drupal

Improving Inside U Prep

One difference between being a tech director and academic dean is the much smaller amount of time that I have available for tech tasks. I don’t replace MacBook hard drives anymore, but I do still run at least one school website, Inside U Prep. This summer, I had the chance to have some fun and make a number of long-desired improvements to the website. Many of these simply bring it up to the standard I wished for when I first launched the site.

In the tradition of other internal school websites, Inside U Prep meets a couple of important school needs. Inside sites provide direct access to resources that students and faculty and staff members frequently use. While the main school website prioritizes outward-facing content, intranet websites give top billing to items of internal interest. Internal school websites are less bound by the the design constraints of a public audience, since they have less need to project specific aesthetics. Its audience comes to campus every day!


The improvements include changes to visual appearance, user interface, and custom module functionality. Let’s get started:

Responsive theme

mobileThe prior theme (Bartik) did not change appearance on mobile devices, a liability in the current, mobile era. Fortunately, someone modified Bartik to make it responsive and then posted it as a community theme (Responsive Bartik D7).

Child theme
Short on time, I originally configured Bartik with a custom logo and manually added a couple of graphic elements. These changes were overwritten each time that I installed an update to the theme. This time, I created a child theme of Responsive Bartik. This allowed me to make the prior customizations permanent and then make precise improvements to layout and appearance. The new sans-serif look is cleaner and better spaced.

Simplify menus

The two menus now appear in one column and have moved from the primary menu and right sidebar regions of the page to the more commonly used left sidebar. Usage stats indicate that the custom modules and outward links are used more frequently than the internal resources, another reason to enhance their visibility.

Views instead of custom code

Screen Shot 2015-08-15 at 9.53.22 PMSince site launch, the resources content type has accepted link URLs, uploaded files, and HTML content. The home page displays whatever content has been provided, with a priority order. Previously, I coded this custom, but this time I created a view block for each cell, with the help of Views Conditional so that it would be more standard for me or someone else to modify this configuration in the future.

ITIP module

Screen Shot 2015-08-15 at 9.51.07 PMOne of six custom modules I have authored to provide dynamic data collection and reporting services for specific school programs. ITIP is our faculty professional development and evaluation program. The system now shows multiple years and can accept multiple submissions per item. It will soon request and share an informal project title from each faculty member and then share these to all faculty members, to promote awareness and sharing.

Course resources module

A.k.a. “textbook list.” This module collects course textbook, ebook, app, and website subscription information from teachers in the spring and shares it with families in the fall. This year, the system will show a customized course resources list for each student, instead of requiring families to wade through the complete list to identify the items to purchase for their student.

Community service module

This module makes the submission of community service hours completely electronic. The prior version was pretty bare bones, just performing the basic functions of storing student hours, sending mail messages to supervisors for verification, and producing a dashboard and reports of student progress toward the service requirement. New features include: better structured data entry and storage, normalized organizations table to reduce duplication, faster approval interface for the service coordinator, and dashboard access for advisors. With this done, we will be able to share back to students the 300+ service organizations that they have entered into this database in the past two years. Time permitting, I am very excited to try Addressfield Autocomplete, which may be able to perform a live Google Maps lookup of organization address information. This would be both really slick as well as more convenient and accurate for the service coordinator. Again, the Drupal community has been actively improving the sophistication and usability of contributed modules while I have been gone!

Screen Shot 2015-08-15 at 9.54.15 PMTwitter feeds

Live feeds from three school Twitter accounts of interest to internal audiences.

Finally configured pathauto

Human-friendly URLs.

Maxlength module

Maxlength limits user input into textarea fields, previously a weakness of this site. Users would enter unexpectedly long content into certain fields (usually adding explanations), and database insert statements would break.

Screen Shot 2015-08-15 at 9.55.19 PMDate picker module

Drupal finally created an easy way to attach popup calendar selectors to date fields. We use date selectors all the time, for example to record student community service. Date picker

I look forward to seeing how these improvements play this year and so appreciate having a few days this summer to make a brief return to my web development days.

Periodic Table of Drupal Modules

Bringing together two of my favorite topics, chemistry and Drupal, Amazee Labs has produced this collection of modules in periodic table format. As cool as the graphic looks, commenters have pointed out that the table only reflects the shape of the periodic table of the elements, not its underlying order. Modules are sorted by popularity, and modules in a column do not necessarily have anything in common. For example, if Google Analytics is a noble gas, does that mean that it doesn’t play well with others? ;^)

Mobile Theme

Catlin Gabel has launched a mobile theme for its website. If you visit the site on your mobile phone, you should automatically see the mobile interface and have an opportunity to add an icon to your home screen. Please let me know if you run into bugs or usability issues on the mobile site!

Mobile theme or responsive theme?

The mobile theme technique has been around for a couple of years. The site autodetects the mobile device and loads a completely different theme for the site. More recently, developers have adopted responsive theming, where page elements adjust to the smaller screen size, for example by reflowing items or scaling down images.

A mobile theme made more sense for Catlin Gabel than a responsive theme. We were quoted a project cost three times larger to create the responsive theme, because this would have involved reworking the desktop theme. Creating a simpler, separate theme for mobile devices had a more reasonable price. Our current desktop theme is nearly three years old, so the school will likely redesign the entire site theme within a couple of years, so this mobile theme is temporary.

Getting around

We designed a new navigation system for the mobile theme, due to space constraints and the different priorities of mobile users. Site analytics revealed that users visited the calendar, athletics, and directory pages more often on phones than other devices, so we made these more prominent. At the same time, users visit the rest of the site in a similar pattern to desktop users. A single jump menu takes advantage of the scrolling select interface popular on phone operating systems, while providing access first to the most popular pages in the site and then all of the major site pages in alphabetical order.

Unlike most mobile themes, our interface allows one to get to just about any page on the site without having to switch to the desktop view. The mobile site is fully featured. Still, the ubiquitous “desktop view” link at the bottom allows for times when user prefers the desktop view.

While the mobile site has some issues, it achieves the immediate need of improving the mobile user experience while keeping the cost reasonable.

Website Design Process

A colleague recently asked me to document the process we undertook to redesign the Catlin Gabel website. Here is a summary.

Accept need to redesign

In our case, the school wanted to add features to a website that a parent volunteer had very capably created and managed for a number of years. The technology director and communications director acknowledged that the school’s needs had exceeded its website model at the time.

Identify project leader

I proposed leading the project myself, because I had both school leadership and website development experience. It helps to have a single leader to bear responsibility for keeping the project moving, and to serve as a single point of contact for external vendors.

Convene task force

Including a team that is committed to working together for the benefit of the whole is more important than representing all possible stakeholders. Ours included representatives from admission, communications, alumni, academics, technology, and parents, though not always the directors of these departments. Many people held two of these roles, some three. We held three intensive meetings, and then I kept the group apprised of progress and consulted with them to make additional decisions as needed.

Identify priority audiences

Many schools try to have its website serve all potential visitors. We were lucky to have a parent volunteer with media experience who advised us to carefully narrow our priority audiences to three or fewer. We selected families, employees, and alumni, though we did cheat a little: families included both current and prospective, as did employees. We left out students, the press, and the general public. If we did a good job with the priority audiences, then these secondary audiences would still have a good experience on the site.

Work from audiences -> values -> roles -> needs -> features

Some schools move to site features too quickly. The website committee completed “audience and roles” worksheets in small groups to better understand community needs that might indicate specific website features.

What values do these priority audiences hold most dearly (both about Catlin Gabel and about education in general)? What roles do our priority audiences play within the school? What needs do they have that the website might fulfill? Finally, what site features are necessary in order to meet these needs?

Rigorously following these steps kept the site design process focused on humans’ needs and ultimately more satisfying for the user.

We also consulted the school’s admin team to find out which features of the current site worked well and which did not. This helped us identify site features that we should definitely retain, and others that we should definitely discard. For example, the home page slideshow was identified as a much-liked feature because it included recent snapshots from the life of the school, instead of highly posed photos that many school websites feature.

Preview the changes for the school community

We made presentations to faculty, the board, parents, and students to build excitement, relieve concerns, and invite contributions into the process.

Hire a great graphic designer

The site look and feel is one of the three pillars of any website (the other two being site architecture and development platform). We solicited proposals from a number of designers. The committee was most attuned to the examples of other websites that designers had created. We were again fortunate that our parent volunteer referred us to his favorite designer.

The result was an extension of our human-centered design approach to the graphic design, as well as a unique design that does not look like any other website and truly embodies important values of Catlin Gabel. The design represented both progress and tradition, interrelatedness and independence, and the woodsy aesthetic of the Pacific Northwest.

Finalize the design plan

This included one section for each of the three pillars of website design: wireframe sketches for the look and feel, a visual map of primary and secondary sections for the site architecture, and lists of pros and cons for different website development platforms. Discussion and revision of the design document allowed the team to refine, change direction, and iterate through design document revisions while the site was still pliable.

The group accepted my recommendation of using Drupal for the development platform. It took a long time to build the support necessary for this choice, which seemed new and ambitious to people who had not worked with open-source software before. Several factors contributed to the ultimate decision to support Drupal.

  • We interviewed school website development companies, but their presentations left committee members feeling underwhelmed.
  • I built a clone of the current website in Drupal to demonstrate that a Drupal site would be sufficiently capable and could look like anything (the graphic design layer is mostly independent). I ran some auxiliary website functions, such as a podcast platform, on the clone site for a few months one year.
  • The parent volunteer on the website committee felt that nonprofit organizations should consider open-source their first option. “Why wouldn’t a school use open-source software?” Even though Plone was his favorite platform, he supported the choice of Drupal.

Develop the site

In our case, I became the lead developer. Other schools might hire an external lead developer or contract with a school website company to deploy a website based on the company’s platform. Making this my special project for the year in addition to my regular job, I built the site part-time over a period of about six months, from January – June. The needs assessment and design phases had taken place in the fall of that year.

Working with open-source software, I had the ability to experiment with pieces of functionality and make decisions about what modules to use for what purposes. I also built a few site prototypes, the last of which proved strong enough to continue to develop into the production version of the site.

At the same time, graphic design work proceeded through selection of favorite elements from the prototype designs, development of a first draft final design, and then refinement and revisions.

Drupal has many community-contributed modules that overlap in functionality, and the Drupal community has posted articles comparing different approaches to calendaring, signup, and image galleries, among others. I also hired a local Drupal consultant to recommend ways to provide common types of functionality in the site. It was easy for him to say “SimpleNews” when I said “newsletter.”

I hired a summer worker to help migrate some of larger bodies of content (e.g., dozens of photo galleries) from the old site to the new. In some cases, he wrote small Drupal modules to load and reform the old content into new, and at other times, he migrated content manually.

The new site was built on a new server with a unique website address, so that I could invite many people to look at the site in process and send comments. The site launched in July, by simply repointing DNS for the main website address to the new site. The old site lived on using a new website address, so that we could search for content missing from the new site if needed. We eventually took down the old site but kept the database running longer for the purpose of content recovery.


We held a small party to recognize the milestone and express appreciation for the contributions of the members of the website committee and the designers and developers involved.

Introduce the site to the community

Similar to the presentations of the previous spring, I made many presentations and held workshops to orient people to the new website and train those who would maintain its content.

Continue developing

The open-source model that we adopted facilitates continued development especially well. We considered the launched website just the beginning of an ongoing development process, not a final product. The school’s needs don’t stay fixed over time, and neither should the website’s feature set. The first fall with the new site involved a fair bit of additional development work to fine-tune certain features of the site in response to user feedback, fix bugs, and add functionality not completed in time for the initial launch. By winter, nearly everything in the final design document was built. I carefully managed an extensive to-do list of wished-for features and desired usability improvements and gradually worked to complete them.

In subsequent years, I have dedicated only a small fraction of my total job to new website development. We added social media integration, a complete admission application system, mobile theme, and also slightly changed the direction of certain features, for example changing the “all school” section into “co-curricular.” Summer has proven a good time to do substantial new code development and Drupal configuration work.

Anticipate the next version

When will we have to repeat the design process and re-launch or significantly upgrade the site? We know that the shelf life of a school website is approximately four years, and we are currently in year three. Drupal 6 won’t be supported forever, and Drupal 7 and Drupal 8 are calling. We believe that the website still meets people’s needs, but this is increasingly coming under pressure as mobile users want easier access to site content and tools, the site design has begun to feel a little old, and we see other websites with more modern features that enhance usability.

My departure from the school may also accelerate consideration of a new website. I mitigated this to a degree by training over 60 people to be content editors and two colleagues to become develop portions of the site. Many people here know a lot about the site. That said, the departure of the principal developer leaves a vacuum, and the school will take much of next year to determine whether to continue with the Drupal strategy indefinitely or to begin to work toward a new website solution.


From FUpload to SWFUpload

Community contributed extensions are a double-edged sword in the free, open-source software world. On the one hand, the user community creates and maintains hundreds of modules for a web application that is free to download and install. A for-profit company could never create such an expansive set of plugins on their own. On the other hand, volunteer commitment to a module can wane over time.

An upgrade to PHP version 5.3 broke our Drupal 6 Image FUpload plug-in. Apparently, this problem was discovered two years ago and has not yet been entirely fixed. Not coincidentally, the Image FUpload project is seeking a new maintainer.

Fortunately, the SWFUpload project is in better shape, so we switched to it this weekend. Project usage statistics confirm that at least a thousand other site managers have made the same decision.

Both modules rely on the same SWFUpload Google project, so they operate in similar fashion. SWFUpload seems simpler and behaves more consistently than Image FUpload. Previously uploaded photo gallery images are stored and presented by ImageField and FileField, so past photo galleries do not depend on the choice of uploader.

What batch image uploader will be available for Drupal 7? Neither Image FUpload nor SWFUpload has a Drupal 7 version in development. FileField is now integrated into Drupal 7 core, so perhaps a partial rewrite is required for one of these modules to advance to D7.

Many thanks to Drupal community developers for your work. This project would not be possible without you. If you are interested in automatically creating Drupal users based on LDAP accounts, check out my contribution to the LDAPsync module.

Mobile Theme: WordPress vs. Drupal

How to enable a mobile them in WordPress

Install WPTouch. Congratulations, you are done! You automatically get a cleanly designed theme with dynamic drop-downs, a comment counter per post, and “mobile theme” toggle at the bottom.

How to enable a mobile theme in Drupal

Research various approaches. I decided go with the mobile theme option.

Select the most stable, current modules to support your approach, in my case Mobile Tools and Browscap.

Select a mobile theme. I have tested a number: A Cloudy Day, Adaptive Theme Mobile, Fusion Mobile, iUi, iWebKit, Mobile jQuery (not to be confused with jQuery Mobile), and Nokia Mobile.

Realize that these themes are pretty bare out of the box, and you have a lot of custom theming in your future!

A Cloudy Day

Fusion Mobile

Mobile jQuery

What is the problem?

I understand that it is easier to develop a mobile theme plug-in for WordPress, because content is managed in just one way. You have pages and posts, and a mobile theme just needs to organize them. Our Drupal site has many custom content types, views, blocks, and regions, and no mobile theme is going to automatically display them correctly out of the box. However, I had expected the theme designs themselves to be more mature than this.

I also find it totally unclear how to modify regions and block visibility in our Drupal site for the mobile theme. In our single-theme Drupal site, the theme template controls when and where certain regions exist, and the block system determines when to display block content within page regions. I want to organize the home page completely differently for the mobile theme, but now I have to learn how to define page regions and block visibility separately for the mobile theme. I will try to create a home page template in my new theme with unique regions and block content, but something tells me that this will not be easy. Or I could install modules to make display configuration more dynamic, but I do not want to add performance overhead for our non-mobile users.

Dear Drupal Themers

If you would like to submit a modest proposal for mobile theme development, please write me at kassissiehr (at) catlin.edu.

3,700,000 Session Records

Hey, Drupal fans! I would like to alert you to an issue that I encountered today. While doing some unrelated database work, I found that our sessions table had grown to over 3,700,000 records. While not posing any immediate danger to the website, this may have been slowing down backup and just isn’t tidy. Drupal relies on PHP garbage collection to cleanup session tables, but apparently this does not happen properly on Debian systems. Solutions include setting PHP defaults to encourage garbage collection and installing the Session Expire module. The problem is fixed in Drupal 7 through php.ini overrides.

I chose to install Session Expire on our Drupal 6 site, feeling that Drupal should clean up its own garbage. It also has the advantage of providing a choice between deleting anonymous sessions, authenticated user sessions, or both. The module is extremely simple and could be implemented on a Drupal 7 site if one would prefer to delete old sessions that way. The module took an hour to delete 3.7m records on a test copy of our site. You might prefer to just truncate the table instead, though this will log off people currently using the site.

Spot the Application Deadline

I’d like to think that our new online application system helped encourage families to apply for admission. Y-axis numbers removed intentionally.

Taleo Recruitment System

Let it not be said that I always choose the do-it-yourself solution! Our new Taleo recruitment (job application) system has been terrific so far, feature-rich, easy to use, well-integrated with our website, and one-third of the cost of our previous recruiting website. Their system permits a HTML wrapper, which we populate with our own site template code to make it look like the rest of the site.

To facilitate integration, we use Drupal’s built-in aggregator module to display currently open positions on the top-level employment web page and include them within search.

Teachers Building Classroom Web Pages

Catlin Gabel Lower School teachers are building up their classroom web pages. Since the teachers have different proficiency levels, we require a common baseline for web page content and then offer choices for what else to include. The following “menu” serves as a guide to plan web page improvements. Teachers select the content they would like to include and then use the website tools, with tech support present to assist.

Download classroom website ideas (.docx format)