Tag Archive for webdesign

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

You can see it in the stats

We recently listed some new job opportunities on our website. Check out the increase in traffic to the employment home page.

New Drupal School Developments

Last week, I noted some interesting developments involving Drupal and secondary schools.

New Schoolyard

NewSchoolyard launched at NAIS, promising inexpensive school Drupal sites built on a template. This fills a hole in the school website market between buying an expensive product, hiring an expensive developer, and doing it completely yourself. In addition, New Schoolyard offers products and services at different price points, allowing schools to decide how much of the work they want to take on themselves or hand over to this company.

If successful, New Schoolyard may open the door even wider for more schools to adopt open-source websites and learn how to modify them. I greatly anticipate the first sites they will create and the code that they promise to contribute to the Drupal community. I have found in my own work with Drupal that it is a challenge to create a customized site that others can then truly make their own. I wonder what strategies New Schoolyard will employ to make full ownership possible for their clients.

DrupalSchools

Around for a while but flying under the radar, DrupalSchools.net is readying for a relaunch. Go check out their list of Drupal sites, tips and tricks, and thoughts on the potential role of Drupal in changing how schools work. This site promises to serve the secondary school community and put the thoughtful use of technology before techie talk. Also check out my list of school “front door” Drupal sites that I started in 2007 and have added to a bit over time.

More interest in our work

The frequency of inquiries into our work at Catlin Gabel continues to increase. Some of these schools are tinkering with demo Drupal sites, others are launching a community intranet, and others are moving toward a new, public-facing website. More schools are discovering the benefits of working with a piece of open-source software before committing to it and sharing their knowledge and perspectives gained.

Maru-a-Pula Website To Drupal

Just two months ago, I wrote how I was still using Website Baker successfully for two sites. Well, it’s down to one now! I have migrated the Maru-a-Pula website from Website Baker to Drupal. Maru-a-Pula is an amazing school in Botswana that I have worked from the U.S. to assist since teaching there from 1994-96.

Nothing went wrong with Website Baker. The school had just outgrown the basic CMS for its needs. The principal had started to write a news column, and while Website Baker does support news, the Drupal module is much easier to use. We now have several new features the school or I had wanted: RSS feeds sitewide, a blog for any author, actual calendar functionality, and all sorts of future possibilities using modules from the Drupal community.

For the sake of a smooth user transition, I built a new Drupal theme (sub-theme of Zen) to copy almost exactly the old Website Baker theme. The two sites look nearly identical. I have to re-theme the Search form. I have done enough theme work in the last year that I felt very comfortable manipulating template and CSS files to create the desired look.

The site is designed so that local tech staff in Botswana may take over as much administration as they wish. The site has no custom module code whatsoever, and all dynamic content is presented through content types, views and blocks (e.g., main home page photo and three feature columns).

New site
new site

Old site
old site

Contributed Modules
Calendar
CCK
Date
FCKeditor
Filefield
Imagefield
Link
Menu breadcrumb
Pathauto
Simplemenu
Site map
Token
Views

New Catlin Gabel web site launched!

We launched the new Catlin Gabel web site yesterday morning! The first day went very smoothly. Thank you to those who sent feedback (especially the two with constructive comments). Most first reactions have been about graphic design and navigation. I’m sure that people will have more to say about functionality once they use the site to get things done.

We timed the launch for the very slowest week of summer, so that we could see how the site performs as the load increases up to the start of school. A handful of teachers and staff members are updating new sections of the site, such as Sustainable School and Global Education. Other parts of the site are missing content at present and will need to be populated before the start of school. I created an introductory video to call attention to some aspects of the site.

Far from being done with the site, I have a very long list of items to address, most notably continuing development work on our custom modules. Many remaining to-do items are to customize aspects of the Drupal interface that aren’t quite the right match for our needs. Nonetheless, it feels great to have cleared a major hurdle!

Some of the recent posts on this blog describe the site’s features and development process in greater detail.

new web site

Web Site Strategy

Here is a quick run-down of some key ideas underlining our new web site strategy.

Site goals

The site has two overarching goals:

Provide timely, useful information that school constituents are seeking.

Regularly transmit the key messages that drive our communication strategy.

Guiding Principles

Authenticity: our target audiences are sensitive to the authenticity of our message. We benefit by demonstrating transparency in our communications and providing a “window” into daily life in the school. Ruth Catlin envisioned the school as a “lab” that would share its teaching accomplishments broadly.

Timeliness: web site visitors expect site content to be up-to-date and useful in the present moment. Many visitors come to the site expecting to find information to help them meet a deadline, attend an event, or find out what just happened in the school community.

Engagement: community members once gained entrance to this community. The site should attempt to move individuals up the “engagement pyramid.” It should provide tools for users to provide information to the school, communicate with employees, and network with each other. Highly engaged members of the community contribute to the school’s success through attendance at school events, volunteerism, financial contributions, and spreading the good word.

Excellence: our school attempts to perform at a high level in all its pursuits. The site should itself demonstrate excellence in design and function and also communicate examples of excellence that take place within the school. Admittedly, this desire for excellence sometimes rubs up against our equally strong desire for authenticity.

Site objectives

Develop a graphic design and user interface that conveys the vibrancy and excellence of this institution and is also easy to navigate and use. Choose colors to pay tribute to the classic Catlin blue but make central use of the new, Crane-provided color palette.

Broadly publish photos of everyday life and special events at the school. Most schools only display carefully staged, professional photos on their home page. We deliberately publish shots of everyday life and special events in order to convey the vibrancy of school life, the authenticity of our communications, the informality of our school culture, and to provide motivation for repeat visits. We will also convert the random-select home page photo into a proper slideshow and retain the current grid view for photo galleries elsewhere in the site.

Limit the cash cost of the new site to less than $10,000.

Make athletics schedules and driving directions easy to access and subscribe to.

Make lunch menu information easy to access and subscribe to.

Make it possible for many people at the school to contribute content to the web site. “Content managers” will receive training and maintain the core pages on the site. Teachers will have the ability to post classroom news, which will be aggregated into division-level news pages. Teachers and students will also have individual blogs, in order to publish examples of their work should they choose to do so.

Launch our social network and media initiatives at the same time as the new school web site. Continue to develop our Facebook presence to share highlight news items, audio and video captured at school, and community-contributed content. Further develop and call attention to our LinkedIn presence, so that it takes over as our primary “career network” tool. invite parents and students to join the network (currently only alumni are involved). Launch new Twitter and YouTube channels in order to reach our constituents where they are, exert more influence over messaging about Catlin Gabel in those spaces, and create the opportunity for a viral media success.

Broaden the publication of News feeds to the entire site. News items will appear on the home page as they do at present, but they will also be archived permanently (unless deleted), allowing users to get a sense of the rhythm of school life over weeks and months. Newsflash items will automatically appear in other relevant sections of the site (e.g., alumni, arts). Each program, department, division, and classroom may have its own dedicated news feed, which will show both Newsflash and staff-contributed items. This will increase the timeliness of these content sections and “unbury” new content items. The web site manager will be able to select and promote smaller news feed items to the home page Newsflash if desired. Allow users to set up customized news subscriptions by RSS or email.

Provide forms to collect important data from constituents, increasing usability, accuracy, and efficiency. Users will be able to complete online forms to start the admission process, make an online gift, apply for a job, or update their contact information. The school benefits by making life easy for its constituents, receiving accurate data, and not having to collect it through more time-consuming processes.

Provide an opt-out alumni directory that alumni, employees, parents, and students may search. Provide employee and student photo directories to other employees and students only. Automatically generate directories and contact lists from our core school databases, eliminating the need for manual data entry of this information by school staff on the site.

Broaden the visibility of Caller articles on the site. Cross-list them in relevant sections through the site (e.g., a Caller article on sports also appears in the Athletics section of the site). Use Issuu.com to embed a Flash-based version of each Caller in the site, increasing readability of the articles, allowing the user to print an issue, and leveraging the school’s investment in graphic design and layout services for this publication.

Get All School News and division newsletters out of PDFs and into web page and email format. Retain the distinctive, individual character of division newsletters.

Provide a straightforward process for parents, alumni, admission applicants, and job applicants to create a login on the site that gets them access to relevant content and tools.

Enable the posting of comments by employees, students, and parents. Limit the viewing of comments to these same groups. Do not enable comment moderation queues but rather follow comment posts closely and intervene in exceptional cases.

Provide a clear navigation pathway for people new to Catlin Gabel to learn basic information about the school and receive key messages.

Improve site navigation for parents, who have provided feedback that the items of interest to them are scattered all over the site.

Provide “quick links,” so that many programs may have a ubiquitous link for them without cluttering up the primary site navigation.

Create a “schoolwide” or “all school” top-level section to draw attention to the many, growing schoolwide programs that mark the distinctive nature of the school (e.g., sustainable school, global ed, the arts).

Make it easy to post and sign up for volunteer opportunities. Make it possible for a user to see all available opportunities in one place.

Perpetuate the distinctive qualities of our four divisions by providing separate top-level sections and news feed categories.

Reduce the number of email list errors by providing central parentsxxxx@catlin.edu listserv addresses automatically synced to our school databases.

Getting close

I have had my head down working on our new school web site for the past few weeks, hence I have not written much here.

We presented new features to focus groups: three faculty, one parent-faculty association, and one board communications advisory group. We hired a local college intern to migrate content from the old site to the new. Two staff members are working on the photo directory, site copying and backup utilities, and an emergency contacts form. Our graphic designer sent us two graphic concepts, and our web site team met and sent back comments. We received the a second revision and are preparing to send back our comments on Monday.

We are gradually taking on real users as we build up the web site. Our athletics director has started entering competition dates for next year. The arts department recently met to build out their new “schoolwide” arts program section. This week, we plan to invite employees to update their emergency contact information through our new custom form. The week after, we will likely invite all parents to update their contact information and review their directory entries online.

Our publications director has been developing her Twitter “voice” and getting to know the Facebook Pages interface in preparation for that aspect of the site launch.

So far, we have committed about $5,000 of contracted work to the project. We plan to finish the project at less than $10,000 total.

Hopefully, I will find time after site launch in July to post more information about our project!

Seeking CMS Graphic Designer

Catlin Gabel seeks a graphic designer on a contract basis for a new version of the school’s web site, www.catlin.edu. This person will produce an original graphic design suitable for a content management system and consistent with the school’s existing style guide for print materials. The design will contribute to the vitality, accessibility, and usability of the new site. The project will be limited to graphic design and a small amount of interaction design — the information architecture is already in place. The school already possesses a considerable amount of photographic imagery for use in the site. The final deliverable may be either a layered Photoshop document or a complete Drupal theme, depending on the designer’s skills and experience.

To apply, please send:
- A letter describing your interest in this project
- A résumé of your graphic design experience and training
- A description of your web graphic design process
- The URL of a portfolio of your web site graphic design work
- References for prior web site design clients

We will select finalists and then request from each a project bid and interview (in-person or Skype).

Richard Kassissieh
Director of Information Technology
Catlin Gabel School
kassissiehr (at) catlin.edu

Seeking Drupal Consultant

Catlin Gabel seeks a Drupal expert on a consulting basis to advise and assist school technology staff with the development of a new version of our public-facing web site, www.catlin.edu. The consultant will explain Drupal best practices to the school’s development team, provide suggestions for techniques to solve specific problems, and directly assist with site configuration and programming as needed. Please visit ww3.catlin.edu for examples of the ideas we are currently exploring.

To apply, please send:
- A letter describing your interest in this project
- A résumé of your Drupal development experience and computer science education
- The URLs of sites that you have developed and/or a web-based portfolio
- References to prior Drupal site clients, especially in the nonprofit and education sectors

We will select finalists based on these materials and then request an in-person or Skype interview.

Richard Kassissieh
Director of Information Technology
Catlin Gabel School
kassissiehr (at) catlin.edu

Introduction To Drupal For Schools

I presented this talk today at the BAISNet meeting on open-source software hosted at Lick-Wilmerding School. Some of the links point to internal, password-protected resources. Contact me if you would like a tour.

In the early days of the web, schools designed and developed their own web sites. Then we purchased professional graphic design and content management systems. In recent years, full-service companies have sprung up to deliver schools a complete solution. This is one possible — but not the only — modern solution for a course web site. How did we move so far away from managing our own web sites? Is it possible to turn back?

With a little DIY spirit and open-source software, it is possible. Open-source content management systems have matured and arrived. They are now a viable choice for a professional, modern, effective school public-facing web site. In a time of cost consciousness, it is imperative for us to learn this field and build our own web sites once again.

We know how to evaluate and tell other people about commercial software. Read the company’s sales materials, ask other schools for references, review a live demo or an existing site, determine the terms of a contract, monitor the site as it is developed/delivered, contract with a trainer. After the site is launched, requests tweaks/new features as desired.

The open-source ecosystem is very different from the familiar landscape of commercial software. Open-source software does not have huge advertising budgets. You won’t see The Network or The Trusted Voice or taste tests.

The key to evaluating open-source software is to enter the community and try the software. Take Drupal as an example. You can search the forums for helpful community members, view everyone’s support issues, browse hundreds of community-contributed modules, read community-authored user and developer guides, read case studies by real users, join affinity groups, and build a test site to evaluate the suitability of the software for your purposes. Hire a Drupal developer or another if you like.

You may have concerns about running your public-facing web site on open-source software. That’s all right. Start with lower-stakes projects and get to know the software and the process well. Build up your own familiarity and comfort level through experience.

Drupal.org has over 350,000 registered users. Version 1.0 was released in 2001. The current version is 6.9.

Peer schools using Drupal include Burke’s, Seattle Academy, Billings, and Meridian. College Prep uses Plone. Notable, Amherst College runs its main, public-facing web site on Drupal.

Other options: Plone, Joomla, WordPress

Once you go through this process and become a convert, how do you convince others? It may help to guide your school colleagues through a "lite" version of the steps you experienced. At Catlin Gabel, we formed a committee of ten major stakeholders in the web site project (admission, development, human resources, technical staff). I added to this group a parent who also works for an organization that provides technology consulting services to environmental organizations. We redesign our web site about once every six years. Drew redesigns organization web sites as his daily work. One of the most compelling answers was, "What about all of the R&D that companies put into their products? Open source communities probably devote a hundred times’ R&D into their ‘products.’"

Social Features

I pushed Drupal at my school because of its emphasis on social features. The White House has a blog. The Vatican has a YouTube channel. 40-somethings are joining Facebook in droves. Now is the time to introduce social features to your public-facing web site. Drupal is built around social features. Blogs, RSS feeds, tags, media support, and a powerful content management system are all strengths in Drupal.

Education-specific Drupal distributions: Social Media Classroom, DrupalEd, FunnyMonkey Commons. Will we see a distribution specifically for a school’s public-facing web site? Shall we create it together?

At Catlin Gabel, I first launched a community intranet portal to facilitate anyone’s media publishing. This site is organized around media types. All users may post articles, audio files, movies, and calendar entries, maintain a blog, and build an electronic portfolio. We also host other community content here, such as a carpool map, school archive, and summer jobs bulletin board.

With this experience under our belts, we are now taking on our main, public-facing web site. We plan to fully integrate community features throughout the site, not just in a dedicated section. Our constituents seek to engage with the school through its web site. Middle and upper school students seek authentic representations of student experience at the school. Commenting on all News articles. Making comments visible to all registered users. Providing user accounts to faculty, staff, students, alumni, parents, applicants, board members, and friends of the school. Approved "site editors" will be able to edit all static pages (not restricted to own department). Every user will have a blog, and blog content will be aggregated by topic (tags or content searches). Existing newsletters will fold into the blog and news functions.

Specific Features of Drupal

Drupal has a very small core and then hundreds of contributed modules. Let’s take a look at the core.

  • River of news
  • RSS feeds
  • User profiles
  • Search
  • Blog for each user
  • RSS aggregator
  • Forums
  • Commenting
  • Contact forms
  • File upload
  • Taxonomy (tagging)
  • Hierarchical content type (book)
  • Menu, theme, and content independent of each other
  • Revisions

Now let’s take a look at some commonly-used contributed modules:

  • Content Construction Kit (CCK) — page, news item, calendar event, athletic event, trip, curriculum map entry …
  • Views — define criteria to select content and then a format to display it
  • Calendar — control over categories, display formats
  • Image — image galleries, embedded images
  • Organic Groups — classrooms, clubs, teams, affinity groups
  • Notifications — email subscriptions by content type, keyword, or author
  • WYSIWYG editors — button-level control, link buttons to custom code
  • LDAP integration — same username/password as your other network systems
  • JavaScript functions (jQuery) — usability enhancements (AJAX)
  • Wiki — wiki markup if desired, otherwise revisions + editing rights + diff
  • Page functions — print, email, PDF

Fine-grained control

  • Position of administration functions
  • Per-item control of menus (user and administration)
  • Role definitions and permissions
  • Per-field control over content definitions
  • Ability to embed PHP code and write custom modules (Blackbaud integration)

Exciting additional features demonstrate the Drupal community’s ability to integrate promising new technologies.

Getting Started

My journey: insideCatlin, public-facing shadow site, Shasta Mountain Guides, 3D Cell Explorer, San Diego Hat Co, summer school registration, test installation for new site

Lessons learned: start small, grow gradually, distinguish yourself with modern features, don’t just talk about open-source, rather provide hands-on demos.

That’s it for this session. Will get into specific site design issues in the second session.

Questions