Bates College was the winner of the Best Overall Website (both People’s Choice and Judged) and the People’s Choice winner for Best Homepage in this year’s eduStyle Awards. We connected with Ethan Wright-Magoon, the Digital Creative Director at Bates, to ask him and his team a few questions about how the site came about.

What is your role at your school?

I am the Digital Creative Director. I am the leader of the WebTeam here in the Bates Communication Office. The WebTeam is Ethan Wright-Magoon, Chris Bournakis and Nicholas O’Brien. Of course, we couldn’t have done any of this work without all of the support and inspiration from our colleagues in the Bates Communications Office, and Information & Library Services!

Can you give us a little background on the site and how it came together?

The site was part of a complete redesign of our online presence and also our offline/printed materials.

The new Bates.edu is a complete redesign from top to bottom. We basically razed the online campus. Then, we redesigned and rebuilt every site.

Was it completed internally or did you involve an outside company? Either way, tell us about the team that worked on it.

We had some outside help with the initial IA. Once IA was complete, the WebTeam of Communications, and the Systems Development & Integration Team of Information and Library Services worked in tandem.

Is the project using a CMS? OR what technologies are involved in it.

100% WordPress – WOOT!

Did you have any sources of inspiration for the project?

We try to stay as open to inspiration as possible. When every higher education institution is keenly aware of its peers’ work, there’s a risk of solving familiar problems with familiar solutions. So we stay mindful not just of our peers, but of other industries and fields. One day we’ll be inspired by a bicycle manufacturer, the next by a random developer who found us on Twitter.

What were some of the biggest challenges of the project?

The single biggest challenge was determining whether or not the new site should go live. To successfully overcome this challenge involved thoroughly explaining to all stakeholders just what a website is. i.e. A website is never done, and therefore never perfect in any given moment. Rather, a website is a moving solution, shooting towards a moving target. The idea of a website isn’t to actually hit the target, but to get a close as possible. Once everyone saw that, we got the green light.

Any lessons learned that you could share?

WordPress Custom Post Types (CPTs) are your best friend! Also - Follow the lead of your institution’s students. Students are encouraged to experiment and find happiness — to apply themselves without regard for precedent, and to do what they love. We couldn’t agree more!

How has the community reacted?

Open arms. Pitchforks. Cheers. Happiness. Yes, in that order.

What was your/your team’s reaction when you learned that you were nominated for an eduStyle Award?

Honored. Freaked Out. Stoked. Inspired. Joy. Vindication. Yes, in that order. We made a typical Bates move with our website by taking a calculated risk based on our core beliefs. Watching that risk unfold has been trying at times, so it’s nice to have eduStyle affirm our hard work and beliefs.

Do you have any favorite sites from the other nominees (either in your category or outside)?

Most higher education websites look like higher education websites — we like the sites that aren’t afraid to adopt current web themes and motifs. After all, our audiences have more experience on the web in general than higher education’s portion of the web. Our current favorites (in no particular order):

- Colorado State University English Department 

- EIU Admissions

- Regent College

- Texas Tech University

Congrats on the awards, they were well deserved.

The team from Bates celebrating the launch of the new Bates.edu with some suds at a local hangout in Lewiston.

 

I noticed on Twitter a tweet from Adrian Roselli:

4 of 5 @eduStyle higher-ed RWD award nominees have no/poor print styles: printshame.com/search/label/e… Voting closes in 8 days: edustyl.es/MEUk7w

— Adrian Roselli (@aardrian) July 19, 2012

I’m glad he brought it up. Honestly, in developing the list of nominees, we don’t evaluate the print style sheets. Maybe we should. Having either  no print style sheet or a bad one can be a real source of frustration for our users. As Adrian points out on his blog, print styles have been around for over a decade, so there really isn’t much of an excuse for not getting this right. In my presentation on responsive design at the Higher Ed Experts Responsive Web Design Summit, I pointed out that print style sheets are likely the first experience that most of us have had with the principles that make up responsive design. I remember my discovery of print styles almost 10 years ago, I spent hours trying to get things to print out just right.

So we thought it would be a worthwhile exercise to look a few of the print styles from the list of nominees for this year’s awards and dig into what is working and what could use some work.

Princeton – Your Path to Princeton

Your Path to Princeton is nominated for Best Prospective Student or Admission Site. With all of the sites we looked at, we looked for a good example of a page that you might actually want to print for our evaluation. In this case we chose the Learning at Princeton page. The first thing we notice on the print page is that the entire navigation is included. I can’t really think of any case where you would want this to happen. The side effect of this is that the content of the page gets pushed down half a page (that’s gonna kill some trees). Once you get to the content though, it is great. They include the font styles, so the headings maintain their color and font and the paragraphs have nice spacing. Our suggestion:

#section-header, #region-sidebar-first { display: none; }

University of Nebraska-Lincoln

The University of Nebraska-Lincoln is nominated for the Best Overall Website. For UNL we looked at their About the University page. It is pretty good. It includes a nice letterhead and the font and color styles from the web version of the page. The links revert to default font colors, which is ok but considering they are not clickable once printed, not exactly necessary. I’d suggest either switching the link colors to match the paragraph font colors or  using a little CSS to append the link urls, so that they make sense to include in the printed page. Our suggestion:

a:link, a:visited, a:active, a:hover { color: #000; text-decoration: none; }
a:link:after, a:visited:after { content:” [link: " attr(href) "] “; }

 The Open Medical Device Research Library

OMDRL is nominated for both Best Research Site and Best Responsive Site, and was actually one highlighted on Print Shame. We looked at their About page. I think Print Shame was a little hard on this one, I think it is a pretty good example of a print style sheet. Maybe they were expecting more because the site is responsive, I don’t know. The only real complaint I have with this one is the large white space at the top of the print page. It takes up roughly 1/4 of the page and offers nothing. This is where you might expect to find a nice header that many of the other sites include. The thing is, they have included the logo. The reason it doesn’t show up that most browsers disable background images when printing. One quick code change and this is a nearly perfect print style. Our suggestion:

#logo { content:url(/images/logo_omdrl.png?1322691341); }

University of Notre Dame

The University of Notre Dame is nominated for Best Overall Website, Best Use of Photography and Best Responsive Site. For this site we looked at the Leadership page in the About section. This is the 1/5 from the list that Print Shame compiled that did have an adequate style sheet and I honestly think this comes as near to perfect as can be expected from a print style sheet. The design includes a nice letterhead, styles that match the web version and they have appended link urls to all of the links in the page. The only really picky thing that we could find is that some of the links are relative and to a non-technical person this might not be clearly a link. So maybe better idenitifying the links would help. Our suggestion:

a:link:after, a:visited:after { content:” [link: " attr(href) "] “; }

Last thoughts

I’m glad that Adrian raised the issue of print style sheets. They take a little extra time, but can save our users from some real frustration. Have you spent some extra time to develop a nice print style sheet? Have you identified any best practices when developing print styles? We’d love hear your thoughts and see some more good examples in the comments.

We’re pleased to announce the nominees for the 2012 eduStyle Awards, sponsored by Demand Creativity. This year marks the 5th anniversary of the eduStyle Awards. We have moved many of the categories up to 5 nominees from 3. So this year there are 73 sites nominated in 20 categories. The nominees represent 53 schools. To recognize the changing landscape of web design we have added a category, sponsored by HigherEdExperts.com, for Responsive Design.

We’re working on some very exciting changes to eduStyle over the next few months. As part of the roll out of this year’s awards we have completely rewritten our screenshot system. While most of you won’t notice a change, it was huge and lays the foundation for some significant changes that we’re working on. The first, that will roll out in the next few weeks, is the end of the approval system (yipee!!). Instead of approving new sites, we’re moving to a system that auto approves so that your site will show up in the gallery immediately after you submit it. Stay tuned for more big changes.

Another week, another two site experience reviews. Although I give scores to a website based on visuals, information and code, there is so much more that goes in to those scores. The overall experience weighs heavily in how the numbers come out.

The first site this week, Henderson State University, although recently redesigned, it didn’t feel like they had me (the visitor) in mind when they recreated each page. I was met with clutter, various font types, positioning and prominence. It seemed like they had good intentions and action items (the same ones) on each page, but the execution left a lot to desire.

The second site, Purdue University – Krannert School of Management, also recently redesigned, immediately made me feel welcome with the minimal amount of items on their homepage. Going through their pages it was easy to identify the headers, links and next steps. I was disappointed to see all their crucial information was trapped in PDF’s, but at least it was available. I was happy to see someone paying close attention to the code of the site to ensure it was lite, semantic and standard. It was the code that brought them in to the B range.

If you’re interested in having your university (or one of your competitors) reviewed publicly or privately feel free to submit your site. Over half of the sites reviewed on EDU Checkup are by request.

This Week’s Reviews

Keep up up with @educheckup on twitter and RSS for more site updated in the coming weeks. Or if you prefer, an iTunes feed is available so you can get new episodes automatically.

The two sites this week gave us insights in to the two ends of the higher ed Web. The first, Langara College had a different layout than I have ever seen before. The site felt ultra modern in the layout, typography and choice of colors. The homepage only presented the important items, if it wasn’t a primary action, it didn’t make the cut. It was nice to see a homepage so clean and under so much control. The child pages continued this trend and the information needed for a first time visitor was pleasantly surprising. The site overall was well thought out and looks to be continuously executed well.

On the other end of the spectrum was the Everett Community College website. The overall design looked like it didn’t changed since 2005. The homepage was squished in to an 800 pixel wide frame and there were more links than a visitor could count. You could tell visually it was trying to serve too many purposes and wasn’t executing well on any of them. Beyond that the information within the site got better. I was able to find everything I needed and it was all in a decently logical place. Lastly, I was impressed with the code of the website. They had a drive to make the site ADA compliant and took every opportunity to accomplish that goal. It was also the first higher ed website I have seen take advantage of Google’s voice search. With just one additional attribute, this site turned every input field in to an option voice search. I was quite impressed.

If you’re interested in having your university (or one of your competitors) reviewed publicly or privately feel free to submit your site. Over half of the sites reviewed on EDU Checkup are by request.

This Week’s Reviews

Keep up up with @educheckup on twitter and RSS for more site updated in the coming weeks. Or if you prefer, an iTunes feed is available so you can get new episodes automatically.

Wrapping up another week with two site reviews and a lot of insight. The first site, University of Northern Iowa looks like it came out of 2005. The site was overwhelmed with too much content on the homepage and not enough breathing room to make it scannable. The boxy style was not inviting and made the experience feel very cold. Finding information was the best of the three categories, but even then I could not award it anything more than a D- grade.

The second site, Texas State Technical School looked like it was redesigned fairly recently and the entire site used the same template. Sections of the site were easy to scan but at times I found the text have too much of a consistent style that it was easily overlooked. Finding degree information was also quite easy but once I started to investigate a program the specifics seemed to be disbursed between locations. Some had a lot while others had very little. I felt there is opportunity for more cross promotion of campuses on each program information page.

If you’re interested in having your university (or one of your competitors) reviewed publicly or privately feel free to submit your site. Over half of the sites reviewed on EDU Checkup are by request.

This Week’s Reviews

Keep up up with @educheckup on twitter and RSS for more site updated in the coming weeks. Or if you prefer, an iTunes feed is available so you can get new episodes automatically.

Wrapping up this week on EDU Checkup I first reviewed University of Maryland University College and was presently surprised to see some features that I have never encountered before on a highered website. The first was a “test drive course” feature where prospective students can take a course for free in exchange for some personal information. The second was a “interested courses” list that is part of the entire website. When viewing a course you can save it without signing in or being a student. Lastly, building on the saved course list a user can email their interested courses to themselves or others. Although these features are not earth shattering, they are innovative from a highered user experience perspective.

Secondly, I reviewed the Bridgewater College website, which is not on eduStyle.net yet, but should be. The website in my opinion has a great intent but fell flat on its face with the execution. The homepage is cluttered with link lists, each grouping of links had a different color scheme and the movement on the page continued to distract me. Looking for degree programs and their details led me to too many dead ends. The code of the site didn’t fair any better, it was obviously cobbled together by a CMS, which was unfortunate.

If you’re interested in having your university (or one of your competitors) reviewed publicly or privately feel free to submit your site. Over half of the sites reviewed on EDU Checkup are by request.

This Week’s Reviews

Keep up up with @educheckup on twitter and RSS for more site updated in the coming weeks. Or if you prefer, an iTunes feed is available so you can get new episodes automatically.

The first week of 2012 started off on a shaky note but then redeemed itself with the second site.

The ten second test for Grantham University got off to a rocky start, I was immediately presented with a pop up that took over the entire screen. Before I could even learn what they are about they popped up a request for information form. Although I would probably eventually request more information, it wouldn’t be the first thing I would do as a perspective student. Going through the site more I was eventually able to get the information I was looking for but it wasn’t anything that knocked my socks off. Lastly, the code looked like it cobbled together through various systems and didn’t have the attention to detail that I thought it deserved.

Secondly, Boston University – College of Engineering got my attention during the ten second test, but not for a pop up, the information on their homepage was interesting. The use of large images, appropriate titles and spacing made it a pleasure to browse. At one point I was exploring the site and clicked deeper and deeper without even realizing it. The level of information was great and the organization was a no brainer. The use of text replacement made me realize how much attention to detail they put in to the site. Overall this is a departmental site worth comparing your own to.

If you’re interested in having your university (or one of your competitors) reviewed publicly or privately feel free to submit your site. Over half of the sites reviewed on EDU Checkup are by request.

This Week’s Reviews

Keep up up with @educheckup on twitter and RSS for more site updated in the coming weeks. Or if you prefer, an iTunes feed is available so you can get new episodes automatically.

The last two weeks I was only able to review one video each, so this is a two week wrap up.

The first site, International Academy of Design & Technology, looked very impressive at first, everything was shiny and appeared to be well put together. But as I dove deeper into the site I realized it was essentially brochure ware . There wasn’t much depth to the information or the design. It felt like a lot of default Photoshop filters were applied and the information was what I would call “standard”.

The second site, The Juilliard School, didn’t far much better on their visual design. Items either had far too much spacing or too little to be comfortable. They made up for this in the information they provide about each program, entrance requirements and calls to action. I felt like they covered all of their bases and although they had a few 404′s when I reviewed they were corrected right away.

If you’re interested in having your university (or one of your competitors) reviewed publicly or privately feel free to submit your site. Over half of the sites reviewed on EDU Checkup are by request.

This Week’s Reviews

Keep up up with @educheckup on twitter and RSS for more site updated in the coming weeks. Or if you prefer, an iTunes feed is available so you can get new episodes automatically.

This week both sites reviewed recently launched a redesign, so recent that some of their pages still don’t reflect the new look.

The first site, Columbia University – College of Physicians and Surgeons, started out strong with a clean structured homepage but went down hill quickly. The homepage has four completely different menus in the header all for different audiences. That may make sense to someone who visits the site often but as a first or second time visitor, it forces them to look at and scan all of the menus and each and every menu item to determine where they should go. Beyond the menu it took a bit of time to find the actual degree requirements and unfortunately featured a program outline that was stuck in an image. A really large image that has all the requirements listed out but doesn’t feature alternate text. Someone with a screen reader or searching Google wouldn’t be able to use this information at all.

The second site, Northern Michigan University, featured a lot of images on their homepage, these really caught my attention. This combined with the large amount of text really pulled my eyes left and right as I was looking for the main menu. Once I found it I realized how many items were in it, nine items in a horizontal menu. Interestingly enough they were all readable and scannable which goes to show there isn’t a hard limit to the number of menu items that a site should have. It was also the first institutional homepage I have seen that includes a Web poll. This seems like a flashback to 1999 but I found it fun to vote and see the results. Lastly the search box on NMU’s website is larger than most, I found myself gravitating to it at times as an easy way to find information. I don’t know if this is a good or bad thing but it definitely is an opportunity.

If you’re interested in having your university (or one of your competitors) reviewed publicly or privately feel free to submit your site. Over half of the sites reviewed on EDU Checkup are by request.

This Week’s Reviews

Keep up up with @educheckup on twitter and RSS for more site updated in the coming weeks. Or if you prefer, an iTunes feed is available so you can get new episodes automatically.