21 replies [Last post]
danursuline
Offline
Regular
Last seen: 16 years 2 days ago
Joined: 2005-06-27
Posts: 24
Points: 0

Hey whats up - just saying thanks in advance - Here is my v2 of my CMS site... Most of the site validates correctly, but sometimes people copy and past stuff from word without cleaning it up and it breaks validation but... This is totally built from the ground up - I know there are a ton of CMS sites out there, but I really wanted to do one on my own...

here is one page that I think looks good: The site is live, so be nice Smile but you can do as you like...

clickhere

This page and most others validate xhtml.

I know some of the code is kinda messy, but would like someone critique the site.

I have about 80 users who are on the CMS.

If you want to take a look at the breakdown of each section checkout a couple of these links:
Departments

If you click on the individual departments you will see where each users sections are located.

I fully tested it with IE 6-7 and Firefox 1-2.

Thanks

Dan Baker

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 11 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

The first thing that

The first thing that immediately jumps out at me is the width. While it looks fine on an 800x600 screen (which hardly anyone uses) and not too bad on 1024, it looks really thin on a 1280x1024 resolution, there's a lot of wasted space either side.

I can't stand Times New Roman. Have you noticed how nobody uses it in print or the web, unless they're going for an old-timey classic Victorian-period effect?

I don't like the shade of red you're using. I know it matches the site design, but it's too overbearing and bright.

Your navigation on the left is also too messy, it needs something to break it up. Perhaps try a maroon/burgundy background on the link items with bold white text? As it stands you have too much black/red on white, and nothing dividing your page up. It's too plain and simple.

Verschwindende wrote:
  • CSS doesn't make pies

danursuline
Offline
Regular
Last seen: 16 years 2 days ago
Joined: 2005-06-27
Posts: 24
Points: 0

What are your suggestions?

Yeah - I know what your saying - obviously being a CMS Content is #1 priority... What do you rec. as far as font choices and to break up the white spaces.

I was thinking about using something like infinate menu or something for the left nav... I could try the background color on the left nav.

As far as the "red" are you speaking of the graphics at top and bottom, or text- links?

Also check out how printing looks... I think it can still use some tweeking.

What can I do to break up the white?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 11 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

The first thing you should

The first thing you should concentrate on is getting this CMS to produce better markup.

Example, see the titles "Tuition Assistance", "Tuition & Fees", "Finance Department"?

They're headers, but for some obscure reason you've marked them up with:

Finance Department

Tuition & Fees

Ursuline Academy’s tuition and fees for the 2006-2007 school year are $8,400 for tuition, $200 for standard fees and $250 for technology fees for a total of $8,850. Payment options include Annually, Semiannually, Quarterly and Monthly.

 

Tuition covers a portion of the costs of teaching services to facilitate the physical, spiritual, and mental growth and development of students in a safe and wholesome environment. For the 2006-2007 school year, the difference between the actual cost of educating an Ursuline student and tuition is $1,512. This difference is made up with charitable gifts from parents, alumnae and fundraising events.

 

when you should be generating something like:

Finance Department

Tuition & Fees

Ursuline Academy’s tuition and fees for the 2006-2007 school year are $8,400 for tuition, $200 for standard fees and $250 for technology fees for a total of $8,850. Payment options include Annually, Semiannually, Quarterly and Monthly.

Tuition covers a portion of the costs of teaching services to facilitate the physical, spiritual, and mental growth and development of students in a safe and wholesome environment. For the 2006-2007 school year, the difference between the actual cost of educating an Ursuline student and tuition is $1,512. This difference is made up with charitable gifts from parents, alumnae and fundraising events.

Noticed I removed all the extra spacing you've used for margins, and all the formatting code from the HTML.

Also, I've removed the javascript link from the PDF file. You don't decide how files are opened, the visitor does.

Verschwindende wrote:
  • CSS doesn't make pies

danursuline
Offline
Regular
Last seen: 16 years 2 days ago
Joined: 2005-06-27
Posts: 24
Points: 0

I would have to dissagree...

As far as the formatting it is controlled by the embeded HTML editor, and unfortunatly it give alot of controll to the end user - Overall compared to other CMS sites the code is fairly clean, and looks good - as well as prints well. Because everyone that posts on this site no very little about HTML but want alot of controll as far as their stuff looks they are copying and pasting from word (everyone can use that) into the embeded WSIWYG editor http://www.fckeditor.net/

I am currently working on getting "styles" to work well within the fckeditor to handle differnet "style" elements within the HTML, this should help some of the wierdness with the code.

I would also have to dissagree with the javascript pop-up for file downloads (PDF) this makes the interaction with the browser more seemless to the "non-computer-savy" user - we are talking about parents of highschool students...

I can work on cleaning up the code created by the CMS, but I think that is the least of my issues. because it renders well, and prints well - these are important to our users. - not to mention if you have looked at some of the things other CMS sites produce...

EDIT:

Here I re-formated the one page using the "Style" elements instead of just changing the font weight etc..

here is the updated code - much cleaner - (now just have to teach the users to do this when they format things)

Tuition & Fees



Ursuline Academy’s tuition and fees for the 2006-2007 school year are $8,400 for tuition, $200 for standard fees and $250 for technology fees for a total of $8,850. Payment options include Annually, Semiannually, Quarterly and Monthly.

 

Tuition covers a portion of the costs of teaching services to facilitate the physical, spiritual, and mental growth and development of students in a safe and wholesome environment. For the 2006-2007 school year, the difference between the actual cost of educating an Ursuline student and tuition is $1,512. This difference is made up with charitable gifts from parents, alumnae and fundraising events.

 

Tuition Assistance

Financial assistance at Ursuline Academy is available through our need-based work study program. This assistance provides part, rather than all of the cost of tuition. Ursuline Alumnae provide much of the funding for the program through the generosity of Alumnae Annual Giving.  The amount of work study will vary based on the individual evaluation of each case by the Financial Aid Committee. Applications for assistance must be submitted to the Financial Aid Committee each year. Financial Aid Applications are made available in April and must be returned the beginning of May for the upcoming school year.

 

The financial assistance awarded through the work study program is earned by the student as payment for working at Ursuline in various capacities. Based on the information included in the Financial Aid Applications, additional scholarships may be awarded. Ursuline Academy has the following scholarships available:

The next thing I can do is - I guess create style elements for H1, H2, H3, H4 etc so you can format your entire content block with just style elements as opossed to futsing with font attributes... Would this make more sense - it would obviously clean the code up a bit...

Edit 2:
Here is an example of some code that was created by the Mambo CMS .

HOME arrow News arrow NASACRE/Westhill Awards




NASACRE/Westhill Awards


Print




E-mail







The NASACRE/ Westhill Awards are open to SACREs in England. Awards of up to £5,000 are available for inter faith projects.


The need for good inter-faith dialogue is self-evident.  The need for it to begin with young people is also self-evident. They need to be able to encounter and talk to those who have beliefs and views different from their own, to break down barriers constructed through ignorance and fear of the unknown, and challenge the resulting stereotypes which emerge in popular culture.  This is an essential learning tool in the development of a respectful and tolerant society.

The Golden Jubilee Young People’s Faith Forum set an excellent example of how young people can come together to discuss matters of faith and belief, listening to each other without prejudice and discovering the common ground and accepting the differences.  This can apply within a faith as well as across the boundaries of the faiths.  The young people on that occasion also expressed the opinion that such discussion should not be confined to those already within a faith, but extended so that belief and unbelief may talk together, and the spiritual search be respected.

WHAT NASACRE IS DOING

NASACRE is encouraging SACREs, themselves bodies that include an inter-faith dimension, to take an initiative in encouraging the schools within their remit to engage in dialogue in ways which are appropriate to them.  To this end, NASACRE is offering grants of up to £5,000 to support such work by the SACREs.  In this way we hope to develop inter-faith dialogue among young people and to build up a bank of ideas and good practice for others to use in their own ventures, to the benefit of their locality and society more generally.

The enthusiastic response to the first awards in 2005 demonstrated how important SACREs consider this opportunity and the extent to which the idea has caught the imagination.   In the first year, NASACRE received bids from SACRE’s across the country, and gave five awards.  In the second year, the number of bids increased, and their quality was encouragingly high; a further five awards were made.  SACREs may find it interesting and helpful to look at the summary of these successful bids.

WHAT YOUR SACRE SHOULD DO 

If you wish to take part, then apply for funds from NASACRE with full details of the proposed project.  A project may take one of any number of forms involving young people, for example: conferences, the performing arts, exhibitions, student exchange visits – or other ways to engage pupils and set something going which has the potential to develop into long-term dialogue.  Might co-operation with Colleges or the Youth Service be productive?  Areas where some faith communities are sparsely represented may wish to develop a twinning project with another area possibly by e-mail.

The award is designed to include provision for a consultant to advise on the project and assist in its write-up and evaluation. You may suggest someone with whom you already have a connection, to work with you on a consultancy basis; or ask for someone to be suggested by NASACRE.  The successful projects will be published by NASACRE, in order to disseminate good practice across other SACREs, and encourage effective inter-faith dialogue between young people elsewhere.

Application form

List of past awards


As you can clearly see though there are alot worse formated sites using "commercial" CMS solutions. Though I will work on cleaning up the output of my CMS system... I will post a new updated CMS site in the next week for you to look at.

Thanks,

Dan

danursuline
Offline
Regular
Last seen: 16 years 2 days ago
Joined: 2005-06-27
Posts: 24
Points: 0

Here is what I am working on...

I have listened to your suggestions, but am stuck on some color options for the Nav menu.

Here is a link to the demo site - it still is pulling off the same db, so some links within it will link to the "real" site -

Here

I am attempting to break up all the white and used a burgendy tint for the BG of the nav -
here is a snapshot of what I have...

I have also added Style information to my FCKeditor for H1, H2, H3, H4, H5 - that match styles on the site.

Here is what the new code output looks like on the finance page:


Finance Department



Tuition & Fees

Ursuline Academy’s tuition and fees for the 2006-2007 school year are $8,400 for tuition, $200 for standard fees and $250 for technology fees for a total of $8,850. Payment options include Annually, Semiannually, Quarterly and Monthly.
 

Tuition covers a portion of the costs of teaching services to facilitate the physical, spiritual, and mental growth and development of students in a safe and wholesome environment. For the 2006-2007 school year, the difference between the actual cost of educating an Ursuline student and tuition is $1,512. This difference is made up with charitable gifts from parents, alumnae and fundraising events.

 

Tuition Assistance

Financial assistance at Ursuline Academy is available through our need-based work study program. This assistance provides part, rather than all of the cost of tuition. Ursuline Alumnae provide much of the funding for the program through the generosity of Alumnae Annual Giving.  The amount of work study will vary based on the individual evaluation of each case by the Financial Aid Committee. Applications for assistance must be submitted to the Financial Aid Committee each year. Financial Aid Applications are made available in April and must be returned the beginning of May for the upcoming school year.

 

The financial assistance awarded through the work study program is earned by the student as payment for working at Ursuline in various capacities. Based on the information included in the Financial Aid Applications, additional scholarships may be awarded. Ursuline Academy has the following scholarships available:

 

Aloysius Scholarship – This scholarship is offered in memory of Bill Harms. Each year two scholarships (each for $1,000) will be awarded, one to a graduating senior and one to an incoming freshman. The scholarship will be awarded on a variety of criteria including academic record, financial need and the spirit of service and good citizenship the student exhibits.

 

Devaney Dennis Scholarship – In 1939, Jeanne Devaney graduated from Ursuline Academy. In 1991, she endowed a scholarship for a student in need, a student who might otherwise not be able to attend a Catholic high school. The recipient must maintain a “B” average in her studies and show financial need and shall reside in a parish located in Valley Park, Fenton, or High Ridge; however, if no student from any of these parishes qualify in any year, the Financial Aid Committee may grant the scholarship in its discretion to such other student of UA as the Committee sees fit.

 
notice the first header
Finance Department

This is special becuse it adds the dashed line under this element. Or would it be better to use a standard H1 and then add a new div below it for the dashed line.

Thanks for your input - its much appreciated.

-Dan

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 11 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Much better, the burgundy

Much better, the burgundy navigation looks much, MUCH better like that. You could probably to with a larger line-height to space the items out a bit more, and maybe a custom bullet icon to really separate each item? The drop shadow on the right is fantastic, but as it stands the text is too close to the left and not close enough to the top.

I know there's an awful lot of code, and a lot of it isn't your fault and in some cases is unavoidable using a CMS, but you're doing a fantastic job getting the code converted.

Keep this in mind - the less code you use for a page, the less bandwidth you use, and the less you need to pay for traffic on your web hosting Wink

Quote:
I would also have to dissagree with the javascript pop-up for file downloads (PDF) this makes the interaction with the browser more seemless to the "non-computer-savy" user - we are talking about parents of highschool students...

I think we may have to agree to disagree. I could wax lyrical about popups; I'll say this. JS popups are the worst, as more and more people are blocking Java and Javascript. Everybody hates popups, Firefox and XP SP2 block popups by default, so in fact you may confuse users more than you're intending.

Quote:

The next thing I can do is - I guess create style elements for H1, H2, H3, H4 etc so you can format your entire content block with just style elements as opossed to futsing with font attributes... Would this make more sense - it would obviously clean the code up a bit...

Yes. Font tags are the tool of the devil. Do not use them Laughing out loud

Quote:

notice the first header
Finance Department


This is special becuse it adds the dashed line under this element. Or would it be better to use a standard H1 and then add a new div below it for the dashed line.

Neither. Use a heading tag (not a H1, these should be used only once and reserved for the main page title) and give it a class, something like:

Finance Department

Keep it up, you're doing excellent

Verschwindende wrote:
  • CSS doesn't make pies

danursuline
Offline
Regular
Last seen: 16 years 2 days ago
Joined: 2005-06-27
Posts: 24
Points: 0

Sweet :) Getting there...

Thanks for the tips - we can always agree to disagree Smile

I have made the changes so the page titles are h2.story_title instead of their own thing... makes the code look better for sure.

I may still move things around a bit, but I think the overall look is much better Smile

The Latest Test

Let me know what you think.

-Dan

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 13 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I would have more space

I would have more space etween those sidebar links, increased line-height.

And I would spacce under the last link before the red block ends.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 11 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Is there a link to an

Is there a link to an updated page?

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 13 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

danursuline wrote:The Latest

danursuline wrote:
The Latest Test

I think this was it.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 11 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Much better. Although, any

Much better. Although, any chance of marking up the navigation in a list instead of a div? Then you can utilise the bullet points. Also, a bit more line-height on the links would space them out more.

Any chance to get the CMS generating a simple <strong> instead?

Verschwindende wrote:
  • CSS doesn't make pies

danursuline
Offline
Regular
Last seen: 16 years 2 days ago
Joined: 2005-06-27
Posts: 24
Points: 0

Thanks guys

I think this site ended up looking a TON better Smile

I increased the line height and added a space at the bottom of the redbox.

Let me know what you think...

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 11 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

I still think the font size

I still think the font size on the navigation is a little too big Smile

Also, your "finance" title on the navigation, needs a bigger top and bottom margin to space it out more.

Verschwindende wrote:
  • CSS doesn't make pies

danursuline
Offline
Regular
Last seen: 16 years 2 days ago
Joined: 2005-06-27
Posts: 24
Points: 0

ok now..

I am working on fixing up the nav a little more, but foudn something interesting - when you underline something it does not take into account the line height - therefore dont really know how to fix that issue where the bottom part of the link is closer to the one below it then the one above it.

I will work on tweeking fckeditor and getting it to do <strong> instead of font tag crap Smile

I decreased the font size (does look better).

EDIT:
I have changed the Nav so it uses ul and li tags: I also made it format the nav code better take a look.

  • Art

  • Business / Technology

  • English

  • Library

  • Mathematics

  • PE / Health
  • Performing Arts

  • Science

  • Social Studies

  • Theology

  • World Languages

  • Administrative Offices
  • Advancement
  • Annual Fall Festival
  • Mission Effect. / Camp. Min.
  • UA SportsLink
  • Calendar
  • Finance
  • Fathers' Club
  • Mothers' Club
  • Student Clubs
  • Ursuline Movie
  • Ursuline Photos
  • Directory
  • NetClassroom
  • Staff Login


  • ^--- didnt realise it reformated it when I pasted it here... now I can move away from the class=nav and do something in my CSS like #nav ul ul a { } Am I correct in saying this? This would clean of the css sheet alot... and using the ul / li tags makes changing how the nav functions and looks easier...

    thepineapplehead
    thepineapplehead's picture
    Offline
    Moderator
    Last seen: 41 weeks 11 hours ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9683
    Points: 819

    Much better Have you

    Much better Laughing out loud Have you experimented with actually using a bullet for each item? Disc or square?

    Verschwindende wrote:
    • CSS doesn't make pies

    danursuline
    Offline
    Regular
    Last seen: 16 years 2 days ago
    Joined: 2005-06-27
    Posts: 24
    Points: 0

    Welp the red color has to go :)

    What a bust - They wont let me use the burgendy color because its not our official color - back to the drawing board. Trying new colors.

    OK now have the official color for the nav - still looks ok - a little bright but...

    http://75.130.9.111/departments.php?did=17&linkID=43?linkID=43&section=0

    thepineapplehead
    thepineapplehead's picture
    Offline
    Moderator
    Last seen: 41 weeks 11 hours ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9683
    Points: 819

    Gah. In that case I'd see

    Gah.

    In that case I'd see if you can come up with another set of styles. Perhaps a red bullet (disc?) or some sort of left border? Bright red is too harsh on the eyes. Shame.

    And you still need more spacing above and below "finance" Wink

    Verschwindende wrote:
    • CSS doesn't make pies

    danursuline
    Offline
    Regular
    Last seen: 16 years 2 days ago
    Joined: 2005-06-27
    Posts: 24
    Points: 0

    More stuff...

    Well in order to move things along - with some better formating I posted what I have thus far:

    http://www.ursulinestl.org

    I know you dont like the red, but they do so... Smile

    I am still going to work on some clean-up and try to get fckedit to change how it does some formatting, along with educate our users with new ways to format stories.

    Thanks for all your help, and any other suggestions would be appreciated - Ohh and I increased the line height for the "selected" link so it creates more space for the underline...

    thepineapplehead
    thepineapplehead's picture
    Offline
    Moderator
    Last seen: 41 weeks 11 hours ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9683
    Points: 819

    Not bad, not bad at all I

    Not bad, not bad at all Smile I still would like a wider site, but that's probably not possible. Congrats on getting all those changes done so fast!

    You're spot on, next thing to do is getting fckeditor to output better code, but judging by what you've done so far, you're well on the way.

    Verschwindende wrote:
    • CSS doesn't make pies

    danursuline
    Offline
    Regular
    Last seen: 16 years 2 days ago
    Joined: 2005-06-27
    Posts: 24
    Points: 0

    well...

    Well It is usually easier to change the backend of your site when you actually wrote it Smile

    Ohh yeah and having comments in your PHP makes things easy to edit... But most "commerical" php/asp site are so damn hard to customise with their 60char tags and garbage code...

    Thanks for helping me out - I am still working on cleaning up more code, until then...

    I will post my next update here as well.

    Thanks,

    Dan

    technossomy
    technossomy's picture
    Offline
    Enthusiast
    Last seen: 1 year 18 weeks ago
    Timezone: GMT+2
    Joined: 2004-06-09
    Posts: 260
    Points: 8

    Navigation issues

    On the left hand side navigation menu, you may want to add a background hover color to the items, which makes it easier on the eye. Also, you need to take a look at the grey background to the left of the menu; perhaps you had intended that to be a faux column?

    Hope this helps