Ariadne Designs

The process I use for designing a website using CSS is a three stage process. This process could be describe as Measure, Draft, Refine. The three stages are as follows:

• Sketch the design and work out all the measurements for the page.
• Put together a rough draft using div tags, referenced by id in the stylesheet, for unique areas of the screen. Use DIV tags with classes in the stylesheet for repeating areas.
• Solve small stylistic and browser issues and complete stylesheet

Here is a working example of a 3 stage design process. The website in question is the Faculty of Arts and Human Sciences at London South Bank University.

Stage 1 – measure and sketch the design
Firstly if we have a design to work on a rough sketch of the design is a starting point. Then you will need to work out the required divs. To do this you need to work out unique areas of the screen. Each area can adopt an ID.

Stage 2 –design rough draft

Even with my rudimentary sketching abilities it is possible to measure up accurately and get things right prior to starting coding. Write everything down and use a calculator to get things pixel perfect.

The image below shows the approximate division of the page into DIVS.

Two areas .title and .addlinks are classes. This is because these areas repeat so using a classes makes sense. You should not use the same DIV more than once!

I could also have redefined the hyperlink for the area bottomnav rather than using the class .addlinks – doing this would have been far more efficient. So if I were to add a second stage to my refinements, I would remove .addlinks and redefine <a> for bottomnav. To do this I would simply declare:
#bottomnav a{
CSS details
}

The class .title however needs a header and then a series of hyperlinks. So using a distinct class makes more sense.
Stage 3 Refine
Once the style sheet is coded it needs testing in different browsers and tweaking accordingly – this refinement process can also iron out small stylistic difficulties. Refinement is an iterative process.

Let’s go through all the layers I chose to create one by one.
First, I defined an area with the id of ‘topnav’ for the banner and logo. Essentially this area contains two images one of which aligns left and the other aligns right. The area has a background colour of grey – and that is all that is needed. The layer uses the display attribute of ‘block’ this ensures that the area displays as a ‘block’. Float:left ensures that the layers align left in the first available slot. 

Next I need an area for the news strap line and search box. In this case I also need to incorporate a form and I need to cope with a range of hidden fields.

I created a second div for the form with the id of searchbox.

The reason for this choice was that I needed the form on the right hand side and the news counter on the left – in the layer searchbox I used the command – float:right. I decided to redefine <input> for searchbox – and I needed to ensure that all the hidden fields actually were hidden (because if you redefine input as a block and give a border the hidden fields will appear as empty squares).

Then I created a class for the input box holding text.

The resulting CSS for this layer is below:

padding:0px;
margin:0px;
width:200px;
display:block;
float:right;
background-color:#CCCCCC;       
height:31px;
text-align:right;

vertical-align:middle;

}

#searchbox input.inputbox{

background-color: #FFFFFF;
border:1px solid #94979E;
height: 20px;
width: 114px;

}

One point to note here is that I have started off with a padding and margin of 0px and then re-defined these elements as necessary.

The next area is the main body area. On the face of it this appears the most difficult one to design. In actuality I managed to put this together in an hour or so.
A wrapping class .contentcols produces each of the three columns:
.contentcols{

float:left;
width:170px;
display:block;
margin-right:5px;
background-color: #F0F0F0;

}
Each title is achieved by a nested DIV with the class .title to which is added a second class to achieve the different colours for each header (e.g. education – blue; psychology – purple).
So for example we get  <div class="title psycho"> for the header of psychology. This class takes all the attributes of title but adds the image for psychology.
Below is the HTML for the div for psychology
<div class="contentcols" >
<div class="title psycho"><a href="/psycho/">Psychology</a></div>
<a href="/psycho/courses/struc-sing.shtml">BSc Single Honours </a>
<a href="/psycho/courses/struc-comb.shtml">BSc Combined Honours</a>
<a href="/psycho/courses/struc-child.shtml">BSc Psychology (Child Development)</a>
<a href="/psycho/courses/struc-clin.shtml">BSc Psychology (Clinical Psychology) </a>
<a href="/psycho/courses/struc-sxu.shtml">BSc Psychology (Sexualities)</a>
<a href="/psycho/msc-addiction/index.shtml">MSc Addiction Counselling</a>
<a href="/psycho/courses/grad-dip.shtml">Graduate Diploma in Psychology</a></div>

Here is the CSS for the same area:

.title,.titleuel{

color: #FFFFFF;
font-size: 0.7em;
line-height: 0.95em;                   
margin-bottom:8px;
font-weight: bold;
height: 20px;
padding-top: 12px;
padding-bottom: 2px;
padding-right: 11px;

}
.psycho{
background-color: #733273;
background-image: url("../images/psych/home_titlebar.gif");
background-repeat: no-repeat;

}

Using float:left; allows the four columns to fill the available space. Subtracting the left hand column, which has a width of 255, we have 535 pixels. This allows for 3x170 pixel columns and padding of 25 pixels – exactly correct.
The three columns of  <div class="contentcols" > are easy enough to create once the width and padding is calculated. In my first draft the base of each column (on the Y coordinate) ended in a different place – giving a ragged appearance. Getting all three columns to end in the same place on the y coordinate is far more complicated. Such columns are known as ‘stretch columns. This is something that I will cover later.

The final area of the screen is bottomnav <div id=”bottomnav”>. When putting this together I used much the same technique as I did with contentcols. Only here there are two rows of three columns each. These areas don’t quite work if you enlarge the text size – and that is something I could further improve.
My version one page can be found at http://www.lsbu.ac.uk/ahs/index_v1.shtml
note that the problems with the ‘top bar’ are the result of subsequent stylesheet refinement.

Refining styles on the page

Now that the basic work of dividing up the page is done, it is necessary to perfect and tweak the style sheet to:

• Solve minor stylistic problems
• work on all browsers

Stretch columns

One of the issues mentioned above was producing three columns each of which finishes at the same point on the vertical axis, rather than the columns having a ‘ragged’ appearance see http://www.lsbu.ac.uk/ahs/index_v1.shtml.
This is one of the key teasers with CSS and you will discover that there is not a fully satisfactory solution (place ‘css stretch column’ into Google).
The method I adopted and indeed the most common solution is to add another wrapping layer around the three columns that need to ‘stretch’.
This wrapping layer has a background image which is the colour of the three columns.

 See illustration below: