This week we had a treat with two recently redesigned site both implementing HTML5. To be honest both sites did an amazing job, although they didn’t go fully into CSS3 what they did implement is bleeding edge for most websites across the web. The first, Missouri State University took a very clean approach to their homepage. Hovering over any one of the six simple menu items at the top pull down the menu for all of them. This is a simple approach to get visitors to explore with their mouse and not be overwhelmed by a mega menu. The rest of the site was very straight forward with easy access to request information, visit campus and apply. Overall it was a smooth experience.

The second site, Brown University took photos center stage. The whole entrance experience of their site is filled with vibrant and interesting photos. Their use of text replacement makes the site feel unique but the inability to copy and paste that text makes it hard to use as a resource. Beyond the homepage the child pages are filled with useful events and promotions on the sides, they do a great job using each page to cross promote events and news. The department level sites all seem to still be maintained separately but they are on the right track with their main site.

Overall two great sites at the leading edge of HTML5 implementations. Both are worth checking out and learning from.

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.

Cross browser testing can be difficult. Many of you lived and worked through the first browser war of the mid nineties (henceforth referred to as BW I). Things settled down for a few years while we waited patiently for Firefox to rise from the ashes of Netscape and challenge Internet Explorer’s dominance. Those years are past and the second browser war has begun (BW II). Counting the just released beta of Internet Explorer 9, we have had three new versions of IE in 4 years. Compare that to the previous 5 years which saw no major versions released. Google’s browser Chrome was first released in 2008 and is already on version 6. They recently announced a plan to have a new stable release out every 6 weeks. That is over 8 releases a year. Considering only those two, we have a lot to test against. Yet to get the full picture you’ll need to add in Safari, with roughly one major version release each year,  and Firefox which is currently beta testing version 4 of their browser. Oh … and who could forget Opera.

Adding mobile just complicates things more.  We now have 4 generations of iPhones, 1 generation of iPads, and countless Android, Blackberry and Windows Phones on the market.

Don’t get me wrong, I’m glad for BW II. Things have gotten really exciting in web design and development in last few years. We’re starting to see huge advancements in CSS support including things like drop shadows, multiple background images, rounded corners, gradients, and more. With HTML 5 we have native video and audio support, built in form validation, local storage and tons of other long over-due features. It is a great time to be a web designer.

So with all of this change, how do we possibly ensure that our websites work where they need to? How do we test for all of these browsers?

Graded Browser Support

In the years of the BW I, browser support was often all or nothing. I’m sure you remember encountering sites that behaved like a cool kids club and blocked your access if you were using the wrong browser, “yo this site was designed for Netscape 4”. We’re past that. A better approach is to provide graded browser support built on the principle of gracefully dropping features for less capable browsers. By intelligently defining a few levels of support you can take control of what is supported and what is not. It will help you set priorities on testing and give some freedom to play with new features without having to make sure they work in Internet Explorer 6.

So let me outline an example of graded support using 4 levels. I’d recommend 3 or 4, any more than that and it’ll get way too complicated. We’ll use letters of the alphabet to identify each level (we work at schools, this should make sense to us):

A – All features work and the design is how we intended it to look. All sites are tested in these browsers and display and functionality problems are addressed with the highest priority.

B – Some advanced features of the design may not work exactly how we intended, but all sites are 100% functional in these browsers. All sites are tested in these browsers and display and functionality problems are addressed with secondary level of priority.

C – Sites will likely not have all of the features and the design may not look as nice, but the sites will be mostly functional in these browsers. These browsers are in a secondary test suite and only major pages and templates will be tested. Display or functionality problems will be addressed with the lowest level of priority.

D – Sites are not tested in these browsers. This does not mean they will not work, but we don’t actively test or develop to these browsers and as a result our sites may not function. Display and functionality problems will not be addressed.

Based on these levels and the current browser market this might lead to a chart formatted something like this:

Which browsers to support

How do you decide where to place each browser in the chart? Check your stats. What are your users browsing your site on? If I look at my school the answers is:

• Internet Explorer on Windows – 55%
• Firefox on Windows – 18%
• Safari on Macintosh – 12%
• Chrome on Windows – 7%
• Firefox on Macintosh – 3%
• Safari on iPhone – 0.7%
• Safari on iPad – 0.3%

So based solely on those stats most of my effort should be focused on Windows browsers (80% of users), followed by Mac OS (12%) with minimal support for mobile and Linux. But I wouldn’t recommend making all the decisions based on current numbers alone. When it comes to emerging platforms (specifically mobile) your support for the platform may have an impact on its growth. At our school, which has essentially no mobile support, there was 150% increase in the number of visitors using mobile devices semester-to-semester. WVU, which has a healthy mobile presence, saw 200% increase semester-to-semester. This may only be a small difference and may only be anecdotal, but it is worth considering that mobile growth on your campus may be slowed by your lack of attention to it. So while logic based on the numbers might land mobile browser in the “d” support level, growth and desire for continued growth might make you want to bump it up to “c”, “b” or even “a” level support.

Now as we have established, things are moving fast so you’ll need to check in on this on a regular basis. Perhaps you could plan to update it monthly when you are checking your stats to send it the Higher Ed Analytics Benchmarking Survey. Just take a second, look at the browser stats and see if you need to make adjustments. And hopefully soon you’ll be dropping IE 6 to “d” level to make room for best, faster, safer and funner browsers (one of those may not actually be a word, but as I’m sure you have noticed I self edit).

The point is:

*Tomorrow land is prettier and more usable.

and use graded browser support to help move forward and gradually migrate old browsers out of your testing suite.

Tomorrowland things you can start using today

CSS 3 supports rounded corners, but some browsers have not picked it up yet. You could just wait to use them until all of the major players jump on board, but why? Rounded corners degrade beautifully. Browsers that don’t support them simply fall back to sharp corners, and sharp corners on the web are pretty harmless. So depending on the browser you are using to view this page the chart above will look like either the left or right example below. So you decide? Is there any harm in using them now? (go play)

A second example is transparent PNGs. All current major browsers support beautiful alpha transparencies in PNG files. Internet Explorer 6 does not support them out of the box. You may have noticed in my chart above I placed IE 6 at level “c”. This basically means that our sites might not be pretty in it, but they’ll work most of the time. Below is an example from USC (thanks Tim). You’ll notice that the IE 6 example doesn’t look as nice as the IE 8 version (ugly gray backgrounds), but it is 100% functional so it is acceptable in our graded browser support. The beauty of using a transparent PNG here is that if somewhere along the line USC decided to change the background colour behind those images they could make a quick CSS change without having to go back and re-export the icons (because it is REAL alpha transparency).

There are countless other example I could pull out, but instead I’ll just give you a few links:

• Yes, You can Use HTML 5 Today
• Dive into HTML 5 – A Form of Madness – (heck read all of Dive into HTML 5)
• You Can Use CSS 3 Now
• Take You Design to the Next Level with CSS 3

Are you living in tomorrowland?

So have you embraced some forward thinking approaches? Do your web designer know what browsers you support? Does your website have a pretty table with CSS rounded corners? Let me know in the comments. I’ll see you all in tomorrowland.

The migration from my style/not my style voting over to our new 5 star rating system is almost complete. A few things might be a little broken while we complete the transition. If you run into something, please drop us a note at beta@eduStyle.net and we’ll try to get it fixed up. For those interested we thought we’d post some of the rationale for the move and how this will affect some of the rankings.

Why are we changing?

Over the almost 4 years of running eduStyle we have noticed a few things about how people use the site. Having only two choices has led to a common dilemma. If I think the site is ok, but not great I have 3 options:

1. Vote my style and potentially dilute the votes on the truly great sites
2. Vote not my style and risk giving the impression of a more negative view than I actually have for the site
3. Don’t vote

Unfortunately none of those options really reflect how I feel about the site. This most often leads to the 3rd choice. We think this is broken. Two choices just do not give you a very precise way to register your opinion on a site. For a review focused site like ours this is not good enough (the case maybe different for site with a different focus).

There some other situations around abuse and protest voting that we are trying to correct as well but we figured the move would bring benefit all the way around and give us a chance to rebuild some of those 4 year old systems.

What happens to all my old votes?

They have all been migrated to the new 5 star systems. What that means is if you voted “my style” that will be moved over as 5/5 stars. If you selected “not my style” that becomes the lowest rating of 0.5/5 stars. With the new freedom of having 5 stars to choose from you may want to go back and amend some of your previous votes.

I liked the old system, can we go back?

Sorry no, we’re moving forward not back. Just limit yourself to voting either 5 or 0.5 stars it is pretty much the same.

Last thoughts

I don’t have any, but if you do leave them in the comments. Now go vote, the place is pretty useless without it.

I reviewed two sites this week that were recently redesigned. Arizona State University took advantage of as much screen real estate as possible. They didn’t implement a typical top horizontal navigation but instead used an audience list on the left and a large expanded list at the bottom of the page. This would seem to get people to scroll past, news, announcements and events every time to get to basic information. This could get annoying after a while but it’s a good way to get visitors paying attention to important items.

The second site was New River Community College. New River had a pretty interesting way of presenting degrees and certificates by loading it right on the page the visitor is on. This is nice because it is quick but the layout of the options leaves much to be desired. In addition the main menu is audience based, most of the links at replicated between all of the audiences and often feels overwhelming. They did a really good job with consistency of elements but I feel like they need to move from the default drop shadows and use something a little more subtle .

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.

There was a time when eduStyle, because of obscurity, was immune from abuse and spammy behavior. Unfortunately that time is over. It started out with spam comments. We put some extra controls in over the last few months and seemed to have curbed that for now, but it has moved into the voting. Some of our users started to notice some curious voting patterns and brought them to our attention. After studying we have decided to take some actions.

The primary action is to add a terms of use to the site. The new terms of use publicly identify some of the behavior that we already considered abusive and hopefully will help to avoid any surprises when we take action on abusive behavior. We have built some tools into the site that will help us take action on these. The first is that new users will now need to activate their accounts via email before they will be allowed to participate in the community. Over the next few days we’ll be forcing some of our more suspicious accounts to reactivate and until they do, their votes and comments will be hidden from the site. So don’t be surprised when see some of the vote counts change, if the users have a valid email account, they be able to reactivate and the count will climb back up again.

We have also launched a feedback forum using UserVoice. If you have any suggestions to help us improve the site, please drop them over there and while you are at it vote of the ideas that have already been posted.

This one is for the trend watchers out there. In case you haven’t come across these yet, mega menus are the next big thing or maybe I’m a little late and they are the last big thing … either way thy are big (in a few ways). Even our favorite killjoy, Jakob Nielson, likes mega menus. So I asked myself, “who in higher-ed is using these things and how?” So here is my list of 6 higher-ed examples.

Asbury Seminary

Each item in their main menu becomes a multicolumn dropdown list of links when hovered over.

Boston University

As you hover over any item in the main menu the entire page slides down exposing their entire sub menu structure.

Connecticut State University System

Mousing over any of the main menu items produces a fly out that is organized under subheadings and often includes images.

Forsyth Tech

These menus include both a list of links on the left and a featured item to the right.

Grand Valley State University

Each menu item, when clicked,  display an expanded menu that has been custom designed for the content it displays. The example below is their quicklinks which are each identified with a unique icon.

The Cornell Lab of Ornithology

By hovering over each item in the menu you display a multicolumn listing of links.

Have you come across any other examples? Share them in the comments.