7 replies [Last post]
groovenectar
groovenectar's picture
Offline
Regular
VA, USA
Last seen: 14 years 15 weeks ago
VA, USA
Joined: 2004-11-05
Posts: 33
Points: 0

We have it broken down into college (e.g. College of Education, College of Engineering, etc) and department (e.g. Dept. of Mechanical Engineering, Dept. of Aerospace Engineering), plus a site-wide "base" CSS file.

I'm hosting the stripped-down template examples on my personal domain:

College of Education:
(example link removed... the new layout is now live)

Department of Early Childhood, Speech Pathology and Special Education (branched from the College of Education):
(example link removed... the new layout is now live)

One thing we're having to keep in mind is that we'll need it to be as scalable as possible. Some colleges will want totally different layouts, and the header/logo graphics for each will be different. So for each layout template, we've got a heirarchy of CSS files that are inherited:

A "base" CSS file common to all pages using the template:
(example link removed... the new layout is now live)

We've got a separate one for the college-wide areas:
(example link removed... the new layout is now live)

Then the department-wide areas:
(example link removed... the new layout is now live)

All declared in that order to allow overrides. The dropdown menu CSS is kept separately as well since not all areas will be using it:
(example link removed... the new layout is now live)

It seems to work fine in FF, IE6, and Opera. I believe there is a margin error in the menu with IE7 that we'll be looking at shortly (I don't have IE7 installed). We've decided to go with conditional comments rather than hacks for now. Here's the IE-specific CSS file (loads only for IE versions less than 7):
(example link removed... the new layout is now live)

I think it looks pretty good with CSS disabled, though I'm wondering about best practices with heading tags. That's been a minor brain teaser, especially for the department pages. Right now both Old Dominion University and Darden College of Education are <h1>s, and Department of Early Childhood, Speech-Language Pathology and Special Education is an <h2>; however, on the department page would the department name be the most important part, warranting an <h1>? Should the others be less than an <h1>? I mean is it even reasonable to have so many <h1>s at the top in the first place? It's nitpicking, but it'd be nice to have it semantically correct.

So obviously we'd like it to be as accessible as possible, and standards-based. It seems to do alright with 508. We've still got some obstacles ahead like translating the markup portion into XSL, not to mention rolling it out. It'd be nice to get some feedback on the CSS layout, as there are likely to be quirks and things that could use improvement.

Thanks!

ABCruz
ABCruz's picture
Offline
Enthusiast
Pilipinas
Last seen: 7 years 38 weeks ago
Pilipinas
Timezone: GMT+8
Joined: 2005-06-16
Posts: 279
Points: 0

Hello

Hello groovenectar,

Regarding the headings, I think their structure should follow the real structure of the university's colleges and departments. There should only be one "h1", and that is for "Old Dominion University" because all other content, notwithstanding colleges nor departments will still be generally about Old Dominion.

If a college is at the second level of the university structure then it's an "h2". That goes for a department too. If a college is under a department, or vice versa, then the higher level structure should be the "h2" and the lower one should be the "h3".

Here's a rough outline:

I University (h1)
 a College of Something (h2)
  a.1 Department of Something (h3)
  a.2 Department of Anything (h3)
 b College of Something Else (h2)
  b.1 Department Under Something Else (h3)
 c Department Not Attached To Any College (University Registrar?) (h2)
 d Institutes and Schools Not Attached To Any College? (h2)
  d.1 Institute of CSS (h3)
  d.2 School of Design (h3)

But, I could be wrong. =) Cheers!

Arielle

I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.

http://www.abcruz.com

groovenectar
groovenectar's picture
Offline
Regular
VA, USA
Last seen: 14 years 15 weeks ago
VA, USA
Joined: 2004-11-05
Posts: 33
Points: 0

Thanks for the input, that

Thanks for the input, that makes good sense...

I'm hoping that the layout itself is really solid though. Obviously there will be a whole lot of people viewing the site with a variety of different setups, language settings, browsers, possibly screen readers, etc. With it being a University website we'd like for it to be as solid as possible.

Good points about the headings! If anyone has any input regarding the CSS/markup itself as well then that would be greatly appreciated Smile

groovenectar
groovenectar's picture
Offline
Regular
VA, USA
Last seen: 14 years 15 weeks ago
VA, USA
Joined: 2004-11-05
Posts: 33
Points: 0

The College of Education

The College of Education site is now live:

http://education.odu.edu/

Any comments would be greatly appreciated!

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 15 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

At first glance it looks

At first glance it looks good. The menu breaks with a couple of text size increases but it handles one text size increase. There are some validation issues on every page (didn't look at them all) that need to be addressed.

One thing that bugs me on sites with drop down menus (not to single out yours) is having the upper level menu a link but when clicked you get basically a blank page. Either make that upper level not a link or have something more on that upper level landing page

adipalaz
adipalaz's picture
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT+2
Joined: 2007-05-03
Posts: 19
Points: 0

Hi groovenectar,

Hi groovenectar,

The layout of the site looks OK, I like the banner. It really looks good with CSS disabled and in print preview. There are few things to mention.

For the accessibility it is better to set the font-size in em. Now, in IE the font size is fixed. In browsers like FF and Netscape it resizes, but when enlarged, this causes a small
problem with the first level LI-s in your ddmenu – they overflow their containers. Maybe you should set the height of #ddmenu-wrap and #ddmenu in em too. And adjust the margins for them. When the text size in these browsers is enlarged, the second level LI-s become unclickable – adjust the margins.

In Netscape there is a small gap between the second level LI-s of the ddmenu but this is not a big problem.

Good luck with the site

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 14 years 27 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Hi Groovenectar I think you

Hi Groovenectar
I think you really need to work on the ability to resize the text. Mainly because the default size is so small that i'm sure many people will increase the size.

The basic layout looks neat, functional and organised - a good image for a college.

Could just be me but I expect a picture in the header area where the logo is - looks a bit sparse at the moment (or did you mention that each college would probably have it's own choice there?)

HTH

Fat Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 14 years 27 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Sorry was commenting on test

Sorry was commenting on test page not live version.

The text issue still applies.

on http://education.odu.edu/education/directory/newfaculty.shtml
the floated pictures are not appearing straight down the page - there isn't enough of a gap between each section (FF at 1600x1200). Also I might suggest you add each members name (as a heading or styled p ) above their profile or even just bold it in the paragraph. It would help people scanning the page for a name.

Fat Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns