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 but you can do as you like...
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
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.
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?
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:
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.
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
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 News
NASACRE/Westhill Awards
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.
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
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 -
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:
Tuition & Fees
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.
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
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
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.
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
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
Sweet :) Getting there...
Thanks for the tips - we can always agree to disagree
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
Let me know what you think.
-Dan
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.
Is there a link to an
Is there a link to an updated page?
danursuline wrote:The Latest
The Latest Test
I think this was it.
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?
Thanks guys
I think this site ended up looking a TON better
I increased the line height and added a space at the bottom of the redbox.
Let me know what you think...
I still think the font size
I still think the font size on the navigation is a little too big
Also, your "finance" title on the navigation, needs a bigger top and bottom margin to space it out more.
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
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.
^--- 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...
Much better Have you
Much better Have you experimented with actually using a bullet for each item? Disc or square?
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§ion=0
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"
More stuff...
Well in order to move things along - with some better formating I posted what I have thus far:
I know you dont like the red, but they do so...
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...
Not bad, not bad at all I
Not bad, not bad at all 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.
well...
Well It is usually easier to change the backend of your site when you actually wrote it
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
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