Tag Archive for drupal

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.

Celebrate

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)

One Year Old

The Catlin Gabel website recently turned one! After a gestation period of six months, the website launched on July 1, 2009.

The Drupal-based website held up well last year. Dedicated hardware helped ensure that performance would remain high. The site received high ratings for usability. We improved the site throughout the year in response to user feedback and continue to develop it now.

Drupal 6 itself matured over the course of the year. Code and SQL errors resolved themselves as the community released patches and we installed the updated versions.

The year validated our decision to integrate password-protected, community content throughout the site. When logged in, users access protected content and tools based on their group membership. Users get to these tools in their expected locations on the site, rather than having to enter a separate community portal.

This year, we plan to build a complete online admission application, improve the design of section landing pages, and make a lot of small features more usable.