Home > Uncategorized > Live@edu – site review

Live@edu – site review

February 7, 2008

We often talk about the the “rich experience” that Silverlight can deliver on the web, but we don’t always see it.  Today I was pointed to a very nice-looking site that exemplifies “richness”.

Live@edu Home

The site is Live@edu, a portal site used to explain Live Services to global students.  Within that statement we find a few requirements, keep close to the established Live brand, design an engaging, pithy and attractive experience, organize a large amount of content and localize to handle multiple languages.

The site was built by the talented Coloradoans of Mondo Robot using Silverlight 1.0.  Expression Blend was used to design the animations, but beyond that I don’t much about the process.  Sounds like a good interview opportunity.

Visiting the site will provide the best experience but I’d like to point out a few concepts, doing my best to explain with still images.

Live@edu languages support

Multiple Languages
20 different languages are supported ranging from English (United States), Dutch and Chinese (Simplified).  After selecting a new language via the combo box in the upper right, a loading animation pops up the old text fades out and the new text fades.  I’ve seen a few Silverlight sites using multiple languages, but known pulled off this smoothly.

Live@edu sliding menu

Smart-scaling UI
While some view the web on 1920×1200 resolutions others are running 1024×768 resolutions.  And of course, others may be viewing the site non-maximized windows or even mobile.  Screen real estate is a huge commodity, vertical space even more so (except for those of you lucky enough to be running a Tablet).

What I like about this site is that it addresses the smaller screen resolution by making the navigation smart.  If you don’t have much vertical space, the main navigation is hidden and slides in when needed.  Plus the whole site scales proportionately as well.  +1 for vector UIs (and scalable PNGs).

Live@edu transition

Great Transitions
When navigating between sections, the page doesn’t completely reload and everything is loaded asynchronously.  But in this case, I don’t get lost or miss the click and wipe of the screen letting me know the new content has arrived.  Each selection has a visual transition.  Some of them very smooth like the color blend pictured above.

The content is very fun, I’ve added a few more pictures below as enticing teasers.  Props for getting claymation into the mix.

Live@edu "I Scream" Live@edu Film Contest Live@edu School Profiles

But its not all peaches and cream…
“How is this accessible or SEO-friendly?”  you may be charging up to slam down as a comment.

Well it’s not.

Upcoming improvements in the platform will make this type of friendliness more possible in the future.  I haven’t completely checked out the site, that might be using the Accessibility object to give an idea of the content along with an actionable item.  They may be rendering differently when a search engine is detected as requesting the page.  And that might not be…yet.

Going to start a Top 5
Overall, I really dig the design and the experience and I’m going to add this to my Top 5 favorite Silverlight applications.  I’ve been thinking about the Top 5 for a little while, but its on now.  Live@edu is right up there with MNet.  Who are the other three?  I’m not sure yet…

%d bloggers like this: