Go Go Gadget GO Redesign

Just a quick post, really to explain the re-skinning of the GO navigation bar. We are currently developing a wiki that will eventually replace the intranet. The wiki will have the same look and feel as GO, so that we have a consistent style and user experience across applications. We also hope eventually to adapt other systems in the same way, online mail and Blackboard for example.

GO screenshot

My main aims regarding the GO redesign were really to add contrast and economy to the interface, and update the typography so that it reflects the current Edge Hill branding. I was also conscious that the old version was overloaded with unnecessary background images, which slowed down the application and caused the CSS to mushroom.

I will write a more comprehensive overview of the wiki design soon.

Changes to the Design of our Corporate Site

Over the last 5 months the :choice brand has evolved, and we felt that the current design didn’t relate enough visually to the developing brand.

The original concept of integrating the 2008 prospectus design and the corporate website design was sound. The prospectus has a visually bold magazine style; we hoped to develop a strong set of sub -homepages that mirrored this, the final pages however, lacked the impact of the printed ones.

New Functionality

New Sub-homepage layouts

We have worked with Creative Services to develop a grid-based layout that plays to the strengths of the web rather than print, which can be applied to our homepages. One of the primary :choice brand values emphasises the use of excellent imagery, we now have a measured, spatially uncluttered environment to fulfill this.

The grid works as a design pattern that can be applied to faculty and departmental websites, and can be easily adapted by other members of the Web Services.

example: Study Homepage

My:Choice Panel

Video and audio, image galleries, and staff and student profiles will feature in a panel with the My:Choice branding, which was established throughout the prospectus. This emphasises the experience of the individual at Edge Hill University, and also brings together multimedia content into a standardised interface.

example: Biology Course Page

Typography

The Futura font family is integral to the :choice brand. We have decided to use Futura Book Uppercase and Futura Bold Uppercase for headings. They are perfect for the web as they are clear at 72dpi and at smaller sizes.

example: Corporate Homepage

We hope that you like the improvements, feel free to leave a comment.

Choice Part 3: Design Objectives

Overview

The main objective of the redesign was to include the :choice branding, and to create a consistent visual association with the printed prospectus. We hope to establish a look and feel that will continue in forthcoming marketing campaigns.

For this project we have collaborated with Splinter, a Liverpool based design agency. We now hopefully have a style guide that works online and in print, playing to the strengths of both mediums.

Structural Changes

We have redeveloped the Study area of the site, News and Events, and the online prospectus:

www.edgehill.ac.uk/study
www.edgehill.ac.uk/news
www.edgehill.ac.uk/study/courses

Each area has a homepage with a relevant interface. Study for example is aimed at prospective students; it is for marketing the university and is very visual, highlighting the campus, facilities and student life. The Courses area only includes course specific search options, and information.

We would like every area of the site to have a strong and relevant homepage, this will be part of the next phase of the project.

Interactive Pages

Splinter have provided an interactive means of promoting Edge Hill’s facilities and quality of provision:

www.edgehill.ac.uk/study/life
www.edgehill.ac.uk/study/campus

We are hoping to increase the amount of video, audio, and interactive media on the site. Again, this will be part of the ongoing project.

Preparing for the Big Brief: CSS Sprites

In one of my previous posts I embarrassingly listed the use of Image Maps as one of Nate Koechley’s ten tips for making web pages load faster, what I meant was CSS Sprites.

We will be using CSS Sprites to organise common graphic elements in the Choice Campaign website. They are a really easy way of grouping buttons with their corresponding rollover states onto a single master graphic, rather than slicing everything up.

Taking an HTML element like a DIV, you specify its width and height with CSS. Then using the CSS Background selector, you set the Master graphic as the background image. Following this you offset the background image using minus pixel values along the X and Y axes so that the top left hand corner of your button fits the top left hand corner of your div. You apply these values to the hover state of an anchor to create a rollover.

There is a good tutorial on A List Apart: http://www.alistapart.com/articles/sprites/

This will save a lot of time when preparing graphics in Photoshop, and will reduce the amount of CSS I will have to write, leading to faster page loads.

Picture This

As a Web Designer I’ve been considering how we can improve the images used on the Edge Hill website as part of the ‘Big Brief’ project soon to be undertaken (which will look at a holistic approach to our communications). We currently have a wide selection of strong, professional photography. However they have mainly been commissioned for print based media, and we often
have to do a lot of work to make the images ‘work’ on the website.

When you transfer high resolution images to low resolution web-ready images, you can lose a lot of detail from the picture. Ideally I’d like for us to be able to compose pictures differently for the web as individual portraits or pictures of small student groups against an uncluttered backdrop work great online.

Reportage Style Images

Currently the majority of our images are in a “Reportage” style, by this I mean images of Students going about the business of being Students, without acknowledging the presence of the photographer. The images are natural, but they are posed, it is unethical to have a photographer hiding in the bushes!

These kinds of images are great for general purpose use, and they give a good impression of everyday life on the campus. The trouble when it comes to working with them in electronic format they are often inflexible.

Another thing that is noticeable is how quickly an image can date, furry body-warmers and Ugg Boots are very last year, and students notice these things.

As a result we really need to be constantly commissioning fresh imagery.

Portraits

Moving forward I’d like to see us having more posed portraits of students on the website, especially for areas where we are promoting Edge Hill to prospective students, and not simply providing campus information.

I am impressed by the Northumbria University site, which has a series of large group shots of students in rotation on the homepage. I think that the images have an aura of ambition and coolness, and reflect the atmosphere of Newcastle.

I don’t necessarily think this style would suit Edge Hill though, the Indie band style poses could be intimidating for some potential applicants but we could maybe consider something a little more upbeat and friendly?!

Adaptable Portraits

Like a lot of designers I tend to use Stock Imagery, this is mainly for speed and convenience. A lot of Stock Photos come on white backgrounds so that they can be quickly pasted on other coloured backgrounds or into a pictorial setting. They can also be used along side typography.

Of course a lot of stock portraits are awfully cheesy and blatantly American, so I’m sure we’d want to create our own adaptable portraits.

One of the main problems I have with tracing the images that we currently have is that they are often cropped in annoying places, an elbow is missing or the top of someone’s head is cut off, unless I create an airbrushed hairstyle in Photoshop, the portrait however attractive, is unusable.

Ideally I’d like to see us commission some images specifically composed to be used against various backdrops.

Subject Specific Imagery

We have some excellent subject specific portraits in some of our printed publications, but none that can be adapted well for the web. We have some fantastic pictures from the Department of Performing Arts, but we have hardly any for The Faculty of Health, this causes inconsistencies, and means that very important courses are visually underrepresented on the site.

So to conclude I’d like for us to consider:

    • Fresher reportage images of new students
    • General posed individual and group portraits of students on location
    • Subject specific portraits on location
    • Adaptable studio portraits on a white background that can be used with type

I’d Like to Teach the World to Sing (In Perfect Harmony)

Andy Clarke’s presentation at @media 2007 was concerned with international styles in web design, some interesting questions arose.

I was interested in why designers felt that they needed to conform to an international design style rather than adapting regional traditions in design to the web.

For example would an Italian designer look to adapt Giovanni Pintori’s classic typography for Olivetti to the web, or would they regard themselves as a world citizen designing in a universal medium where local traditions and innovations were insignificant?

Is there really an international style?

One thing I noticed when I started looking at CSS Gallery websites was that there appeared to be a specific look and feel to a design that wanted to say:

“I am a Standards Compliant CSS Website”

I feel that a lot of European designers began using American design styles because the first wave of Standards Compliant CSS Websites were American, and this trend has stuck.

The main difference would be in Typography, Europe gave us Sans Serif fonts like Helvetica and Eurostile. Whereas Americans’ prefer serif fonts like Georgia and Palatino. Serif fonts are now much more common in Europe.

Another striking thing about American design is a sense of history, a lot of contemporary design has a retro look, a certain early 60’s American Graffiti influence. The continuing vogue for logos with a flowing hand written feel like Coca Cola is evidence of this. Coca Cola incidentally have gone retro, and their new cans have simple flat colour and clean traditional type, rather than the recent fad for gradients and drop shadows, an interesting diversion.

Coca Cola Redesign

Americans also like to use a lot of texture and bring organic elements into web design, whereas European designers were always quite evangelical about white space. Nowadays Europeans’ have gone crazy about colour gradients.

One of the biggest American influences has been Apple Computers. Appletastic black and grey gradient backdrops are ubiquitous, as is typography with a faded reflection or shadow. It’s neat and tasteful, but it’s becoming homogenised. Websites don’t need look like an Apple product in order to appear more Web 2.0.

So I think there has been a move towards a universal style in web design. This could subconsciously reflect a medium without old rules and boundaries, but where is the variety?

@media2007: Hannah Donovan: For Example… (Part one)

Hannah Donovan is Head Creative at London based Last.fm, the online music recommendation site. Last.fm has been in the headlines following its acquisition by CBS.

I thought Hannah was the most refreshing and to-the-point speaker at the event. The audience quickly warmed to her when she used a rude word to describe MySpace.

The presentation emphasised the need to act quickly if you have a good idea, to be the first, even if your site is a little rough around the edges. Hannah used the phrase “Put perfection behind you”, as a designer I know exactly what she means, designers generally need to get over themselves. She emphasised that you should use “Broad Brushstrokes” and work big.

She asserted that “Form follows function”, that features, forms, and functionality needed to be user tested before any style is applied, to do the hard stuff first. I was interested in her opinion that you should not “re-skin” a website, that the design should be intrinsically linked with the functionality and that a re-design should only be undertaken if new functionality is introduced.

She recommended that we read Victor Papanek’s book Design for the real world, I have a copy with a nice Any Warhol soup can on the cover but I haven’t read it.

There was a short Q & A session after the presentation. A question that stood out referred to Accessibility on Web 2.0 sites that use AJAX, the women who asked the question used the phrase “Disabled people get to hear when the bins are put out, but miss out on all the sexy stuff” which was my favourite quote of the conference.

@media2007: Nate Koechley: High Performance Web Pages

This was a presentation for developers rather than designers so I was expecting a lot of information to go over my head, it did, but enough has stuck to write a short post.

Nate Koechley is a Yahoo! frontend engineer and designer based in San Francisco. The bulk of his presentation was based around a twelve step programme to create quicker web pages.

  1. Make fewer HTTP requests: This refers to combining style sheets and scripts to reduce the amount of communication between your browser and the server. He also recommended using Image Maps, which I thought were considered old hat, but for icon driven navigation I can see how this could work in reducing the need for multiple images.
  2. Use a CDN: this stands for Content Delivery Network, a way of deploying content from multiple “CDN nodes”. This is important for increasing the page load times on sites with a lot of traffic such as MySpace, which uses Akamai.
  3. Add Expires Headers to cached content: This allows control of caching mechanisms in your browser and is important for dynamic content which has to be downloaded repeatedly because it is not cached correctly.
  4. gzip components: gzip is a software application used for file compression with 90% browser support. I use Photoshopto optimize images for the web, gzip can apparently compress them by a further 50%.
  5. CSS at the top of the document: Links to external style sheets should be placed high in the HTML document, and use link rel=”stylesheet” rather than @import for linking.
  6. Move Script Includes to the bottom of the document: Links to external JavaScript files should be put after the closing body tag. This recently adopted practice is a necessity because page downloads are paused until an externally linked script is fully loaded.
  7. Avoid CSS expressions: CSS expressions were introduced in Internet Explorer 5.0 and it allows you to to assign a JavaScript expression to a CSS property. CSS expressions aren’t generally used by designers who enjoy the clarity of basic CSS mark up.
  8. Always link to external CSS and JavaScript files
  9. Reduce DNS lookups: You can reduce Domain Name System (DNS) lookup traffic by using multiple hosts, therefore distributing content via parallel downloads.
  10. Minify Javascript: You can compress external CSS and JavaScript file sizes by eliminating white space. You can use a tool called ShrinkSafe to do this or you can do it safely by hand.
  11. Avoid page redirects
  12. Turn off ETags: ETags prevent pages from caching.

@media2007: Joe Clark: When Web Accessibility is not your problem

Joe Clark is the author of Building Accessible Websites and is a former member of The Web Accessibility Initiative (WAI). He was dismissed from the working group for The Web Content Accessibility Guidelines 2.0 (WCAG 2.0).

He has since criticised WCAG 2.0 in the article To Hell with WCAG 2.0, and has formed WCAG Samurai, a group committed to making updates and corrections to WCAG 1.0.

There is obviously a lot of political baggage relating to WCAG 2.0 that I’m not in a position to comment on. I do however remember the presentation given by Gez Lemon and Patrick Lauke at @Media 2006 regarding baselines for WCAG 2.0. I was left very confused to why the document did not have specific examples of how guidelines should be implemented using HTML, they were instead “Technology Neutral”, so the guidelines could be applied across all formats including Flash, PDF etc.

I have tried to read WCAG 2.0 and found it impossible, although most W3C guidelines are pretty unreadable if you have my attention span.

So Joe Clark’s presentation was highly anticipated and its title When Web Accessibility is not your problem looked like a formula for further controversy.

The bulk of the presentation related to font-sizing and how although developers are responsible for the readability of their websites, they should not be expected to provide text resizing as part of the sites functionality.

Font resizing on a page is something the browser should do and does do, there are exceptions, for example Internet Explorer 6 does not resize text properly if the font-size or line-height is defined as a pixel measurement. Most responsible designers size their text in ems to combat this, and I’m sure will continue to do so for as long as IE6 remains the dominant user agent.

The second half related to the shortcomings of screen readers in understanding html abbreviation and acronym tags. Joe used examples of unusual acronyms to great comic affect, but I feel that this part of the presentation related to his interest in linguistics, their relevance to accessibility was a little tenuous. We will continue to mark up abbreviations and acronyms properly even if Jaws thinks that E. coli is an acronym.

It seems that most issues relating to accessibility are still very much our problem.

The presentation overran and this meant there was no left time for questions, I heard quite a bit of complaining and I heard a few unflattering references to the size of Clark’s ego. I found the presentation informative and funny, I didn’t learn many new tips to help make the Edge Hill University site more accessible, but I did learn a little about the quirks of Assistive Technology software and the politics of W3C.

>