• Now based on grids (thanks Mark)
• Visible access keys
• A high contrast layout
• High contrast layout is accessible from the whole site

So, small things hopefully in the right direction.

## Design
This is the updated Nordea design, this project is the first site to go public with this design.

We used the new Nordea design that has been developed during this and last year. This is the design that hopefully all Nordea websites will use in the future. This is quite a large job so it will probably take a few years for this to happen.

The design had the purpose of make the top brand area a bit smaller than it is today. There was also an need to make the main navigation larger and easier to see. The local navigation (left menu) has also been slightly modified for better usability.

The design for the new Market Information is a modified version of the upcoming design. We changed a few things for this project to make it work better for this kind of information and structure.

* Instead of 12 px Verdana we used 11px.
* The local navigation (left menu) do not have a cascade menu, mostly because the site was very shallow.
* The frontpage uses a two column design with equal width.
* The “Handla direkt” dropdown is only used on the public page (was added after I left)

On this site we uses tabs extensively, the tab code was something we was amazed when we first found it at A list apart. We had made several tried to make accessible, lightweight and easy maintainable tabs with no luck. Douglas Bowman, we really owe you one.

## Webstandards and the rest
When we started to make the new design we wanted the code behind it to top notch. We developed the framework that would work in all kind of different platforms and services.

We used the famous “learn the user about webstandards” link used on many sites as Wired as example. Problem is that there is only an empty link at the moment, maybe this will be fixed later. (hint, hint)

## Font sizes and typography
We used the mixture between ems and percent. We used a technique described by this insane guy that has some screenshots for you.

The font used are Verdana for Windows and Macintosh, Linux gets Lucida or Helvetica if it does not have Verdana installed.

* http://www.codestyle.org/css/font-family/sampler-UnixResults.shtml
* http://www.realworldstyle.com/fonts.html

## The CSS files
If looking at the first CSS file you might wonder why there is so many files and all the versions. I’ll try to explain how it works.

First there is a loader or jump file. This file is loaded by all browsers. This file then loads all the other CSS files. The naming I used was first the media, then common or local. The common version will be used for all Nordea websites, then if there is a need to change something in a local site, like this one we added the stuff in the local file. By doing it this way we could separate all changes into the local files making it easy to maintain. All Nordea sites as intranet, open and secure and applications are to use the common files in the future, hopefully.

There is also a few “hack” CSS files for IE Windows and Macintosh.

Here we used a few resources as inspiration.

* www.informit.com/articles/article.asp?p=170511
* www.stopdesign.com/log/2004/07/06/filtering-CSS.html
* www.tantek.com/CSS/Examples/

All the CSS layouts are based on the commonly used body id tag technique. I think I first read about it in the Project Mars PDF by Peter Ottery where he described the redesign of Sydney Morning Herald and Age sites. By using an id on the body the layout could all be changed with just one change of id. Very clever technique.

* fp1col = frontpage 1 column
* fp2col = frontpage 2 columns
* cp1col = contentpage 1 column
* cp2col = contentpage 2 columns

If looking at the main screen CSS file
you can see how the content is grouped, it first has an appendix where I try to describe the different parts of the CSS. Also by using numbers I could easy search for stuff. Just hit CTRL + F and search for a specific part of the CSS. Here are some other readings about managing your CSS files.

* http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html
* http://www.digital-web.com/articles/architecting_css/

I know that the file is quite big, a optimization could be good but we also wanted the file to be as readable as possible by others than us. As there is a lot of others working with the same files I did not want it to be to complex for them to read and work with.

## Functionality
When we started with the coding of the front-end code we also wanted the functionality to be separated in a external file. As I or the rest of guys that I worked with was not an JavaScript guy we asked for help from IT. We wanted as many generic functions to be the same in a separate file. We found that print, open new windows (popup), close window and back links would work for this. The script now searched the page for certain classes and id. If found, functionality is added to the link, like the print link in the top part of the page.

## Accessibility
We used common accesskeys to common places like search, main content, front page etc. The accesskeys used was taken from the e-nämnden recommendations (new window, PDF, Swedish).

I added what I call an accessibility box, it’s hidden for normal users but read by screenreaders. It uses the off-left trick.
The box contains links and acceskeys to different parts of the page but also to the front page etc.

## Other media
The website has an printer friendly version, most pages will look fine when printing. There is also an handheld version using the handheld media CSS. This version is not really 100% completed.

## Thank you

This was a great project with a lot of great people and great collaboration. It was great to work with standards and CSS based layout for a site that is more like an application and not just an ordinary information site or blog. Of course would I like to fix a few things when I look back at it now, but that how it always is.

* All the people at Visual Identity and Trademark (Ulf, Marie, Arne, Richard)
* All the people at Development and Tools (Daniel, Malin, Frode)
* All the people at SIX (Tommie, Daniel, Linux guy)
* All the people at Markets
* All the people at IT (Ylva)
* All the test persons

There is also discussion over at markboulton.co.uk where you can find more links to styleguides.

## Styleguide examples

### Corporate web styleguides

SUN

BBC

IBM

Silverorange

### Universities, authorities and goverment web styleguides

AMS (Swedish)

Bundesregierung (German)

Bundeswehr (German)

WDR (PDF, new window)

NYPL

FSU

NYU

BCBSNC

Hampshire county council

A long list of university styleguides

Skatteverket (Swedish), where I work was elected the best Swedish government website this year by the Internetworld magazine. Today we are celebrating with cake Take note that the site do not follow web standards, is using frames, do not validate and have a lot of accessibility problems These are things that we are working with and will fixed.

The site was elected from these five criteria.

* The use of internet in a new creative way
* The quality of the content
* Structure and navigation
* Design
* Clear sender (remitter)

Webben är Skatteverkets bästa fönster. Sveriges bästa myndighetssajt har enkel och tydlig design som gör det lätt att hitta rätt. Tjänster för skattejämkning, företagsregistrering och deklarationer gör att Skatteverket fullständigt sopar banan med Myndighetssverige. Sajten utnyttjar Internets interaktiva fördelar fullt ut med e-tjänster som räknar ut skatt, taxeringsvärde och förmånsvärde för bilen. Det fullmatade blankett- och broschyrarkivet är en fröjd för den ordningssamma och frågetjänsten via mejl är effektiv.

A loose translation.

The web is Skatteverkets best window. Swedens best government website has an easy and clear design that makes it easy to find. Web services as skattejämkning, company registration, electronic income-tax lets Skatteverket do a clean sweep compared other government websites. The site makes use of the interactive parts of Internet for the electronic services as calculating tax, tax values and car benefit values. The huge form- and brochure archive is great for for people who like order and their contact form by mail is effective.

Sometimes I get so surprised when I visit commercial websites. Take this for an example. My girlfriend and I are in the plans of moving to an new apartment, we have been looking to buy some new stuff for the upcoming kitchen. Last weekend we went to a store to look for a fridge and a stove. The store had some great stuff and we found a brand that seemed to be a bit more exclusive and we really liked the design of the stove. The store also had an really exclusive 100 page brochure for the specific brand. The brochure contained the usual stuff like front pictures of all their kitchen equipment, some environmental photos and all the technical things at the end. The last page also told me that they had an online website. Great I thought, I look it up when I come home.

So, now I am sitting by the computer at hit the URL into the web browser. I think exclusive, trendy, nice looking photos and some other information that I did not find in the brochure.

This is what I saw when going to the Swedish site of Smeg.

It is really amazing that a commercial website like Smeg can have such a low quality on their online communication. Scanned pictures from their brochure, no information at all. Frames, frames and frames and messy tag soup. Looking at their other website, for example the Italian version it is a bit better but not much. Anyway, it does not fell exclusive at all, what do you think?

The thing is that I see this on a lot of other site too, it is not just this Smeg that I write about now. Is it not amazing that there is so many large companies out there that have really bad quality websites.

I really wonder why?