Redesigns archives

June 23, 2008

LSA Portal Redesign Comps

I'm several weeks late in posting this, but here are a number of comps for the upcoming redesign of the LSA portal.

Notable: the design is staying in the 800x600 browser space. The designers are going for some pixel perfect alignment, which is sure to break in many browsers. Text size is tiny and often low-contrast. Visual hierarchy is a bit strange, but I love the new use of color.



I asked the devs whether any focus groups with students, faculty, staff, alumni (especially elderly alumni!) were held, but I haven't got a response yet.

I also wonder if there has been a styleguide written in parallel to this redesign (I know my college certainly doesn't have one yet).

Posted by hampelm at 01:58 PM | Comments (0)

May 09, 2008

Arts on Earth

Arts on Earth is a relatively old launch, but I missed it, and it's completely worth highlighting for several reasons.

Michigan Marketing and Design built the site, and it has some of the best code and design I've seen come out of that shop in a while:

The homepage opens with great art, clear navigation, and well-formed code. In fact, the whole page takes only 53 lines of XHTML-strict.

The most obvious problem is that the front page doesn't describe what Arts on Earth is. Even a few sentences could solve that and lead deeper into the site. However, with the well-designed navigation, this may not even be an issue.

To find out if visitors are indeed confused, the web developers could look at their analytics. If a large number of visitors only view the homepage and do not continue to sub-pages, adjustments to the design may be in order.

Sub-pages are also well-designed and well-coded. Take the news and events page:

Text is set consistently with Lucida Grande in fixed sizes: 10/11/12/18px (a fixed font size may still be problematic for some users). The face is cleverly varied -- uppercase, italicized, bolded, set in red and blue -- to create a great look. The variations are not random, though. It's clear they were thought through and reflect the structure of the page. Some headlines are set in Georgia, a nice contrast.

The web developers certainly knew their business; the XHTML is clean and semantic. I was pleasantly surprised to see they went the extra mile to add a print stylesheet. The CSS could be condensed a bit -- the same font property is repeated many times, when it could just be used once in the body selector.

Missing from the site are newer features such as an RSS feed for events and news. The Sign Up page offers a way to receive updates, but the "Join our e-mail list" link just opens a blank email to The maintainers could add clearer instructions on how to join the list -- or use a free third-party email newsletter management service that offers a simple signup form, like Campaign Monitor or FeedBurner.

All in all, an excellent new site that many developers (me included!) can learn from.

Posted by hampelm at 11:04 AM | Comments (0)

Great redesign: a helpful search bar

Information architect Lou Rosenfeld has written about search analytics, highlighting how a small number of popular search queries account for a large proportion of total searches. His (quite logical) advice is to make those topics easy to find.

The University of Chicago recently redesigned their central site,, and they added a list of frequently-requested pages to the search bar. The list appears only when you click on the search field:
Search bar on showing contextual links to frequently accessed pages (directory, course schedules...) that appear when the search field is active

Posted by hampelm at 01:25 AM | Comments (0)

January 24, 2008

Germanic Languages and Literatures: LSA Development, Marketing, and Communications strikes again

LSA Development, Marketing, and Communications strikes again with a redesign of the Germanic Languages and Literatures departmental website.

Witness this inspired use of the alt attribute:
SPACER example 1
and this one:
Of course, the big, important images have alt blank alt attributes.

Important hint: use a blank alt attribute (alt="") for structural images, and a descriptive alt attribute if the image describes anything.

I would write more, but unfortunately, none of the top-level links work at the time of publication.

Manged to figure out one of them:, which uses a non-degrading Javascript hide-show trick. Dubious implementation; the link to expand the information looks just the same as the title, which does not function as a link that expands the content.

Text is light tan on white, set close and small in Arial:
tan text on white

Posted by hampelm at 12:00 AM | Comments (0)

November 07, 2007

Office of Undergraduate Admissions

[the] Office of Undergraduate Admissions redesigned the undergraduate admissions website in 2007.

The site was built by Michigan Marketing and Design. There are no clues about the underlying content management system in the page source.

The site is built centered; the masthead is 980 pixels wide and the content 800, creating a shaft-capital, column-like appearance. The layout was achieved with 4 nested tables and some semantic HTML. Ten easily fixable validation errors were found on the front page, which is coded in XHTML Transitional. The type, Garamond and Arial, creates nice contrasts, but is always set in fixed sizes that occasionally trend small.

There are 23 top-level navigation links on the homepage, and none of them appear to lead to any new communication tools. No RSS or events feeds are available. The front page appears to be static content. The admissions staff does not post recent news and there is no visible two-way communication except for "Blogs en EspaƱol". (other colleges have added communication features: the U of Chicago runs a friendly blog with comments on; Cornell, student-published blogs)

Google Analytics tracking code is embedded at the bottom of every page, so the team can base future decisions on site metrics.

Screengrab from 7 November:
The University of Michigan Undergraduate Admissions website

Posted by hampelm at 05:16 PM | Comments (0)

School of Natural Resources and the Environment

The SNRE relaunched their website in September 2007.

Phil Ray writes that the site is based on Drupal, hosted through the ITCS Web Team, and built with help from the Linux Box, a local company.

The site is built flush-left with a fixed width of 940 pixels and set in Verdana and Arial at flexible sizes. Semantic code, not tables, were used to produce the layout. The homepage and three randomly chosen subpages all validate as XHTML 1.0 strict.
Google Analytics
and a download tracker script attached to Drupal's Google Analytics module.

Neither the homepage nor the news page offer an RSS feed, but the events page does (an ical feed would be helpful here, too).

Screengrab from 7 November 2007:
screenshot of the redesigned School of Natural Resources and the Environment website

Posted by hampelm at 04:46 PM | Comments (0)