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

[dgswilson]

I wanted to make sure and say I liked what you did after noticing the post the other day. Came back today. I see in my Linux chrome view the bottom of the (bottom of page) div id="sponsor" is chopped. Maybe something not </> somewhere? Anyway I like it.

[dgswilson]

favicon could replace square bullets. You wouldn't have to look for another. Seems to match colors (I think)

[weegillis]

@dgwilson, thanks for alerting me. There was a missing /div in the page, and a stray /td further down. Probably threw the whole page off in some browsers. Got bleary eyed towards the end of the night and didn't do extensive testing or checking for errors before signing off. Please let me know if you still see the same problem.

---

Well, the stops are out. Things are going to be messy for a little while I expect as one experiments with this and that. All the changes are in the CSS, and this has brought me to a piece of work that's been put off for a long time--cleaning up the style sheet. If nothing else, it will easy enough to restore the old, austere look and feel, or at least the feel anyway. I don't see any need to change the structure or functionality, just the look.

At present, my production browser is Chrome on a Windows 7 box. I check with IE 9 as well. I stopped using Firefox when it started crashing my XP box, and haven't even installed it on the laptop. The way I see it, if it works in Chrome, IE 9 and Opera, it will work in Firefox. But this is reckless, I know. Could be the site is crapping out badly on older browsers simply because most of what I've done this past couple of days is CSS3, or CSS 2.1 that has been poorly supported until now. The same request stands--don't pull your punches. Get it out. I won't take offense.

For starters, to quote from an earlier review, "The header needs work." No kidding. Now it REALLY needs work. Anybody know how to apply a straw filter? Or maybe I should just be looking for a stock photo of adult learners like the new Community Learning Network site. (New link in the footer.)

I've tried a new font in the header, to resemble that of the CLN tagline, which looks like Calibri, but I'm not sure. Don't know what font is in the main heading (Community Learning Network image on their site). Not likely one that will be on everyone's computer, I'd venture. The base size of Calibri is so much smaller than the Trebuchet MS font, so I went to PX from EM for the header text, with the hopes that in the event a browser has to fall back to Trebuchet it will keep the same size, not balloon to a humongous size. In the footer, I used straight text, not an image.

It sucks not being a designer. Even the easy stuff is hard, everything boils down to an experiment. This current experiment is built around the color #006BB7, the blue in the new CLN logo. I went to Color Scheme Designer and spun out the tetrad scheme from which I took #a65300 and #004677 for the background gradient, and #FFDB73 as the base color for the sidebars and the navbars. I use rgba to allow for adjustment in the opacity, which opens up a world of color variations once the background begins showing through. Even the nav buttons use a variant of this base color with opacity.

The logo in the header didn't make a very good transparency, and has lots of little white spots on the edge. I can never get this out without attacking it pixel by pixel in Fireworks, but I can't even replicate this against a dark canvas so can't pinpoint the 'bad' pixels. Maybe @keimos will have a quick fix, hint, hint (sending a PM). Same goes for the badge on the LEARN page. Tried to camouflage it with a CSS border and border-radius, but no luck.

Both the above images are rips from other sites. The logo is a transparent PNG from their home page so I'm surprised it has problems being as it was probably spun from a vector file. The badge was a JPEG to begin with, so we all know how messy the actual image was to start. I did a terrible job of cleaning it up. It was ripped from here: Lloydminster Learning Council Association.

I worked on the Calendar for a bit, and added the bullets back in, but made them 10x10 instead of 32x32. I was able to leave the font size alone, and cleaned up the alignment for easier legibility. (I'm told that center alignment is horrible to read, and now I believe it.)

Now it's back to work. Hope to be hearing from lots of reviewers. I need all the help everyone has to offer (anyone who actually knows what they're doing will agree).

[weegillis]

favicon could replace square bullets. You wouldn't have to look for another. Seems to match colors (I think)

It would, too. Believe I even tried that for a time a long while back, before I had balls enough to start letting people tear things down. The conclusion then was pretty much what it is now... This is my own favicon, and it appears on the site in the footer link. It has nothing to do with callw.org, but is there as my mark of ownership. I own the UI. The council owns the content, and they have never furnished a favicon, even on request, so mine appears. They're fine with that, full knowing the facts. As a consequence, it has no place in their pages.

[mizu]

Hi weegillis,

I recently visited the site again and it really improved. Congrats!
Your restructuring has lead to a much clearer presentation of it's content. Biggest improvement are the visual separation from navigation and content and that you got rid of (estimated) 220 bullet points.

Cheers,
mizu

[edhan]

I can see that you have made further improvement. I love the gradual color gradient as I scroll down. I like what I see at the end of the rainbow - nice color that brighten my day. I can see that you have got the right mix of colors to make it looks distinct for wording and background. Very nice touch!

[weegillis]

Thanks everyone for your input, and compliments. It feels good to be around that bend and see the light at the end of the tunnel. Thanks also to Keimos and mizu for your help off-boards with graphics and ideas. The WWW graphic (which is no longer on the home page, but in course pages) is so sharp. What a difference. The little external links icon proved very useful, and fits right in on both the home page and the Links page.

The bulk of changes (for this time around, anyway) are completed, and now I'm just picking away a little details, as well as working to finally sort out my CSS. We were told to restore the original logo, so I retouched it and put it back. It looks better now, at least.

The only thing that is picking at my craw is the footer. It is not a table like everything above, and the only 'purist' HTML5 on the page. That is making it hard since I don't have a TD on the right that can collapse like those above. On pages I call 'contentbox' there is no right column, and the footer fits right in, but on the pages with a right column ('contentbar') it looks like something was left out, or was just plain forgotten--more or less wrecks the completeness of the page.

The easiest way to see what I'm dealing with is to re-size the width of the window. Go from F11 down to 1200 (which is still more than max-width) then down to 800. All the columns shrink proportionally down to a min-width. You'll see that at min-width the footer looks fine. It's when it is wider that I need some sort of trick to have some column color begin to emerge. It will still need to line up with the right column's left edge, and not appear at all when there is no right column. Truth is, the easiest would be to revert back to a table. Then it wouldn't be a problem at all. But if I want to keep this footer, and continue to progress with the HTML5 change over, then I'm going to have to learn how to tackle this issue.

I'm still not settled on a typeface, though have been using Mako for the past few months. Is Calibri a common font, now? Which machines don't have it? XP is a given not to. I had to add it to mine when I teamed up with a designer a couple of years ago. But I notice it's on my Windows 7 machine. Did it come with it, or was it added by Office?

With the increases in font size, my spacing in some places went out of whack. Still trying to hammer that back in. If anyone sees poor alignment, or overcrowding, please let me know. Thanks. Suggestions of typeface are always welcome. Typography is not my strong suit, to say the least.

[weegillis]

Test, test, and test some more, or your work could come back around and bite you in the a__. I've just learned this lesson for about the umpteenth time. This site has come squarely around...

Before I started using rgba() IE 8 on XP rendered everything, correctly. No reason it should not have. I built it on that machine. But the past month or more I've been working on a Windows 7 machine and have crammed in as much CSS3 as I dared, in the hopes that it would degrade gracefully in IE 8 and below.

Those hopes were dashed, today. Like an idiot, I have been looking at the revisions in Chrome on the XP box, when I've turned it on to look, at all. Now I have a mess to clean up, and a tonne of backwards compatibility research to dig around for and into.

Apart from the step back, switch to the CSS that worked in IE 8, are there any obvious pointers that others can add here, that may not be so obvious to me in my state of panic? I don't think the issue is that difficult to overcome, but have only in mind right now to take out the eraser and redraw the style sheet.

One might very well miss the simple steps, and go around the world on this issue. Any help would be greatly appreciated. TX.

[weegillis]

Bumping my own thread answering (partially) my own question: I spun off a separate sheet with only the selectors and properties from the main sheet that contained rgba() and switched them all to rgb(). I also made sure to change (in both sheets) all background-color: properties to background: to avoid any cross-ups. It's not pretty, but it's a start.

My thinking is that I can create PNG's of these colors and dial in the alpha transparency to emulate the rgba() styles, then specify a url() rather than a color. Either that or tinker around with colors for the sake of an outdated browser that my logs tell me I still need to support.

Going with the image-less theme has really thrown a wrench in. It certainly presents with its own unique set of mysteries and problems. Oh how I wish it was as easy as W3C would have us believe!

[dgswilson]

Oh how I wish it was as easy as W3C would have us believe!

I went to w3c and checked CSS and got "Sorry! We found the following errors (180)"?

You must've been editing as I was looking. From a "me" looking at a website point of view I wouldn't use a gradient "body" background.

Maybe something like #F6E3CE - http://html-color-codes.info/