Vanderbilt website redesign – 2010
The Office of University Web Communications has been working on a new look for the Vanderbilt homepage and top-levels pages, set to launch the week of May 17. We’re once again using this blog to share our designs with you, the Vanderbilt community. We hope you take some time to look at our designs, read our insights into why we’re doing what we’re doing, and give us your feedback. The Vanderbilt website is your website, and we value your opinion.
PLEASE NOTE: The only second-level page built at this time is “About.” ALL CONTENT IS FILLER AT THIS POINT; the captions do not match the photos, and the links in the drop downs and second level are not complete. Extensive browser testing is currently in progress. Therefore, recommended browsers for previewing these beta pages are Firefox, Safari, Opera or IE7+.
Please share your feedback in the Comments section by April 9.
Why are we doing this?
It’s been almost three years since our last major redesign, although we’ve made plenty of tweaks and improvements along the way. The Web and our usage of it has evolved since then and now is the time to ensure our primary Web presence reflects that evolution.
If you’d like to see how the Vanderbilt homepage has developed from its inception in 1994 to the present, take a look at our very own wayback machine.
How did we decide to change what we’re changing?
We studied our analytics and our search engine results; conducted focus groups with faculty, staff and students; studied competitors’ best practices; and listened to feedback from our different audiences.
What’s Changing
Navigation
There are two main shifts in navigation –
- We’ve reduced the number of main links to help focus the user
- We’ve created mega dropdowns that include more links that give the user quicker access to our most-visited sites
There are now three main navigational areas –
- The main navigation, which runs horizontally across the page and contains the mega dropdowns
- The secondary navigation below the news and events section
- The top right navigation, what we refer to as the Tools section, includes a new Logins feature, which will have dropdown links to popular services such as Email, OAK, YES, C2HR and more – making the most used and most searched for services available right on the homepage.
Why mega dropdowns
A primary focus of the new Vanderbilt homepage is improved navigation, primarily in the form of “mega” drop-down menus. Mega dropdowns eliminate page scrolling and reduce the number of clicks audiences take to reach their destination points, allowing for more direct links in a smaller amount of space. The content of these mega dropdowns was determined using page analytics as well as looking at what users were searching for most often.
Mega dropdowns can also be structured with layout, typography and images. For example, when you rollover About, you’ll get the top links related to that category, text describing Vanderbilt, and an image – in this case, the weather icon.
These dropdowns also test well in usability testing, and are Jakob Neilson-approved.
The terminology of the navigation has been tweaked a bit. For example, Prospective Students is now Admissions. Colleges and Schools is now Academics. Jobs is now Work at VU. (The first two are simply to be more direct and to keep our terminology in line with what prospective students and faculty are familiar at other universities. The third, changing Jobs to Work at VU, is just a nice shift from a very utilitarian word. Working at Vanderbilt is more than “just a job” for many of us!)
Content
The ever-popular large homepage photo will remain, but with improvements. Thumbnails of the rotating photos will appear to the right of the photo, allowing users to scroll through them and click the photos (in addition to the photos scrolling through automatically). The captions will appear to the left of the photo.
The section next to the Events is a spotlight area, where we will focus on major events, news and features for longer periods of time, such as Commencement, Haiti relief efforts, a major research news, technology announcements, Expanded Aid information, etc. Look for these to have a longer shelf life than the News box, which is updated daily.
The Events and News boxes will be updated frequently with the latest news and happenings around campus, with the News box now featuring thumbnail photos.
VUCast showcases the latest videos from around campus, such as the weekly VUCast newscast, lectures, concerts from Blair, Emmy-winning videos, etc. Use the right and left pointing arrows to scroll through the videos.
Finally, the footer features all the ways people can follow us via social networking, and our contact information.
Second levels
The second levels have a dramatic new look that mirrors the homepage, creating consistency and a “family” look to the site. Each page will have photos and captions specific to that category in the slider, as well as news in the right column that is specific to that page – making these second levels more like homepages for each category. We are striving to make the second level pages as content-rich, unique and interesting as the homepage, instead of just pages of massive lists of links.
The links to the right of the photo are the links from that category’s mega dropdown. (The mega dropdowns will also appear on each second level page). The other links on the page are grouped in a more attractive way than the current long list of links on the second levels. Each second level will also include photos from our Vanderbilt flickr site that relate to the page topic – classroom shots for Academics, campus shots for About VU, research photos for Research, etc.
Technical Specs
Validation
The pages are built around the standards of the World Wide Web Consortium’s (W3C) HyperText Markup Language XHTML 1.0 Transitional and Cascading Style Sheets (CSS3) using the methods/best practices of the Web Standards Project.
These pages are designed to be viewed by all modern standards-compliant web browsers, accessible by those with disabilities, and minimally readable by all web-reading software. 1024 x 768 pixels is the minimum recommended viewing size (according to our analytics, less than 1% of our visitors have a screen resolution smaller than this). Recommended browsers (free download): Firefox, Safari, Internet Explorer 7+, and Opera.
- XHTML 1.0 Transitional — pages pass validation with no errors
Validation Links: Homepage and Second Level - CSS Level 3 — Validation is successful with the exception of approximately 16 errors (all related to browser-specific css rules for rounded corners and opacity).
Validation Links: Homepage and Second Level
Our goal is well-written, flexible and lean code that adheres to web standards. These newer browser features (rounded corners and opacity) are implemented using -moz and -webkit prefixes, as per the spec, so that they are silently discarded by older browsers without causing harm while simultaneously allowing modern browsers to enjoy the features.
Internet Explorer
In modern Web design, a well balanced combination of progressive enhancement and graceful degradation can work wonders.
Our overall strategy for developing is one of progressive enhancement. Progressive enhancement is a strategy in Web development and design that uses Web technologies in a layered fashion, therefore allowing everyone to access the basic content and functionality of a Web page (that’s you IE6), using any browser or Internet connection (that’s you dialup), while also providing those with better bandwidth or more advanced browser software an enhanced version of the page (that’s you Firefox, Safari, Opera and IE7+).
Our support of Internet Explorer is one of striving for graceful degradation. The site will function the same for all users, but those using more modern browsers will get more visual “treats” (rounded corners, opacity, smooth transitions, etc). While we could put extra code and hacks in place to have some of these features available in IE6, we have chosen to keep the code clean given the waning use and support of IE6. Conditional IE stylesheets are in place to ensure functionality and layout.
Page Size
The document size has been dramatically reduced – on average 50 percent smaller than the current pages.
We’ve also used css sprites for many of our UI (User Interface) elements, thus reducing the number of http requests. This has a fairly large impact on reducing response time and is an easy way to improve performance.
Combined, the reduced page size and http requests will be great for our bandwidth.
A look at our process: From wire frames to comps to code
Take a look at how we got to where we are with the design.
Credits
The design and coding is by the Office of University Web Communications.
March 16th, 2010
It would be difficult for students and faculty to find the “Libraries” homepage in order to access databases and do their research. (Last time the redesign omitted libraries from the top of the front page and it elicited a lot of protests and it was restored.) If it is not to be prominent as with the current homepage it should at least be readily visible under Research and Students and Academics. Given the number of hits and wide usage by students and faculty, in my opinion, it should remain as prominent as it now is. (Unfortunately, I think the current homepage links on left and design is easier to read and navigate than this redesign.)
March 16th, 2010
Thanks Paula … the content of the mega dropdowns is not finalized yet. I can certainly see libraries being under all three of those areas — thanks for the suggestion!
March 30th, 2010
I do like the proposed redesign and I understand nothing is finalized quite yet. With that said, I agree with Paula’s comment on Mar. 16. I feel the library should be more prominent but maybe not adding it to every drop-down. Here is an example of a library link location from Emory plus a hover drop-down menu. I also like the “schools” link location and drop-down.
http://www.emory.edu/home/index.html
Thanks.
March 31st, 2010
@Ronee Thanks for sending. We’re going to start playing around with having libraries in the tools nav in the upper right – with a dropdown including discovery library, finding books, articles/databases, etc. Stay tuned!
March 16th, 2010
Great work to the web redesign team! I love the new look. Obviously it will take a little getting used to finding the new locations for hot buttons like libraries and email logins. I know you’ll get lots of good feedback from folks. Good luck and thanks!! -C.
March 16th, 2010
This design feels generic and like a media site or blog, not sophisticated enough for a University- to me. The graphic elements are HUGE and there is SO much information competing for attention. I feel the site needs to be more subtle with less movement to be effective.
Here is a magazine site that looks good and has nice navigation:
http://www.interviewmagazine.com/
or NPR’s blog site:
http://www.npr.org/
March 30th, 2010
blech! Those sites are BORING! As a current Vanderbilt student, I don’t actually use the Vanderbilt homepage that much. I know the links to the main things I use. On the other hand, BEFORE I came to Vanderbilt, I was using the site all the time to find information, and sometimes that could be difficult. I love the new layout, and I think it’s time for a change!
March 16th, 2010
Wow! I love it — especially the mega-drop downs. They give the home page breathing room, which is so hard to achieve on an extremely complex site. And it’s so clean and current feeling.
March 16th, 2010
This is a fantastic start – it looks very polished already – good work you guys!!!
I love the mega dropdowns. As a user that style of navigation is really easy to use. Nice treatment on the gold too, I know it’s always challenging to make our colors seem new and fresh with each website redesign.
March 16th, 2010
This site feels very welcoming, which is important for a University homepage. I think the information density is good, and the “mega dropdowns” are definitely a plus. I’m glad you held onto the large photograph area :-)
One little thing — I noticed that the search button looks a little bit like it’s disabled (and you can’t actually click through to it on Firefox for Mac) :-) A trifling thing…
March 16th, 2010
Search button … good point, Ryan! This is updated!
March 16th, 2010
This site is very fast and efficient. It’s definitely an improvement over the previous version.
March 16th, 2010
I love the mega picture block at the top with the captions. Any thought on labeling the VUCast section VUCast Video? It might help people to understand the brand… especially since there’s a separate News section. Also, any thought on making the words Events, VUCast and News direct hyperlinks to those pages? Lastly, you have a gold bar and a faint block around events and news, but not VUCast. It seems like that VUCast section is kind of floating down there. All in all, you’ve all done a fantastic job!
March 16th, 2010
Events, VUCast and News … those should be links, indeed!
March 16th, 2010
I LOVE the drop downs. I’m in and out of the various schools all the time and this will save lots of time.
March 17th, 2010
This was definitely one of the areas that will most benefit from the mega dropdowns. The second level colleges page was almost entirely used by people wanting to go directly to a school site. This way … they can accomplish that from the homepage!
March 17th, 2010
Looks great. set-up, like the text color change with rollovers- could not find how to reach ALUMNI, currently it is listed on homepage – which makes giving possibilities invisible as well –
really like housing ALL links related to “faculty-staff” in the faculty staff tab
March 17th, 2010
Alumni, Giving, Libraries, Parents, Arts, etc … are all in the secondary nav. Analytics (and search term analysis) have shown that most visitors to those sites aren’t getting there from the homepage… (most of their traffic is DIRECT traffic – from emails, mail, etc – they’ve really well branded their URL that users go directly to their sites!) That said, those links are still very important and need to have a presence there, thus they have a place in the secondary nav on the lower part of the page. We’ll definitely look over this in usability testing in the coming weeks!
March 22nd, 2010
The dropdowns are a great improvement, but it looks too much like a generic social-media-esque site…some attention should be paid to keeping Vanderbilt’s image academic, sophisticated, etc. — not just tech-savvy. Maybe a mixture of serif/sans serif fonts, as well as making the tabs more attractive?
More specifically — maybe remove the shading/gradation of the horizontal bars? Changing the tabs from the large mixed-case font to a smaller, perhaps small-caps style would be more understated and appealing.
And what about keeping black or gold as a background color? The white looks unfinished (maybe it is…)
I really like the arrangement of the different elements — I think the graphical layout is excellent.
March 23rd, 2010
I’m with Madeline…I think the font and colors could use some work. The white leaves a lot of, well, white space which makes it feel kind of empty although it definitely is not.
The top bar has a larger-than-needed font that is a little outdated. I really like the current fonts on the homepage right now much more than the proposed page.
Overall, it looks good, although possibly a little too busy. I have always thought our website was better than other schools (the Emory University page has a lot going on, the Yale page is very plain, Columbia U has a good balance, but I think Harvard really is the best with visual appeal and navigation).
Good work though!
March 30th, 2010
@Lauren
While the Harvard site is pretty, it is also useless in that it essentially has no meaningful, consolidated navbar. Also, it suffers from our current site’s problem of unending lists of links on the second level pages.
However, I agree about the font, the problem is, that with websites there are only a few fonts that are safe to use. It appears they have used: Arial, Helvetica, sans-serif (you can see the options here: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web). I’m partial to Trebuchet and Veranda myself. Arial is only outdated because the brainwashing team at Microsoft decided it was, and gave us new fonts back in Office 2007, so I just prefer to call it abused.
March 30th, 2010
@Lauren, @Eric and @Madeleine … we’re playing around with using some serif fonts for section headers and some page titles. Stay tuned :)
March 30th, 2010
I noticed something else…
There is no prominent vertical element on the homepage (the second level pages have the sidebar) so there is nothing to draw the eye down the page. On the current site the left menu, the color variation and the boxed nature of the page accomplish this.
March 30th, 2010
First, I like the general direction this site is taking. I like the fresh colors and the continued revolving images. I also like the footer with the links to the social media sites and I love the header and the mega menus. The “news” and “events” are much easier to read now.
But the site does look like a blog, and the two navigation bars seem a tad too “tall.” The picture on the second levels is rather large and the size font for the caption seems out of place. I remember a time when Vanderbilt tried to separate the two navigation levels and it just didn’t work: the bottom bar always got lost or forgotten. Hopefully that won’t be the case, or maybe something to draw attention down the page will help (referencing Eric’ post on 03/30).
March 31st, 2010
I think the instant dropdown of the MegaMenus from the top row of tabs takes away from the other content on the website. A user will enter in the web address at the top of the browser, and then after the page loads they will bring their mouse down across the screen. The clicker has to pass over that top row of tabs, and a dropdown menu instantly opens up, blocking the user from seeing the majority of the website. I think that these drop down menus should have a short delay, even half a second, so that if someone is moving their mouse across the row of tabs to content lower on the webpage, their experience will not be interrupted by a large ‘megamenu’. However, if someone does know that they want content from one of the drop down menus, the must only hold their mouse there for a fraction of a second and then the menu will appear.
Otherwise looks great!
March 31st, 2010
I think the mega dropdowns will be very user friendly.
The photo captions on the homepage (vertical, on the left) are easier to read and less obscuring of the photos than the ones on the second level page (horizontal, almost at the bottom of the photo). Is there any way to have the captions pop up rather than slide in? The sliding captions, especially on the second-level page, seem a little busy.
The design is very clean, if perhaps a little generic. More black and gold, especially as vertical visual elements on the left and right of the page, would punch up the VU identity and the visual impact and would guide the visitor’s eye downward to the bottom navigation bar, which seems marooned at the bottom of the page.
Some of the black looks more like charcoal gray — that gives the page a softer “feel.” On the other hand, more contrast between (darker) type and (brighter) page background would make the text easier to read.
You’ve managed to cram a huge amount of information onto the page without making it look crowded. Neat trick!
March 31st, 2010
Hello,
I think this design is a good improvement in usability. Congratulations on the navigation elements.
It may be the lack of variety in font and color which is causing the comment that it looks like a blog. The color palette is probably too limited to keep one’s interest through the second level–it can be useful to have a secondary palette to differentiate content areas. Here you’re using a shade/screen effect to try to create that interest in the content boxes. Gray is gray is gray no matter what shade.
Likewise, the font is all arial-like and all of it is on the large size. a secondary font type with some smaller headlines would help. I like the direction we’re moving in. I suggest looking for refinement in color and font styles/sizes along with avoiding rounded corners on text boxes (another blog feature).
March 31st, 2010
On the secondary page, Administration listing….where is Health Affairs and DAR? I think all of the Vice Chancellor areas should be listed and consistently formatted, either “Division of ____ ” or “Vice-Chancellor of ____” as titles. You list General Counsel for David Williams, but University Affairs is omitted, so that’s incomplete information.
I’d prefer the bars that run left to right were alphabetized by category name, making searching for the item you want easier. At first glance, I thought you had left off Medical Center and DAR totally.