Archive for Design

Early Drupal strategies

I am leading an internal team to move the public-facing web site of our PS-12 independent school to Drupal. In this post, I share accomplishments and decisions made so far in an attempt to spread any knowledge that is useful to other institutions and gain your feedback. I consider myself an intermediate Drupal user, so some of the following may seem trivial to advanced users, whereas beginners may find it helpful as they get started. A test site is available for you to view. I have included module and content type lists at the end if you would like to jump directly to them. Many thanks in advance for any advice or feedback you may provide!

Page and News content types

We recently made the decision to give news more prominent billing than we do in our current site. We realized that news is more important than calendar information, for instance. At the same time, we will still require the ability to post descriptive content about school programs that doesn’t change all too often. First-time visitors to our school will still require this, and they are a very important audience. How could we provide for both within Drupal’s structure?

We want to have as many school departments and divisions manage their own site content. Therefore, adding pages to the Book hierarchy or adding News items to one or more sections needs to be as easy as possible. In Drupal 6, Book nodes can be of any content type. This will serve us later, though for the time being I am only adding Page nodes to Books. I did modify the Page content type to allow comments and add fields for multimedia content. I configured Book to automatically create menu items, as we don’t want to trouble our site editors around campus with navigating Drupal’s menu administration pages, which will get quite long in a large site.

landing page

I have included News content by embedding a manual PHP-driven database query in each top-level landing page. Users will click on a primary nav link and find a page with the category outline in the left-hand menu and the news for that section in the body of the page. News can be posted to multiple site sections (taxonomy terms), whereas Pages can only be posted to one place in the book hierarchy. Our web site editor was very pleased to see how easily we could move pages around the hierarchy, even from one book to another.

Will we want to post a single page to multiple books? I am not sure that this is desirable, since users may benefit from a predictable hierarchy (where is that page? what section am I in?). However, we may also find a way to configure this in Drupal, or we could write a script to pull content from the desired node when in a specific page. The ability to insert any node into a book is going to be a great boon if we need to create a custom content type with code to pull content from other nodes.

Book Access has been troublesome so far. I at first assumed that we would want to grant editing privileges at the book level, to those people who need to able to edit that book. However, not only has book access not worked as advertised, but I have also come to the realization that more open access may in fact better serve our purposes. We know and trust our web site editors, and time is precious. Why shouldn’t all users blessed as editors of our books be able to edit any of them? Some institutions have even wikified their entire site. We can mitigate (unlikely) problems by turning on revisions and setting actions to notify the web site editor when changes are made to the books. Presto.

Classroom and team pages

Organic Groups seems the obvious choice for classroom and team pages. Small communities build up around classrooms and teams at our school. Parents want to know news and upcoming dates, teachers and coaches want to contribute content, there are scores and reports to publish, and we want to expose most of this to the public for people to see our school in action.

Organic groups allows us to mark some content as public and some as private, maintain descriptive and news items, invite others into the group, and allow users to maintain short lists of their favorite groups in the site. I will want to further investigate how to set multiple moderators for a single group, suppress other groups from the audience list, and make subscription management easier.

Organic groups could also permit other affinity groups to spring up within the school around issues, initiatives, or interests. Again, it helps enormously that community features are core to the Drupal ecosystem. These features are well developed, well-documented, and widely used, making it easier for us to make our next web site more capable of community strengthening functions.

Media

On our current site, the home page feature image is randomly selected from a set of photos. Each photo has as caption. I am experimenting with enhancing this feature by: 1) using a Flash-based slideshow to cycle through images on the home page; 2) linking each image to related pages within the site, so that it also serves as a navigational element. The test site currently uses MonoSlideshow, but Slideshow Pro also has a standalone version that pulls image information from a XML file and a Drupal module. I would like to take this one step further by writing an extension to automatically updated the XML file based on the contents of a particular image gallery.

Outside of the home page, I am using the Image module, including galleries. I have not yet seen the need to go to ImageCache and appreciate the simplicity of automatic creation of gallery pages. If Image Gallery Access works as advertised, then I will be able to distinguish albums to which ordinary, authenticated users can post from those that are reserved for web site editors. FUpload appears to provide batch uploading that should work nicely for site editors, parents, and students (should I worry about Flash version compatibility?). Missing at the moment is the ability for an authenticated user to create a new image gallery, which would be great if someone is posting sports photos and wants to create a new sub-gallery for each game. If we decide to limit the number of photos posted on this server, then prolific photographers may be better off using Flickr, anyhow.

Embedded Media Field appears to work great, except that I can’t figure out a way to wrap body text around the embedded item. This may be fine for relatively unprivileged, authenticated users but probably not sufficient for web site editors.

I have recently switched from TinyMCE to FCKEditor and am loving it so far. Everything seems to present and work better with FCKEditor, especially embedded images. Do you know of a way to limit file browsing capability to user directories for some roles? I wouldn’t want any user to have access to the primary embedded image store for the site. I would also like buttons and filters to elegantly embed files, uploaded media, and third-party media all within the WYSIWYG interface. I wonder how difficult it would be to write those extensions and make them available to some roles and not others.

Roles

Drupal, as community software, offers the exciting opportunity to invite many different constituencies in our community within the site and provide features such as comments, blogs, directories of people, and photo upload privileges specifically to them. I have created the following roles so far:

anonymous user
authenticated user
administrator
alumnus/a
applicant for admission
faculty/staff member
job applicant
parent
student
web site editor

User Profiles

I haven’t begun to explore this yet. In some cases, the user profile is a critical function. For example, we want alumni to edit their information through the site: contact details, schools attended, place of employment, interest in the career network, etc. Faculty members will have short biographical passages to help describe themselves. This means that some roles will use different profile fields from others — I need to learn how to make that happen, and whether to use nodes for user profiles in these cases. On a related note, real names will need to be visible throughout the site — I have used Authorship for this before and will need to evaluate it and investigate alternatives once more. Authorship does not have a Drupal 6 version at this time.

Commenting

Opening commenting is a really exciting opportunity. We currently do not have this feature in our current site, yet we know that our users have a lot to say, and we want to draw them more tightly into the school community. At the same time, independent schools try to maintain a decent level of control over publicly-available content. Drupal’s commenting system seems perfect for this — allow all authenticated users to see and post comments, allow all web site editors to administer comments, and do not use a moderation queue at all. Done.

One downside I can see at this time is that a blog author may in the future want the ability to moderate their own comments. I’m not sure whether this would require a lot of hoop-jumping-through in Drupal, as compared to a blogging platform such as WordPress.

Calendaring

I have done a little investigation here, not very much. I have set up Calendar and CCK Date. I am finding setting up calendar Views to be bit involved. We will make extensive use of list views of calendar items by taxonomy terms in blocks throughout the site.

The custom content type for Athletics events looks great — opponent (node reference), bus departure and return times, result, score, notes will serve their function well. One glaring omission for Drupal 6 is Time. The last I read, developers are testing a Drupal 6 version. We will need this CCK field in order to have additional times for the day of the event (such as bus departure and return times).

We have yet to decide whether Drupal’s calendar could meet all of our internal, public calendaring and resource reservation needs, or whether we should install a proper calendar server.

Migrating Custom Functionality

We have built over the years a lot of custom PHP and Perl scripts that we plan to migrate into Drupal over time. Many of these will wait until year two or three of the project. They function fine now, and we have to first roll out the core functionality of the site.

Applicants for admission can complete an inquiry form, sign up to visit the campus, and download admission forms online. All of these functions pull data from our Blackbaud database in order to function. We could migrate these (rather large) scripts into Drupal, gaining additional benefits: applicants for admission would become authenticated users and be able to read and post comments, gaining greater visibility into the site.

Our current volunteer signup and management system keeps track of multiple events, caps signups for specific time slots in order to automatically distribute volunteers to where they are needed, and produces summary lists for volunteer coordinators. If Signup can do all this, then we will move this feature to Drupal in a flash.

Job applicants can, using another site, view and apply for jobs at the school. This seems like a prime candidate to move to Drupal, which has better designed file submission features than our current system. It will be key to leverage Drupal to provide good workflow management functions for the human resources office — the ability to flag applicants for certain categories, add notes to applicant files, invite supervisors to review applicants online, and send mass emails to those declined for the position.

Social network sites

Connecting with constituents through social network sites is a hot issue right now for independent schools.We want to meet our constituents where they are, in addition to drawing them into our site. At the same time, we want to leverage existing content and processes as much as possible while making this happen. I am happy to find out about Ping.fm, which should allow us to automatically generate Twitter, Facebook, and other status updates from specific News items that we post to our site. With no additional effort, we will broadcast our news items to our users’ communities and cultivate follower lists around the web.


Content types

Here is a list of content types in our test site so far.

Athletic event
Blog entry
Calendar event
Classroom (node for organic groups)
Image
News item
Opponent
Page (modified to serve as the main content type for descriptive pages)
Team (node for organic groups)

Modules

(so far)

autosave
book_access
calendar
cck
date
devel
emfield
fckeditor
filefield
image
image_fupload
jquery_media
ldap_integration
lightbox2
messaging
notifications
og
print
scheduler
simplemenu
slideshow
token
views

Moving forward with Drupal

drupal icon

We have made the decision to proceed with Drupal to build Catlin Gabel’s next public-facing web site! That means that you get to stop hearing me refer to it as our “potential” next web site platform. In the end, the decision came about through several factors:

Any open source system will allow us to shape the site to suit our needs better than a closed system. I demonstrated, through a test site, that a relatively simple Drupal install could meet the most critical needs that we identified for the web site. There’s nothing like a hands-on test to convince a critical friend.

Taking other stakeholders on a tour of the Drupal site was helpful. People may have an impression that open-source software is less professional or reliable than commercial software. A quick tour of the Drupal forums, modules lists, and handbooks conveys the incredible scope and activity of the Drupal community.

Prior experience with Drupal played an important role. You could successfully argue that we created a self-fulfilling prophecy by using Drupal for so many other purposes and tests. Each experiment has increased our Drupal expertise, to the point that the considerable knowledge we have built played a role in the platform decision.

Prior PHP/mySQL development also contributed to the choice. Before we tried Drupal, even before I joined the school, we had developed a number of useful PHP scripts that expose data from our student information system for teachers, students, and parents to use. It will be easier to convert these scripts into Drupal modules than into, say, Python.

Next steps: hire a graphic designed and a Drupal consultant. I will post more details about these opportunities soon, but feel free to drop me a line earlier if you are very keen on them.

Onward we fly!

Wikify Our Web Site?

What if we applied wiki concepts to our public-facing web site? Could we harness power of the commons to build a better present ourselves to our core audiences? Considering that most of these audiences are people already in our school community, this idea could have potential.

There exist many intermediate steps between controlling all of the content ourselves and opening it up completely to the entire world.

  • Encourage faculty and staff members to manage site content (as we currently do).
  • Include parent and student contributions (as we currently do on our internal web site).

  • Allow any community member to edit a site page, but review the submission before publishing it.
  • Allow any community member to edit a site page and immediately publish it.
  • Allow any member of the public to edit site content.

Could we take a step or two toward a community-generated school web site?

Update 1/9/2008: Dearborn Public Schools (Michigan) has done it.

A Whole New Mind

I recently read A Whole New Mind (Pink), which explains the importance of right-brained thinking to success in the new economy. Two of the principles Pink explores rang particularly true for me: Design and Creativity.

Design

Pink helped me understand the rising importance of good design in the marketplace. In a world of plenty, consumers are increasingly choosing products with better design, and mainstream stores offer well-designed products at affordable prices.

This change in the marketplace may help explain some changes at our school. Over the past few years, our students have expressed a clear preference for Apple laptops over Lenovo. We used to purchase twice as many ThinkPads s iBooks. Now, the ratio is 5:1 in favor of Apple. Could a preference for good design in part explain this shift?

Students are rapidly adopting smart phones, starting with the iPhone but also including Blackberry, Sidekick and other popular devices. In part, the falling cost of the devices combined with the need of kids to stay in touch with each other may explain the trend. However, good design is critical to the students’ mobile experience, since they use the devices so intensively. The ability to merge entertainment and communication into one device is also a strong draw. We see almost no Windows Mobile-based phones, especially when compared with a corporate environment.

Students and teachers have expressed pretty high standards for the immediate usability of our IT services. “Intuitive” is a popular expectation. If a tool we roll out is not very usable, such as Outlook Web Access or our parent email lists, people tend to seek an alternative, such as GMail or Yahoo! Groups. Our IT staff has to devote more time to planning and design of the community’s tech resources. When we have the time, higher expectations compel us to produce better services. When our plates are already full, it causes workload anxiety.

Creativity

Pink builds a case that creativity will be essential to success in the modern economy. Catlin Gabel prides itself on teaching creativity and has launched initiatives to improve our work in this area. The school launched a capital campaign to raise funds for three initiatives, including the construction of a new creative arts center.

We have seen rapid change in the arts curriculum in recent years. Digital photography, film, and animation classes take full advantage of the ability of students to rapidly create, review, and experiment with their work in digital form. Film students self-publish on YouTube, and independent study kids are preparing submit Flickr slideshows of portfolio work as part of their college applications. Even extremely physical classes such as ceramics and woodshop capture digital images of work for recordkeeping and communication.

We recently held an event to celebrate the school’s rich history of excellent science instruction. Three guests delivered speeches via prerecorded online video. All underscored the importance of asking good questions and creative thinking to their professional successes.

Penetration

To what extent have these concepts of design and creativity penetrated the minds of the teachers and parents in our community, critical stakeholders whose support is essential to effect change? I feel lucky to work at an institution with a critical mass of tech-aware professionals, yet every institution I know is partway along the process of transformation.

I repeatedly face the same challenge: how to act as an effective change agent so that teachers and parents in particular will come to understand new media: its importance, how it works, and what it means to schools. I make progress but also seek better ways to communicate the message, structure learning experiences for others, and increase reach.

Web Site Design Portfolio

This portfolio shows major sites I have designed and built for organizations.

Catlin Gabel School (2009-present)
The school’s main, public-facing website provides a complete content management system, multimedia publishing tools, user accounts for students, staff, parents, and alumni, and ties into the school’s student information system. A layer of the site is login-protected, so that community members may publish articles, photos, and videos to the school community.

Catlin Gabel website

Tools: Drupal and Blackbaud, including custom PHP development.

www.catlin.edu

insideCatlin (2006-present)
This intranet web portal provides operational tools for the members of Catlin Gabel School. Teachers provide students with course materials and interactive discussion areas, departments publish commonly-used forms, and individuals schoolwide exchange information such as community service hours and textbook orders. The portal is organized by commonly-desired content and transactions, rather than by tool.

insideCatlin

Tools used: Moodle, Drupal, Blackbaud database access, and custom Perl and PHP scripts.

inside.catlin.edu

Shasta Mountain Guides (2005 – present)
The guiding company uses this site to publish trip information, collect reservations, solicit customer questions, and sell merchandise. Customers may browse through trip descriptions, photos, and testimonials and then book a reservation online, including payment. The co-owners maintain the Backcountry Blog and photo galleries on the site. A live weather feed and equipment lists help hikers plan their trips.

Shasta Mountain Guides

Tools: Drupal, osCommerce, custom Perl scripts, custom graphic design

www.shastaguides.com

San Diego Hat Co (2001 – present)
This web site allows the company to quickly publish an online catalog of hundreds of items to wholesale customers twice each year. Within the login-protected site, customers browse or search for hat styles, zoom in to view close-up detail, and see available colors for each style. The site also includes static pages for company information and an online store for retail customers.

San Diego Hat Co

Tools: Web Site Baker, osCommerce, custom Perl scripts.

www.sandiegohat.com

Maru-a-Pula School (2006 – present)
The school upgraded its web presence with a content management system and custom graphic design (Elavacion, Inc.). I moved the hosting service to the U.S., to improve upon the reliability of Botswana-based hosting services.

Tools used: Drupal

www.maruapula.org

San Francisco University High School (2002 – 2006)
This site provided for all of the public-facing web site needs of this school community: a description of the school program, faculty and staff contact directory, admission inquiry toolkit, alumni profile and notes tools, and Arts department mini-site.

San Francisco University High School

Tools: Dreamweaver, custom Perl scripts.

insideUHS (2002-2006)
This intranet school portal provided the community with communication and information tools: course web sites, athletics schedules, community service project database, independent study project database, community announcements, schoolwide events calendar, student photo directories, online file access, and student discussion forums.

Tools: Moodle, YaBB, phpBB, FileMan, Blackbaud database access, custom Perl scripts.

insideUHS

site snapshot at The Internet Archive (original site no longer available)

Gateway High School (1999-2002)
The graphic design of this site communicates the school’s unique position as a public charter school in San Francisco. Learning Center and People receive high visibility, and student work is featured on the home page.

Gateway High School

Tools: Dreamweaver

www.gwhs.org at the Internet Archive

Audience-centric web site design

Our web site team is attempting to keep our audiences’ needs and perspectives at the forefront throughout our web site redesign process. It’s not easy! We naturally think about the school in terms of our relationship to it, and we have the inside perspective. This often results in ideas for organizing the web experience that mirror too closely the organization’s internal structure.

Although our audience list includes internal constituents, we must remember to pay special attention to the external ones. We started the process by building lists of audiences that we need to reach via the web site. Prospective and current families, students, alumni, and employees topped the list. Next, we used a protocol developed at OneNorthwest to identify the values and needs of this audience as well as what the school wants them to learn/do from their web site experience.

Next, we developed specific “user stories.” We each made up two mythical users and described what they wanted from the site, how they used it, what else we wanted them to learn, and whether they had a successful experience. This exercise was terrific, as it harnessed the creativity of all of the members of our group (techies and non-techies alike) to come up with possible perspectives on using the web site that we had not previously recorded.

Staying focused on audience was pretty easy until we actually got specific with content. Two weeks ago, we started to translate our audience work into actual web site information architecture. How should we organize the content and services on the site to meet the audience needs we identified? Our work immediately returned to a more traditional form, as we started pumping out content outlines that mirrored our organizational structure or replicated existing aspects of the site.

Do you design web sites? How do you retain your focus on the target audiences when you begin to organize content and design user interactions?

Web Site Design and Management

Panelists

Jeff Huggin, Snoqualmie District: Dreamweaver, ASP, Access, IIS

Mike Stewart, Mt. Angel School District: Win 2k3, Dreamweaver

Austin James, Redmond District (OR): hosted solution (SchoolWires)

Jeff Dobbs, Beaverton: wrote a custom content management system (Oracle)

Mike Finstrom, Highline District (WA): custom CMS the supports Dreamweaver and Contribute

How did you go about determining what systems you would use?

Found experienced developer at the ESD.

Developed culture of people who embraced content management system. Now looking at Sharepoint for next iteration. Allows for both novice and advanced users.

Mandate from superintendent that every teacher would have a web page, and look and feel would be consistent. Moved to a hosted solution. Teachers focus on posting content rather than what color it would be. Hosted solution was equal in cost to licenses for Frontpage.

Ease of use a huge barrier to buy-in: from Frontpage to MS Word to emailing items to tech department. Currently a voluntary system who send content to tech director via email.

Cost considerations, Puget Sound ESD developers built different modules for administrative functions.

How many staff members in your department are dedicated to web?

Communications person is the key, tech staff devote small fractions to site. ESD helps with back-end tweaks.

One small fraction.

Office staff already typing this content for newsletters. Just have to copy and paste into web interface. Does switching and routing for district, does not devote much time to web site. Does CSS, HTML, graphic development (1-2 days per month).

Web content staff member. Who owns the web site? IT department or others? Distribute stake in the web site. They are going to have to enforce policy, IT trains and supports.

3 of 5 district communications staff devoted to web site. Each district has a web manager. HR posts jobs, contract changes. One SQL developer. Goal of 1000 contributors. Moodle didn’t extend. Randy Orwin has hacked it to extent.

How many teachers are maintaining sites?

Web-publishing through FirstClass — a lot of teachers were initially turned off by it. A number of teachers have gone out on their own. Working with ESDs to facilitate blogs, wikis, and web pages. Union prevents requiring teachers to create web pages. Receives blog requests daily. Biggest issue is support. Planning to use Drupal for teachers. (Beaverton)

Will have 100% by next year, per superintendent. Top goal is communication/contact information.

25% on teacher web sites daily. One teacher records lessons every day and posts them on web site.

Made it fun and easy, focused on content.

Biggest challenges

Support and training is very taxing on district resources. Space is a huge consideration, as all content teachers use now go into the database.

Training.

Administration wants more professional-looking web site with zero budget.

Other issues

Posting links to off-site content (okay with panelists)

Pictures of students online: centralized permissions to one form, to allow blanket ability to show many pictures on web site. Want to centralize permission for student academic work next.

Take your public-facing school web site to 2.0 with Drupal

Today, we discussed the potential for Drupal to serve as the back-end of a public-facing school web site. Only a few examples exist out there, yet Drupal continues to gain acceptance as an extremely capable system that is ready for prime-time. Twelve of us shared frustrations with commercial school web site companies who were difficult to work with or insufficiently responsive with new features. To my pleasure, I found that many of my colleagues at this meeting were thinking along the same lines. We know how to evaluate and adopt commercial software. How does one evaluate and adopt open-source software?

We have created a series of tests to determine the potential of Drupal to serve as the platform for the next version of Catlin Gabel’s public-facing web site. Drupal continues to pass each one. This month, I had two successful meetings with Kitty, our web site content editor, and James, the creator of the current web site and thoughtful strategist on school web site design and implementation. I have found to my pleasure that this group working together is far wiser than I could ever be on my own. Now, we are working together to move this project forward.

We held two meetings in the last month to consider next steps for the public-facing web site and think about the strengths and weaknesses of Drupal to meet these needs. We need to move to a new web site platform in order to meet demand for features such as electronic newsletters and podcasts and to better manage the burgeoning volume of content that we would like to display on the site. The Drupal founders, from the early on, appear to have understood the exponentially increasing nature of information. All content units (nodes) are functionally equivalent, flowing through the site like water as the site administrator sets up guides to expose them in particular ways. You classify — not compartmentalize — content, which enables people to find items much more easily.

I am also trying out a conceptual model to seek buy-in from critical stakeholders for this project. One may summarize the model as follows.

Tinker: Over the past year, I have built five CMS sites for different purposes, giving me a taste of content management platforms and eventually Drupal in particular. 1 | 2 | 3 | 4 | 5

Research: I have gone looking through Drupal modules and documentation looking for solutions to functionality I will need to replicate on the new site.

Solicit Expert: We plan to invite a Drupal consultant to give us feedback on the proposed plan and potentially serve as an “on-call” expert when we need help with the tricker components. We trust in our ability to find a Drupal consultant willing to do this, considering that we contract for time & materials for other pieces of our infrastructure, and open-source consultants may be friendlier than most to being collaborators on a site rather than building the whole thing.

Buy-In: I have built a Drupal clone of some parts of our current web site. Many people judge a web site first by its looks, and this helps take the graphic design out of the consideration of the back-end platform. It helps gain valuable feedback on the viability of the new platform. It also includes the most frequent contributors in the process at an early point.

two web sites
Which one is the Drupal site?

Design: Assuming that the site passes the other tests, we will then undertake the design in earnest. We will need to spend much time thinking about how best to replicate current site functionality in Drupal. Trying to keep project scope within manageable limits, we will defer considerations of changing the site architecture or graphic design to next year. This will require a much broader consultation within the school community.

Develop: actual configuration of Drupal and additional programming if needed.

Train: Properly prepare site editors for the new editing interface and assist regular users with any aspects that may work differently than before.

Launch: Off with the old, on with the new! I’m unsure whether this will require much external publicity, since we are not changing the look and feel at this time. Internally, we will want to make the transition to the new editing platform as easy as possible especially for those users who only post occasionally.

Your thoughts on this plan?