eduWEB 2009: “Higher Style for Higher-Ed Web” by Stewart Foss, edustyle.net

Notes from presentation …

What is the purpose of your homepage?

Help users find information that they are seeking.

Most of the room is the “jack of all trades web person at our university”

And does it look good while its doing that?

We all have websites and they all have problems. Demolition is the go to solution – rebuild.  In many cases, the best thing to do is tear it down but in the majority the best thing is to fix what’s wrong: incremental redesign. Research, tweak, repeat.

It’s easier to ask forgiveness than to get permission. (But you shouldn’t need forgiveness)

Step One: Research

Something to go back to to explain decisions

  • articles, books & conferences
  • web statistic data
  • surveys
  • user testing

Introduce your institution and its strengths

University of Mary Hardin-Baylor

  • girls
  • football
  • purple

What is this university really about?

Biola – tagline that identifies a unique aspect of the school.

Also, a nice simple succinct paragraph that introduces your school – UTennessee Noxville. http://www.utk.edu/

The Banner

Flash or Ajax, typically. This is prime real estate.

Notre Dame – carousel.  Using the space for useful things – interesting stuff that is taking place at Notre Dame.  Changes on a regular basis.  Could you use your banner better? Could we send some messaging out?

Washtenaw Community College – promoting valuable things at the school

uTexas Office of Communications page.

Banners: you need to fill them with stuff.

Ideally you have a photographer on staff, but not many people in the room do.  Cheaper than hiring: you can get a good camera for about $400.   (USD) The beauty of digital photography is that it doesn’t cost you anything to try it again and again and again.

Try crowdsourcing to students who are passionate about taking photography. UWO uses a flickr box on the homepage to bring in crowdsourced content.

Tip: Taking your own pictures? Avoid situations that will need a falsh.

Navigation

Lenoir Community College.  Every day we fight battles about what goes on the homepage.  Our job is to be the gatekeeper – and turn 90% of people away.

Over 50 links on Lenoir’s page.  5 navigation systems, in groupings that don’t exactly make sense.  “I don’t see why these links are different from those links.” Remember, goal of the homepage is to get people to the information they want to get to.

Logical groupings, with headings.

University of Oxford – you will probably lose a lot of the homepage battles.  uOxford makes the page simpler by grouping the homepage links.

Boston University – another example of a page with many links, but grouped in logical groupings.

Ideally you don’t have more than 10 links on your homepage, but in higher ed, this isn’t the reality.

Search Placement – navigation is not going to work for everybody.

Search box is expected in the top-right corner.

a:link

Web is made up primarily with links – their design is a critical part of web design.

They don’t always need to be blue with underline, but be cautious each time you break this guideline.  Persistent navigation is an area where it is often ok to break the mould.  Also, feature areas.  In-text links should at least be underlined.

Critical to use the a:hover state. Reaction when touched.

Colour: use with caution

Very dangerous unless you have a background in colour theory or design.  And most of us don’t have that.  When it’s great on a jersey, or on a fan’s chest – it won’t necessarily look great on the web.  Your school colours were chosen before the web came along.

Indian Hills Community College – eek.

USC Rossier – stronger use of the same colours. It’s not always the colours, it’s how you use them.

Sometimes, adjust colours slowly – go into photoshop and move them down and to the right – just don’t tell the brand owner.

Rossier used a gradient (red to red) to create warmth and depth in the top of the homepage.  Monochromatic gradients help you have a nice site in spite of your school’s colours. Use them as an accent, not a background.

Step back and look at your colours – what emotion to they evoke without text or design or layout.  Pick colours that go with the message you are trying to put out there.  See if you can use complimentary colours to balance difficult official colours – i.e. a brown to a yellow.

Use Color to Separate Content

Champlain College- nav, banner, content

Oklahoma Wesleyan – top, bottom

Spacing & Fonts

Higher ed websites tend to be text heavy, and your spacing/fonts play an impact on readability of your site.

Line height: Increase line height slightly – makes it easier to see individual lines of text.  Too tight blurs the lines together.

Headings, Lists, Bold, Italics, etc: Web content 101 … Use colour in headings, create your own default bullet with some colour.

Wesleyan (About Us page): Has some of the spacing issues.  Tight spacing creates a feel of business.  Add height to top nav and increase font size.

These are little things you can do without the hassel of a redesign.

Recommendation: Consider every element.  Don’t do anything because everyone else is doing it.  Look to people for inspiration but don’t follow them off the cliff.

Consider whether you have the content/staff time to maintain a new element.  i.e. newsfeeds aren’t so great when you have no news.

Don’t look to just one source for inspiration.

Recomended sources: Edystyle.net, BlogHighEd.org

Dezinspiration, Most Inspired, Smashing Magazine

How to spot a good web designer:

Look beyond “looks” – usability considerations are good cues that the designer was thinking about every element of the site, and how they are used.  Look at their sites, ask them questions about usability.

Height of a homepage banner: screens are getting bigger, mobile browsing is very small (and getting more popular).  If the space is used effectively (communicates, drives into content) then it isn’t too big.  “Above the fold urgency is fading, people are more willing to scroll.  Most important stuff should be above the fold – so if banner takes it all up, it better be important.

Fixed layout vs elastic layout: Steward leans more towards a fixed layout, primarily because of line length. Maximizing can create a verrry long line length, which kills the purpose of the page which is to be read/consumed.  Also much easier to design for fixed (no background images that tile, or boxes out of place).

Designing for mobile environments: Research is important here – use your stats. Check your analytics.

Adding social media right up front on the homepage: Oklahoma Wesleyan – live twitter stream on their homepage.  Skittles disaster … Bare minimum is to have the social links.  Penetration is mostly facebook.  Twitter is getting more mainstream, still a niche thing.  Flickr is very niche.

1 Comment

  1. As an alum of Indian Hills Community College in Iowa, I have watched with horror as their website has continued to look like something out of a bad 1990’s web design horror flick.

    I do think it’s cool that I went to a school that was used as an example of what not to do 😉

Submit a Comment

Your email address will not be published. Required fields are marked *