xhtml | css | DesignThe republic of Jens Wedin (with me as the president)

Well, it is not new, I just did an update, you know evolution, not revolution. I tried to achive a few things by doing this.

• 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.

One of the last projects that I worked on when working for Nordea was launched this spring. A market information service (Swedish) for their public site, the secure bank service and the intranet. All site uses the same design and code, it only differs in content, intranet having most and the public site the least. The project was a collaboration between the people at Nordea Markets who needed the new service, Nordea IT, Nordea communication (where I worked) and SIX which build the backend code and deliver all the content.

## 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

Here is a bunch of design resources including fonts, Photoshop brushes, sounds etc. Very nice collection. (via)