Quote from: DGEC on August 16, 2007, 06:56:44 PM
Okay... here comes a slew of stuff
...
I'd bump it further still - I couldn't see a noticable improvement, or at least, not improved to a sufficient level. Remember, you WANT people to click on the links if they're interested. ... And on average 1 in 10 visitors will have colour or other eyesight issues, depending on your audience. You want gramps to see his grandson right?
Ah, using LCD are you? Yep, that's often a significant difference that I notice between my work CRT & home LCD. Obviously at least one of them is not gamma-corrected, ahem.
Good call. I should definitely have a CRT handy to see how people with those monitors see the site! Ahem indeed... the monitor I'm doing all my graphics on now (not good!!) is *definitely* different from any other monitor I've seen... things are much brighter and tinted weirdly; I'll have to play with gamma-correction in my graphics app to see what happens. Never thought about it till now...
QuoteBut, if you design for accessibility, usibility will follow, grasshopper! Some sites:
http://www.snook.ca/technical/colour_contrast/colour.html - quick fore/background contrast evaluation - do it
http://colorfilter.wickline.org - a large battery of colour issue simulations! - always do a grey test
Thanks a million! The colour contrast tool is excellent; I've adjusted the colours on those footer links using it's contrast rules; how do they look now?
The colourblind tester is fascinating; the site looks fine on the colour-blindness tests and the monochrome test, but on "black", "white" or "gray", it's entirely those colours. Not good! Is that something I should be worried about?!
http://colorfilter.wickline.org/?a=1;r=;l=9;j=1;u=www.mjfootball.ca;t=gQuoteAlso, reduce your computer's colour range to 256 to see what it looks like. Turns out that our library browsers can only do 256 colours and let me tell ya, my site looked pretty bad - the old 'web safe' colour pallet is still not a bad choice for standard sites.
Fortunately, according to the site stats, nobody out of 300 visitors has anything less than 24-bit colour. Oooh... the web palette always made me cringe. So did seeing my nice gradient designs on 256 colour monitors...
I'm glad it's not so common these days.
...and I just checked my site in it... Trippy. Wow. I love the dithering. (But the gradients actually look sweet on 16-bit! Interesting.)
QuoteAh, yes, good idea, especially for the log-in box. Works pretty well for something like this. I may have to use that little trick too 
Although, I'll have to check if the JS is compatible with my Palm - got enough issues already 
I'll post the PHP for the login boxes; feel free to copy the rest directly from my site! I'm really glad you like it.
QuoteOne other thought - you must have a huge monitor - that football & logotype are gigantic. Even on my 1152 wide monitor, the logo is still huge - I have to have a window almost full-screen to avoid scrolling. Especially compared to the size of some of the smaller fonts (like Site Info).
*embarrassed sigh* IIRC, our new family computer monitor (that I'm using for all my graphics work, since it's the windows computer) is 1920x1200. It's beautiful, until you look at all the sites you made (it replaced an 800x600 CRT!) and they take up about a quarter (!!) of the screen space. Plus, everyone seems to think that the universe will collapse if their browser window isn't maximized! That new monitor led directly to this site redesign... So yes, the site was designed to fill a 1024 monitor, with the background graphic stretching another 100px or so on each side to make it look decent on our 20". So yeah, sorry about the huge header.
Actually, after you brought this up, I doublechecked and found that my footer "toolbox" (with the half-invisible gray links!) was screwed up (box model grumble grumble) and because of the padding was 40px WIDER than my 970px limit, which meant side-scrolling (yep, it's a pet peeve of mine too!) on 1024px monitors. It's fixed now. (Thanks!)
I see what you're saying about the inconsistency between a huge design and the small fonts. I enlarged the footer text (since it hadn't been changed since the old design), but do you still think I should enlarge the not-really-important "toolbox" text?
QuoteOne option, since you're using a resize script I think, you might be able to substitute different sized logos, you don't really want to resize using EMs for a logo. Photos work good for that though.
For my next site, I'll definitely design it to display nicely in a "regular" (1024px) and 800px monitor using the resize script. You're right - I could have a smaller version of the header, and use the script to choose between them. If I was really good, it would be completely based on % or em's... but fixed-size is all I can do these days.
QuoteRelated to that layout, I thought you had a huge right margin to accomodate the wide logo, and a fixed content area until I loaded another page and the content was wider. Finally, after checking back, I realized I had resized the window after I'd loaded the page. So, it flows to the size of the window when it loads, but apparently IE 7 has to do a reload to get resize.
The resize script (as used here) was an *extremely* terrible hack, only used since people with 800px monitors were already visiting the site, and the menu would have been off-screen for them. It basically checked the width when the page loaded, and if need be shoved the menu and margin over to compensate. That's why it doesn't scale with the screen, or readjust when you change your monitor size. Terrible, I know. I'll integrate it better on the next site, but I think I've given up here.
Wait, do you mean you browse without your window maximized? Dude! I admire you for that.
(I also like how Safari/mac has pre-built sizes at 800px and 1024px. I used to always get annoyed with how it handled "maximizing", but now I like it.)
QuoteCheck your server logs to see what size of monitor your visitors have to see if it's worth the effort. ... Much easier than Webalizer, etc that come with my server)
For sure, eh? I'm using Google Analytics. It works quite nicely (aside from the lack of Sticking-it-to-the-man -ness). 13.5% of my visitors are using 800x600 monitors.
Also, at this time 20% of my visitors are... myself.
Hee hee.. you *would* think that hosting companies have better stat software. Mine has Urchin 3.something, much advertised on their website. Which is ironic, since Google Analytics (free) is based on much improved Urchin code.
QuoteYa, nothing worse than... chirp! chirp! chirp!
Hope you wanted THIS much feedback 
QuoteI find myself in the situation frequently of, "I ALMOST like this but.....?" Having some guidelines to work from really help me.
Me too!
DGEC, I love the feedback. These guidelines (and the sites you posted) are absolutely great, and I've got a ton of new ideas on how to make my next site way better. Of course, there's so much more I could do on this site, but it has come a long way since I posted it to these forums.
Quote"Delete as much as you can but no more"
Wise, wise words. I'll definitely keep that in mind. It'll be a while before I have time to finish cleaning/generic-ing it; other people are bugging me to get their sites finished! But it'll get done.
My sympathy to you; IE/FF differences are the bane of life, pretty much. Even IE7's a pain. One day, people will use a good browser...
Good luck with your cleaning.
Whew! That about covers it! I'm sure I've missed some things, but it's really improved a lot. (Thanks to you & the other posters!) The football people wanted me to add some more stuff yesterday; you'll be pleased to know it has a half-dozen or so new *blank* pages! (*DGEC cringes* I know. But it's in their hands now...
) It also has a drop-down menu copied from the old site design, with not-quite-right colours, too-small text, and possibly some IE glitches. (But of course.) But that can wait for another day! I added a bit of child/parent-page nav stuff that turned out okay.. but this site is getting out of hand!
Wow... I wrote way too much... You know how when you're tired, you just keep on talking about useless stuff? Sorry to bore you. I really appreciate everything you've written. It just makes my day that you took the time to critique and help me with my site. I hope I can return the favor to other people in the future.
QuoteYou're extremely welcome! The thing I do best is complain
Well, for once, I definitely appreciate complaints.
Awesome.
Oh, right! Here's the PHP code I used for the login box. It replaces the "Login" part with some longer text (Edit this page, Admin, Prefs, etc.), so it needs a bit of room, but feel free to copy whatever you need from my template. Also, it's designed to go at the very bottom of the page; the #footer part is in there so you don't need to scroll after you toggle on a box. You'll need to add something with an id="footer" far enough down for that to work. And, you'll need the "Enable Login" setting on.
The following code goes wherever you want the "Login" link to be. It uses code from the sweet "modify this page" snippet:
http://baker.mnpages.com/pages/snippets/modify-this-page.php<?php
if(FRONTEND_LOGIN == 'enabled' AND VISIBILITY != 'private' AND $wb->get_session('USER_ID') == '') {
?>
<a href="#footer" onclick="blocking('login_table_div');">Login</a>
<?php
} elseif(FRONTEND_LOGIN == 'enabled' AND is_numeric($wb->get_session('USER_ID'))) {
?>
<?php echo $TEXT['WELCOME_BACK']; ?>
,
<?php echo $wb->get_display_name(); ?>!
<?php
if (FRONTEND_LOGIN == 'enabled' AND is_numeric($wb->get_session('USER_ID'))) {
// Get permissons
if ($page_id) { $this_page = $page_id; }
else { $this_page = $wb->default_page_id; }
$database = new database();
$results = $database->query("SELECT * FROM ".TABLE_PREFIX."pages WHERE page_id = '$this_page'");
$results_array = $results->fetchRow();
$old_admin_groups = explode(',', $results_array['admin_groups']);
$old_admin_users = explode(',', $results_array['admin_users']);
$this_user = $wb->get_session('GROUP_ID');
if (is_numeric(array_search($this_user, $old_admin_groups)) )
{
?>
<a href="<?php echo ADMIN_URL; ?>/pages/modify.php?page_id=
<?php
if ($page_id) { echo $page_id; }
else { echo $wb->default_page_id; }
?>
" target="admin" style="font-weight:bold;">Edit this page</a>
<?php } ?>
<?php } ?>
<a href="<?php echo PREFERENCES_URL; ?>">
<?php echo $MENU['PREFERENCES']; ?>
</a> <a href="<?php echo ADMIN_URL; ?>/index.php">
<?php echo $TEXT['ADMINISTRATION']; ?>
</a> <a href="<?php echo LOGOUT_URL; ?>" style="font-weight:bold;">
<?php echo $MENU['LOGOUT']; ?>
</a>
<?php
}
?>Then, this code is the "appearing" login itself; your best bet is to place it with CSS wherever you like. (Check mine; I should probably have put the form in a div, but I was lazy.)
<?php
if(FRONTEND_LOGIN == 'enabled' AND VISIBILITY != 'private' AND $wb->get_session('USER_ID') == '') {
?>
<form name="login" action="<?php echo LOGIN_URL; ?>" method="post" class="login_table" id="login_table_div" style="display:none;">
<?php echo $TEXT['USERNAME']; ?>
: <input type="text" name="username" style="text-transform: lowercase;" />
<?php echo $TEXT['PASSWORD']; ?>
: <input type="password" name="password" /> <input type="submit" name="submit" value="<?php echo $TEXT['LOGIN']; ?>" style="margin-top: 3px; " /> <a href="<?php echo FORGOT_URL; ?>">
<?php echo $TEXT['FORGOT_DETAILS']; ?>
</a>
<?php if(is_numeric(FRONTEND_SIGNUP)) { ?>
<a href="<?php echo SIGNUP_URL; ?>">
<?php echo $TEXT['SIGNUP']; ?>
</a>
<?php } ?>
</form>
<?php
}
?>
And you'll need the JS blocking function, in your page head or whereever:
<script type="text/javascript">
// <![CDATA[
// Toggle div display
// Thanks to Peter-Paul Koch, the JS master. http://www.quirksmode.org/js/blockinvi.html
function blocking(nr)
{
if (document.layers)
{
current = (document.layers[nr].display == 'none') ? 'block' : 'none';
document.layers[nr].display = current;
}
else if (document.all)
{
current = (document.all[nr].style.display == 'none') ? 'block' : 'none';
document.all[nr].style.display = current;
}
else if (document.getElementById)
{
vista = (document.getElementById(nr).style.display == 'none') ? 'block' : 'none';
document.getElementById(nr).style.display = vista;
}
}
// ]]>
</script>
The CSS is kind of key, but really annoying to work with. Good luck with it all. I suppose this wasn't the best place to post these snippets, and my explanations are confusing, but I'm on my way to longest post ever... so enjoy! Take care. Thanks so much for all your help.
You can donate by clicking on the button below.