Links from the presentation:

Articles/Presentations:

• Death of the Relaunch
• Incremental Redesign – A More Manageable Approach to Improving Your Website
• Agile Manifesto
• Site evolution
• The Three Hundred Million Dollar Button
• Tweak of the Week
• Good Designers Redesign, Great Designers Realign

Books/Resources:

• The eduStyle Guide to Usable Higher-Ed Homepage Design
• Homepage Usability – 50 Homepages Deconstructed
• Don’t Make Me Think & Rocket Surgery Made Easy
  • 3 Free Chapters from the 1st Edition on User Testing

Services:

• Higher-Ed Website Reviews by eduStyle

Software:

• Silverback
• Techsmith – Camtasia & Morae
• Userfly

Podcasts

• EDU Checkup
• Unmatched Style

Things to see:

• The New Yorker covers
• Archive of Google.com

Below is a guest post from Roger V. Skalbeck. Roger is the Associate Law Librarian for Electronic Resources and Services at Georgetown Law Library and author of the Law School Website Design Study 2009.

–

During the beginning of 2009, I coordinated a project to collect and annotate screenshots of every law school homepage in the United States, as well as two in England.  This is the Law School Website Design Study 2009, which you can download or read online for free. There’s also a copy available to purchase from Lulu.

All total, this collection includes information on 203 schools, including a dozen data elements for each site.  Included with each law school profile page is demographic information, such as U.S. News ranking, student and faculty data as well as school tuition and library collection demographics.

Within the report, there is also a collection of site design elements with short exemplary collections of favorites icons, slogans, logos, and site search features.

Following are three design insights based on data collected for this project.  By looking at all pages from a specific academic discipline, this gives a useful overview of the state of higher education web design today.

Many sites use CSS for layout, but HTML table layout is far from “dead”.

An equal number of sites use HTML tables for site layout as there are those using pure Cascading Style Sheets (CSS), with 38% each.  The remaining 24% of sites use hybrid layout approaches, where these schools use at least one HTML table to present information on their homepages.

Pixels Dominate for Container Sizing

More than 90% of the sites in the study use a pixel-based measurement for the main site container.  Some designers may prefer using a proportional sizing such as percentages or EMs.  Especially when designing in the days of Internet Explorer 6, this was the best way to create content that could be resized in the browser.

The problem with proportional sizing is that it can be tricky to implement and hard to control.  This is because proportional sizing can create compound problems when nested <div> containers inherit properties and scale content up or down.  With a design that uses the full screen width, this provides flexibility for viewers with wider monitors, but it often creates longer line length and can result in unwanted white space.

760 is the New 800 and 850 is Average

Long, long ago, 800×600 was a common reference size for web designers, as this was the default resolution for many computer monitors.  Nowadays, very few screens are restricted to just 800 pixel display widths.  Nonetheless, over half of the pixel-based sites in this study constrain content to 800 pixels or less.  A dozen sites are implemented at exactly 800 pixels wide, and twenty-seven sites are just 760 pixels wide. From the 187 sites defined with a pixel width, the average width was 850 pixels.

If you have comments or questions about the study, please let me know.

In my time running eduStyle I’ve seen some common mistakes across many sites in the gallery. Lots of these revolve around the space between objects. So I though it might be useful to quickly cover 3 types of spacing that can easily improve your websites. For some of you this may be beginner information, you can probably skip this post. This post is for those that don’t really know much about margin, padding and line height. I’m not going to go into a lot of detail here, but I’ll show you 2 quick examples of each, one done wrong and one done right. I’ll also include a little code sample showing how to apply these to your pages.

1. Margin
2. Padding
3. Line Height

Margin

Margin is the space outside of objects. Images are the typical offenders. You’ll know there is no margin when you see the text in a page smash right into the side of an image.

Example of a page with an image floated to the right with no margins.

Easy fix. If you have an image in a page floated to the left or to the right (what is a float?) you are going to want to add margins to the side opposite to the direction it is floated or aligned. You may also want to add margins to the top and bottom of the object as well. So if you have an image floated right you’ll probably want to add a top, bottom and left margin to get some space from the text wrapping around it. If you are floating the image right, add the margin top, bottom and left. If the image isn’t going to left or right, you’ll want to add top and bottom to make sure the text below and above aren’t squished against it. You can add the CSS code to do this in any one of 3 locations:

1. External style sheet
2. Between style tags in the head of the page
3. Inline in the tag for the image (or other object) you want to ad space to

Both 1 and 2 are done in basically the same way, so I’ll cover them together.

External style sheet or between the style tags in the head of the html document

First add a class to the style sheet or between the style tags in the head of the document:

.floatright {
    float: right;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

Assign that style to the tag of the element you want to add the float and margin to using the class attribute:

<img src="images/myimage.jpg" class="floatright" />

The result will be something like this:

Example of an image floated to the right with margins

Inline in the tag for the image (or other object) you want to ad space to

You’ll add all of the CSS code inside of the style attribute of the object.

<img src="images/myimage.jpg" style="float: right; margin-left: 10px; margin-top: 10px; margin-bottom: 10px;" />

The result will be the same as above.

If you have any questions or anything to add, please leave a comment. Next up will be part 2 on padding.

Thank you for all that participated in last week’s Open Thread. It was a great success. Sounds like most of you use commercial CMSes and like the flexibility of it, but sometimes get frustrated with the workflow.

This week we’re gonna switch gears to a topic more dear to you designers. Design Trends!

Looking back at the last 12 months…

1. What do you see as the biggest trend in higher-ed? Is it good or bad and why?
2. Any trends you are happy to see going?
3. What trends should others follow/ignore?

Web designers and developers are an arrogant bunch. We’re personally invested. We pour ourselves into the work. We call it an “art.” And we tend to flip out when clients want to ruin it:

Could you have a little animated wooden horse slide onto the screen, and then a bunch of little people drop out and attack the logo?

I swear, a client actually asked for this. Some part of my “I have to manage this budget and schedule” brain died that day.

Not all requests are quite so bad. But most of them indicate a far deeper problem: clients focus on the wrong things. Whether your clients are faculty members, administrators, your boss, or even yourself—as soon as we start talking design, everyone turns into a designer.

Design is sexy. It’s exciting. And people are opinionated, so they voice their opinions (hint: be careful about asking people for their opinions on subjective matters). But as designers and developers and writers and marketers, it’s our job to point out the obvious: a great design won’t make a bad website a success.

So what makes a website successful? That’s the question you should ask on day one. And every day after, you should hold your decisions up against that goal: will this [design | paragraph | technology] help or hurt our chances of meeting that goal?

In higher education, like most industries, we’re not here to win awards. We don’t have to wow the visitor and impress them with flashy designs or interactions. That’s not why we’re asked to make the website. And that’s not why our visitors visit. The website has a real goal that aligns with a real business objective (e.g., make money, recruit students, or get donations). And everything we do for the website should start and end at that goal.

So for big projects, I’ve started asking clients (or our team) to come up with a mission statement. Not for the organization, but for the website itself. A simple, clear statement of why the website exists and how it will be measured. What’s the point? If you can’t answer that question, then all the animated horses in the world won’t do you any good.

I was working through some research for the book and some year end numbers and thought I’d share some of it. This is a collection of just the navigation systems from the top, as voted by users, redesigned site from 2008. I had to scale some down to fit into the post.

An interesting discussion started on the University of Texas of Permian Basin the other day. WebmasterNeal raised a valid question about the effects of a site like eduStyle on diversity on higher-ed design:

“That is one of the problems with edustyle is higher ed web designers come here for inspiration and what we end up with is a bunch of college websites that look the same.”

I have previously blogged about the dangers of borrowing too much from any single design, so I’ll skip the rehash and just refer you to my previous post on the subject (see Great designers … limit their stealing). What I wanted to do here is pose a few questions to the community:

• Is there enough diversity in higher-ed web design?
• Are similarities between higher-ed home pages a good or bad thing?

I’m interested to hear what the community has to say on the topic, so please keep the conversation going.

I have been running back through some of the sites that I have vote for over the last year. Many of them have been recognized by the community but there are a bunch that, although they are top notch, have been forgotten. Here is the first part of my series of forgotten favorites.

Hiram College

I have no real complaints about this site and can’t really understand why it doesn’t have more votes for it. It was ahead of it’s time when it launched in 2005 and has held up beautifully over the years.

University of Denver

I think the layout and use of colors on this site is great. It does get a little busy and have a strange thing going on with the mixed fonts sizes and faces. I also really don’t like the use of bold in the left menu as it busies the whole are up, but overall it is a very nice site and deserving of a few more votes.

University of Notre Dame – Department of Theology 

I’m a fan of most Notre Dame sites. I especially love the use of the stained glass window as a basis for the colors of this site. The layout is a little unorthodox (no pun intended) but the overall feel of the site is pleasant.

The organizers of the 2008 HighEdWeb conference are having a competition to design the 2008 conference website. They have just released the details of the competition. The theme for this year’s conference is Infinite Solutions.

The winning individual or team will be awarded a $200 prize at the conference and get recognition in the program and on the website. This is a great opportunity to showcase your talent. You can read more of the details and submission requirements on the conference website.

There is a well known article by designer Cameron Moll called Good Designers Copy, Great Designers Steal in which he encourages designers to not reinvent the wheel with each design. It is good advice, but if you stop reading the article at the title you are bound to get yourself into trouble. He ends the article with the warning:

This article wouldn’t be complete without a warning to be careful when copying well-known sources. If I were to summarize this warning in one sentence, this would be my golden verbiage: copy the inspiration, not the outcome.

A few days ago Eric Stoller posted a comparison of Virginia Tech’s homepage and Oregon State University’s College of Engineering on his blog. He noted the obvious similarity between the two designs (I won’t repeat it here, he does a great job of breaking it down). Well according to his source the copying is confirmed. This is embarrassing for all parties involved.

So how do you avoid this in your own designs or on sites you manage? Here is my advice:

1. Use more than one site for inspiration. If you rely on one site for all of your ideas you are bound to slip too far down the copying slope. You may not even realize it until it’s to too late.
2. Limit your inspiration from any one site/page to portions of the site/page. Cameron Moll calls this “Nodes of Inspiration” in a follow-up article on design inspiration.
3. If you are hiring someone, contract your designs to people/companies that will either know better or that you can trust not to blatantly copy. Plagiarism is usually an amateur mistake or the practice of an unethical person/company, so think twice before you hire. Cheap or free design work can sometimes be very costly.

Now go get some design inspiration. Here are a few of my recent favorites in the gallery:

• George Mason University – Think. Learn. Succeed
• Biola University – Student Life
• University of Notre Dame – Preserving the Traditions – Notre Dame Stadium

If you have any advice or lessons learned on the topic, please leave a comment.