I must say it has been relatively painless to convert Voices from just a plain WordPress Multi-blog setup to a BuddyPress powered community site. My first step was to convert my existing Multi-blog setup on DreamHost to use BuddyPress and mark it as the development environment. Once that was done in late October I began looking at my options for a theme to use as the main site theme. This was before the changes in theme structure for BuddyPress. At first I tried to code something myself, but given that I wanted it to be ready for this semester and that I have other duties, it was clear I couldn’t take the time. I looked at some of the free options like Bruce, but could not get them to really work consistently and be stable. In the end I settled on BP Corporate by incsub. It is a nice clean theme, which is what I really wanted since the content of an academic community should be the focus.

Once I had picked a theme I started playing with where to put the widgets and how to make sure the site had a dynamic feel. I ended up using the plugins Ahjira Recent Site-wide Articles, Auto Group Join (with some modifications to make it work), BP Groupblog, BP Events, and Recent Global Comments Widget. The homepage also uses some of the built-in BuddyPresss widgets like Groups, Site wide activity, Who’s Online Avatars, Members and Recently active member avatars. Eventually I’d like to add a Featured Post widget, but the ones available currently do not seem to work. I think the overall effect has been very good. The site feels dynamic and people can see what community members are writing about.

I would say it has definitely been worth it. Even though the main use is for class blogs at the moment, we are getting a number of users joining because they want to be a part of the community. This is something that was not happening before BuddyPress allowed us to easily create the community features. The feature with the biggest impact though has been BuddyPress groups with the Auto Group Join plugin. This has made creating class blogs super easy and faculty have really loved it. There are still some things to tweak, but overall I’m happy with how it is going.

While playing with @font-face I’ve also looked at some other CSS 3 commands to try out on the site. Currently I’m making use of the rgba command and border-radius command to style block quotes. I did try the -moz-column-count: 2; -webkit-column-count: 2; commands to make post content two-column, but it doesn’t work so well with video. I’m thinking what one would do is make the post content two-column and then have a postfooter that spanned the entire div. So a post would have a containing div with a content div (with column styling) and footer div inside it. You could then use a plugin or custom fields to place the video in the footer. More experimentation is required. I encourage everyone to start to experimenting with CSS 3 and see what it can do.

If you’re not aware there is a new feature in CSS3 called @font-face. This feature is intended to address one of the major issues of publishing on the Web: not all readers have the fonts you used in the design! For graphic artists, publishers and typography nuts (such as myself) this has been a real issue. We develop a fantastic layout and design with fonts that make the entire piece or site look gorgeous, only to see it on a friends computer displayed in Arial, Georgia, or Trebuchet. @font-face and the Typekit service are here pull us out of this Dark Age of Web typography.

So how does it all work? You can see Web fonts with @font-face for a more detailed explanation, but the gist is that you host your fonts on the Web and then access them as you would any other Web file. It sounds great and if you take a .otf file and put it in a Web accessible directory then you’ll be able to use it with @font-face. Sounds great doesn’t it? So why do we need Typekit? Well, fonts are software. I know it sounds crazy but in terms of the licensing of their use they are treated like software. This means that you are allowed to have a copy on your computer and to use it to produce documents, but you cannot freely distribute it. This is exactly what you would be doing if you put that .otf file in a public Web directory.

Typekit has developed a solution which a number of font foundries seem to think is a good solution. Typekit’s solution is to host the fonts on their servers and require you to use some javascript to be able to access the fonts in your sites. They have arranged their offerings into 4 packages: Trial, Personal, Portfolio, and Corporate. Prices range from free to $49.99/month. A free account will entitle you to 5GB of bandwidth per month, two fonts from the 62 in the Trial Library to be used on one website, and you will have to display the Typekit badge (as you see in the bottom right of the site). Other plans increase the bandwidth, number of fonts you can use, number of fonts to choose from, and allow you to opt out of displaying the badge.

Once you join you’re asked to provide a website where you would like to use the service. Once you supply a URI and advance, you’ll be presented with some javascript to copy and put in the head of the pages using the fonts. After pasting the code into your webpages you can return to the Tyepekit site and select the fonts you would like to use. You can do so by browsing the appropriate library for your plan and then clicking the ADD button next to the font. Doing so will try to open a Popup window (Firefox complained and I had to allow an exception). At this point you will find directions on how to use the fonts on your site and you’ll be able to disable weights and styles that will not be used in your design so that the payload of the javascript is as small as possible. When you are finished here just click on the Publish button to make the fonts available to your site.

Overall I was very pleased with the way the service operated and the fonts that were available. I didn’t see any Adobe or Linotype designs in the Trial Library, but there were plenty of good fonts. Hopefully Typekit can get the traction necessary to attract larger foundries to use the service. I so want to use my beloved Helvetica and Myriad Pro. For now I’ll go with Liberation Sans for headings and such and M +1c Garogier Liberation Sans for the body text. If you are browsing in the most recent versions of Internet Explorer, Firefox, Opera or Safari then you should be seeing the site with my Typekit fonts. I’d encourage everyone that has a blog or website to check them out.

Here are the explanations of each concept given by the contractor.

Design one: Eclectic

This direction is based on a student’s dorm room wall/door. We call this “eclectic” because it is composed of elements drawn from various sources to tell the story of “who Wooster is.”  This layout creates a visual aesthetic that is student-centric where the unique objects and elements tell the story of what it feels like to be at Wooster. While there is no “typical” student at Wooster, it begins to show the various levels of interests, activities and involvement of students at the college.

• Global & Tool Navigation is clear and easy to find
• Restrained, deliberate use of color that’s warm and inviting
• The dorm wall/door “Wooster Is” feature is built in Flash and invites the user to interact and explore but is not overwhelming.
• Keywords from Wooster’s messaging strategy are incorporated (as they are in all three concepts) into the objects for visual tie in and to evoke a sense of intellectual curiosity

Clicking on a minor keyword in the “Wooster Is” feature will reveal information relevant to that word and will link to that area on the site. There is also a prompt to add this to your “iWooster.” Minor keywords will change periodically, while major keywords stay the same although the imagery and objects can swap out on unique session.  When mousing over major keyword, the items will activate and move, grow or shake. Clicking on a major keyword will cause the items to shuffle to the side and the feature presents all the associated links to that keyword.

Design two: Classic

This design is a walking tour of Wooster where the visual elements each tell a story.

• A bit more organic in feel
• Feature area is prominent…we’re answering the question of WHO IS WOOSTER? by showing rather than in telling
• A highly original view of campus—not meant to be an accurate depiction—and gives users a glimpse of the energy, diversity and sense of place
• Builds an authentic sense of community on campus—again, it’s all about the students and community
• Liberal use of branding colors but palette also reflect a warm and inclusive community

Clicking on a minor keyword in the “Wooster Is” Flash feature will reveal information relevant to that word and will turn from sketch to photo and ideally activate a video component. There is also a prompt to add this to your “iWooster.” Minor keywords will change periodically, while major keywords stay the same although the imagery and objects can swap out on unique session.  When mousing over on a major keyword, the sketch turns to real photography and activates the video. A click will reveal the associated links.

Design three: Stylized

This design is bold, dramatic, stylized, less constrained…a completely unique and unconventional approach to concept. The concept was to take the “livelihood” of the campus, combined with architectural style and bring the two together in an illustrative interpretation of campus

• Daring, unique, and dynamic — bursting with creativity and activity
• It is important that the right balance of active design elements be juxtaposed by clean and calm presentation of content
• The dark color palette of the stylized campus it meant to act as the stage to the activity within the “Wooster Is” feature.

The imagery of the major keywords is meant to take center stage and tell it’s unique story.  Clicking on a minor keyword in the “Wooster Is” Flash feature will reveal information relevant to that word. Minor keywords will change periodically, while major keywords stay the same.  When mousing over on a major keyword, the silhouette is revealed. A click will reveal the associated links and imagery related to the keyword.

I’m going to talk about each and try to highlight what I see as the strengths and weaknesses.

The Eclectic design

Stregths: I think this design is visually interesting and captures what I remember of my time at Wooster. When I look at it I get a good vibe and I think students looking at Wooster will get that vibe as well. The desktop/cork board design is something I think students will get. The colors feel warm and inviting and serve to add more punch to the images.

Weaknesses: The text color in the navigation bars and header seems to blend in with the background color making the text hard to read. The branding statement seems to get lost on the page, but I do think the imagery reflects the message. The fact that the Wooster IS area is Flash may mean it is harder for us to maintain and update.

The Classic design

Strengths: This design clearly highlights the message, academic programs, news and events, and profile. The design is also very different from what one finds at other schools. It really represents the communal aspect of campus life, but it takes a while to see it.

Weaknesses: The image feels cartoonish and reminds me of Norman Rockwell. The cartoonish aspect has been a criticism of our current print materials. I do not think students will feel that this gives a good sense of what Wooster is like. The image as it stands also does not reflect any single place on campus, but is a montage of several places. It also is not featuring Kauke which many alums see as the symbol of Wooster. The nature of the image could make maintenance an issue if we want to update or change the image.

The Stylized design

Strengths: This design is clearly not like any other college Web site. It will be a memorable site and is very interesting visually.The design features Kauke and gives real pop to the major keyword areas when clicked.

Weaknesses: This design is clearly not like any other college Web site. The message is almost impossible to find and I don’t think the design communicates the message as well as the other two designs. I’m not sure the design will appeal to the type of student we have identified as a good fit for Wooster. I think alums will really find this site hard to see as their Wooster.

What do you think? Are there strengths I missed in any of the designs? Are there weaknesses I’ve overlooked? Keep in mind that these are directions and that specific elements of each design can be massaged and tweaked. We need to decide which concept best communicates who Wooster is and will be. The design firm gave us the following questions to think about as we look at each design and I encourage you to address them in your comments.

1. Where does your eye land first on the page?
2. What four or five words would you use to describe this page?
3. What actions do you think you might take coming to the page?
4. Does this feel like Wooster to you? Why or why not?
5. Do you think you could find any information you are seeking from this page?
6. Do the colors and images resonate with you? Why or why not?
7. Do you think prospective students would respond to this design? Why or why not?
8. Do you think alumni would respond to the design? Why or why not?