callw.org - In with the new, and in with the old

[weegillis]

About a year ago I asked the forum to suggest points for consideration on this site, and received some very good ones, which either quickly or eventually got implemented. Over the past year the site has been partially recast in HTML5, and that which is not, is at least valid HTML5 markup. Just like the completed sections, the full transformation will come along in time.

I've also played with the CSS to enhance the old site as much as one could within reason, and without disruption of the old layout. The real work has been done on the server side, where much of the old fixed HTML has been supplanted with template snippets, made to reduce duplicate blocks of static code, and also be smart enough to have some location awareness for the purpose of highlighting buttons and tabs. The entire site utilizes a single 'smart' footer include, and pulls PHP from single, 250 line library. As before, some pages are index.php containing only the PHP needed for that 'TAB', and to direct traffic, but now they also hand off some of the load to the library.

By bringing full scale uniformity to the static and generated pages of the site, I've found that the site is much smoother and quicker than before. Error tracking is a cinch, and most editing and updating is now done on small, dedicated includes rather than the main page, making for less page breakage (and more predictability) during updates.

Our database has been overhauled to allow software to recognize four states on a course: Register, Reserve, Static, and Gone. This was done without restructuring the data, just extending one of the existing flags stored in the data to include additional states. The Course section PHP checks for a Gone status, and returns a 410 with redirect to the index if found, otherwise, it spins the course page. At present, only about half of the database is in one of the three 'active' states, which cuts down on the number of pointless pages.

This upgrade to an old site, without any fundamental changes in the original layout, is a work in progress. Now that I have finally achieved the uniformity set out to accomplish, I can take a closer look at finer details and issues; ergo, posting it now for critical review. Thanks in advance to all who contribute in this process.

[davebarnes]

1. I don't like the background. I find images similar to this to be distracting. I prefer a plain, unobtrusive color (maybe a slight gradient).
2. They need a REAL LOGO. That person-figure reminds of those awful PowerPoint clip art "things".
3. The homepage is really boring at the top and requires way too much scrolling.
4. Personally, I hate pastels.
5. I don't understand the ICCS Certified given that I could not find out anything using Google.
6. The menu buttons are too small.
7. Oh crap. I clicked on the figure in the upper left and did not go to the homepage. When somewhere completely unexpected.
8. The book icons in the calendar are a waste of space. Dump them and use a larger font.
9. The calendar is ugly. Seems to be a throwback to 1999.

No positive feedback as those items don't have to be improved/changed.

[weegillis]

The purpose of this review is to dig up these very things, @davebarnes, and for these I am grateful to have your frank mention and views upon them. Thank you.

Some of the points can at this writing be addressed:

1. The background is something I can look into replacing, and I like the gradient idea, as the image was meant to be giving that effect...

2. Cannot do anything about this. The site represents one among a group of local councils, all bound up under one funding umbrella, to which that logo belongs. We have to carry their branding however we may embellish it. I took this up with the council years ago, and it was replied, the logo stays. Might be this opinion has changed, though, and so it will be put to them, once more. For now, though, it's out of my hands.

3. This is something I can deal with, upon taking advice from the program coordinator. I don't control content, but can and do advise. What the council gives, is what appears, not what I create. I agree there is too much scrolling, and refashioning of some sort is in order. It's on the list.

4. This color scheme goes back to the original design and derives itself from two main palettes--the Learning Councils branding; and the banner photograph. Being the novice graphics designer I was at the time (which holds to this day) we discussed a general theme, settled upon the rainbow photograph and went to work from there. The pastel color emerged from the alpha segment under (lower z-index) the masthead logo. This was the design that the council went with, so it is a matter for them to determine. I am not attached to it, but they are.

5. This site was registered in the iWatchDog program in 2006. When I switched to HTML5 all the meta data in the head was removed. With the template evolution, all the links out to their site were removed, and I have just to remove the logo... Done, with a temporary fill-in from our small in house collection.

6. Increased size by 1/7th. They don't seem too small, now. What say you?

7. Would need to know what page you were on. I can't replicate that error from any that I try. I don't doubt you though. Do you think you could find it again in your history?

8. Icons gone. Font size increased by 25 per-cent. I see what you mean.

9. Added to the list.


Three out of nine got addressed with ease. All improvements I must credit to the reviewer. The rest will take some work. I'm hoping to solve the mystery of #7, asap.

[davebarnes]

the logo link on the homepage goes to an anchor within the homepage

[weegillis]

That is on purpose. Links within an active page point to the top of content on that page. The tool tip reads, "Jump to content". Perhaps that's unconventional, and improper. Best I learn this soon, as all of my sites, and many of the pages on this one behavior in this fashion.

One could just as easily disable the link. Recommendations?

[weegillis]

Temporarily addressed @davebarnes recommended background for the body (point 1 in post #2). I just used a color picker to grab the colors, so if one spots a more appealing gradient, please don't hesitate to bring it forth for testing. I'm a total clutz when it comes to color, even if my wife says I have a good eye. Still doesn't mean I do in a practical sense.

Added later:

Worked on the issue of scrolling on the HP. Managed to remove about 400px from the height of the top section. Pretty hard to deal with boringness. The scope of the site doesn't offer much day-to-day and all I've done for the recent past is keep the list refreshed from week to week. I do this manually.

During my upgrade I readied the site for jQuery, and have it up and running on every page load. This, I'm sure will offer me a mechanism where I can collapse the page down to one section, and tab through the sections from the top of the content, similar to what I do using old school code on the calendar page. I'll definitely be giving this some further study.

The chunk I relocated to the right sidebar looks a little off, perhaps owing to the border, or lack of border on all the rest. Any suggestions or comments?

[davebarnes]

The background change was a hug improvement.

The icons are pixelated and cheesy looking. The book?, the W.

Ask yourself which is more inviting: http://callw.org or http://afdenver.org ?

Look at the accordions on the homepage of http://www.SchoonerInfoTech.com

[mizu]

Hi!

since you asked...
(I only visited the homepage)
My few points:

1. I personally do not like the color scheme, nor do I like the icons. It all scares me away.
2. The headlines (#E59F2B) do not give enough contrast. Give it a larger size.
3. to many different colors for all typo. Sorry, it looks childish. I would not use color at all since the links are colored already
4. the points of action (register) look not different from content. Make them standout.
5. The map link opens in same window, means the visitor is gone. Better integrate the map as lightbox.
6. Remove the border.(#start)

Conclusion:
If you want to stick to the allover design, at least reconsider your use of typography. Typography is a very powerful tool for print/web design.

Cheers,
mizu

[weegillis]

• @davebarnes, glad you like the background. Thanks for the accordion example.

• Pretty clear consensus on the icons. Will need to shop around for one that fits the bill, but have a temporary replacement now in use. Not the best fit, but it is better than what we had.

• It might take a while to change the color scheme, since the council will have to have a say. It is probably time to start shopping around for ideas. What I might like or find more inviting is of minimal consequence, as what they (the council) likes will dictate. On the list.

• Headlines have been adjusted in color, slightly, with a down turn in the luminosity of about 16 ticks. Size bumped up by 20%. Good suggestions.

• Inner headings are now charcoal grey, and unbolded. They, too, look better. Not sure that 'childish' would be how I would have described them, being as I was already a grandfather when this site was first built, but I'll take no offense by it.

• The map opening in the same page was an oversight when the link was moved from the main content area to the right sidebar. Fixed. Thanks for pointing that out.

• The Register Online link will take some work. It's not really the main call to action, the course dates are. Within their pages is the readily apparent "Register" button. Still, this issue is on my list.

• Tweaked the border on the main wrapper to remove the visible lines in the breaks.

Glad to see so many critical responses. It's not hurting my feelings, any. Whatever helps is a gigantic contribution from where I sit. Most appreciated.

[mizu]

weegillis,

I did not intend to be offensive. Colors on letters have certain emotional effects.
If for some reasons you cannot change the color scheme, fine. I think it's a minor aspect after all.

My points are balance, grid and typography.
When you open the site for the first time, where do your eyes focus on? Ideally one should be guided to the key statements or most critical sections.
To me it looks like everything has the same visual weight, the image buttons to the left being slightly more dominant. You changed the info icons, it already makes a difference, shifting the focus slightly to the center. But both, bullets and icons?

- There are inconsistent elements. Bullet points (small, squared, large). Do you really need this 'W' icon?
- The sidebar to the right, try adding a background in order to better distinguish from the centered content.
- Add white space to all blocks and navigation (top, bottom).
- And revisit the header too.

Again, my subjective remarks are meant to be constructive, just to give a fellow designer/coder some hints.


Cheers,
mizu