Archive for Website Development

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!

inside-U-prep-screen-shot

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? ;^)

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.

 

Shutterfly Team Websites

Shutterfly has done a really thoughtful, thorough job with sports team websites. They went far beyond the basics of schedules, photos, and rosters to include advanced features such as email reminders, player availability, calendar subscription, parent vcards, and snack signup. Sites are free, but of course one is encouraged to purchase prints of uploaded photos. Shutterfly does allow one to download photos. I’m not sure whether this is at full resolution, but I just downloaded one at 1600px wide, so at least it’s decent.

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.

Visual Website Design

Our admission, website, and communication teams have worked together to reorganize the admission section of the school’s website. Not only did we want to simplify and clarify navigation, but we also wanted to present information in visual ways.

Our website is very text-heavy, much of it written eight years ago and only edited since then. In much of the site, we present all of the important content as text and then add some photos for aesthetic or emotional effect. In today’s media-rich culture, people have a lot of practice consuming information visually. We can actually communicate content, not just feelings, through photographic badges. This also forces us to distill the “landing page” message to three key ideas.

In recent years, affordability has become increasingly important to families. Our website statistics show a rise in page views in the tuition, financial aid, and scholarship pages. We respond by both providing easy access to the information people are seeking and by promoting the response that we wish to convey.

Before


After

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.

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.

Drupal 6.17 and session cookies

I have had no problems with Drupal core updates for years. I finally got burned when I installed Drupal 6.17. This update no longer removes “www.” from admin-set cookie domains, which was preventing admins from using different cookie domains for www.example.com and example.com websites. The change broke login for many of our users until I solved the problem.

How did this seemingly esoteric issue affect us? In addition to www.catlin.edu, we also run live development and test copies of our website, so that we may build new features and try changes without affecting users. Some time ago, we manually set $cookie_domain in settings.php so that sites could have separate cookies, allowing a developer to log into the different sites as different users. However, users had saved cookies that used the old method, which introduced a cookie mismatch when they visited www.catlin.edu and had a saved cookie for catlin.edu. I still don’t understand why the browser didn’t just save a new cookie when they logged in instead of silently failing.

Clearing cookies resolved the problem for individual users, but I needed a solution that would work for off-campus users with saved cookies. Ultimately, I followed the release announcement and set $cookie_domain to “.catlin.edu” so that it would work whether the user’s saved cookie was for www.catlin.edu or .catlin.edu. It also means that developers are automatically logged into our development and test sites, but we can always use a separate browser when needed.

The site log showed no errors, but one could see a series of “new session for user …” entries when a user was having problems logging in. The normal behavior is that the user successfully opens a new session then either ends the session soon thereafter or leaves it open.