Thursday, June 21, 2007

Home and Away

Been away from posting up here for a bit. Two reasons:

We had a great holiday in Mallorca and I had a lot of catching up to do. Also I have been busy getting started on the rebuild of the school (within our university) home page. Loads more to do on the layouts across the site.

I thought I would share some of the CSS / XHTML issues that have come up. This has been a case of taking other folks work and building on it and making a few changes that seem important to me.

furthermore...

I have finally got a new Arts and Humanities home page up and running and I now begin the process of rolling out the rest of AH. (and then BE). Lots of work figuring out the heading hierarchies. Phew!

What's all the fuss you ask. Well, I have adopted a slightly different strategy to the main site, so I wanted to share what I have done.

Here are the steps I have taken to implement this. No criticism of the work done before, hopefully some of this will be of help ...

I grabbed the CSS and have started a fork for all the style sheets. It may be better eventually to ADD my own to yours in the cascade, but for the moment it seemed more workable to modify and add to yours.

1. My first change was done in order to resolve the PRINT problem. The University pages look awful when printed. In fact the print style sheet doesn't achieve anything. Further, the logo is absent from paper and this is a fatal flaw. Now, as you probably realise, backgrounds don't print, so the graphic of the LOGO needs to be added to the page code rather than just placed in the CSS. I have made a logo with a right hand border line and this now prints. Of course this is hidden in the screen view. The print style sheet has other changes which make the paper output pleasing to the eye and easier to read. [Could do more, since this cross platform issue is a great personal interest of mine].
2. The above change is probably the most significant since it requires a change to the actual templates rather than the CSS.
3. XHTML Strict 1.0. Since my earlier version validated to this doctype and level of XHTML, I didn't want to go backwards. Actually this was very easy since all I needed to do was to remove one deprecated attribute of the search form and add a <fieldset> tag around the search form fields.
4. This starts with a question - should we be supporting Internet Explorer version 5 / 5.5? Since, very few (tiny numbers actually) are coming to the AH site with IE5 or 5.5, I suggest we don't bother. That is, the site looks better with NO styles rather than broken styles. To achieve this I prevent IE 5 from getting the styles by creative use of the conditional comments:
   

   
   <!--[if !IE 5]><!-->
   
   <style type=text/css media=screen>
   
   @import url(http://ah.brookes.ac.uk/css/standard/screen.css);
   
   </style>
   
   <!--<![endif]-->
   
   

5. Note: Although there seems some special hacks in the CSS to help with IE for the MAC, this doesn't really work, since it looks awful for that browser. The common view is to not support IE MAC, so we should abandon it and hide all CSS. I have done this in screen.css.
6. Tooltips on the University wide navigation grey bar. We have argued about this bar, and I only really want it at the top of the School level. Seems to me, that to make it clear, we can get a tooltip by adding a 'title' tag to the link. I hope you approve.
7. Standard links. I don't know about you but I don't like the way the standard underline for links looks. The line always seems too dark and prominent. It looks too close to the text and interferes with the descenders. I have changed these to 'text-decoration: none' and put a lighter offset border.
8. Verdana for the menus. I just prefer it for this smaller type. Just a taste thing?
9. Fine lines left and right for the main text block. 2 reasons. On the right the text is ragged, since we are not attempting justified (worth a try though?). A fine line, just helps the eye contain this block when reading and keeps it more distinct from the right hand blocks or pictures. On the left, I have also added a fine line (and set the text in by a slight margin) because when the text is long and goes down the page below the left-hand menus, the eye needs help confining the text block. There tends to be a large chunk of white space to the left as you scroll down. You can see what I mean in the second set of pages up and running here: http://opdm.brookes.ac.uk/
10. This relates to 2 above. The LOGO block now has an image inside it but also the name of the School or whatever top level we want. This doesn't show other than in print, because we are no longer able to use the block to the right of the logo. The other place for this heading is at the top of the main navigation list, but since this is hidden in print, we need someplace where the document contains a main page heading. Might help with Google search too!
11. Other modifications include some added rules for info boxes, picture boxes and a block for a separated menu on the left. This is the Research block - linking to various centres.
12. Using different colours in the top angled block. Yes. Thanks for putting this in the layout CSS. I am using it here: http://opdm.brookes.ac.uk/ and I will use others for Research etc. Seems to me that this is a good way to add a bit of variety. Why not?
13. Other things of note for the home page:
    The decorative images are delivered randomly from a set. Refresh your browser for a different image. I'll probably keep adding more...
    We got a favorites icon at last. I'll do that for all sections.
    The page has an RSS feed and you can pick up one for News and one for Events.