General Community > WebsiteBaker Website Showcase
Freshly baked
sboots:
@ DGEC
Tee hee.... thanks, eh?
Good call on the empty pages... You're absolutely right. I've got a "coming soon" on there now; hopefully they'll actually put some pictures up eventually!
As far as the footer menu, that's good to know because they seemed bright enough on my monitors, but now that you mention it they would have been almost invisible on the CRT we used to have. I brightened them a bit; do you think they should be brighter yet? I'd like to keep them kind of subtle, but yeah... invisible is bad. ;-) Thanks - I wouldn't have noticed that myself.
and @grid8400
Thanks so much! It's nice to hear. I'm happy with how the Site Info box-things worked out; I feel it's a bit nicer than writing all that in the footer; kind of keeps it clean. Feel free to copy it to use on your sites; thank Peter-Paul Koch who wrote the JS function! :-)
Thanks both of you for the kind words and suggestions! It's really nice to get that kind of feedback.
DGEC:
--- Quote from: sboots on August 16, 2007, 08:26:05 AM ---Tee hee.... thanks, eh?
--- End quote ---
No problem, fer sure, eh? :wink:
How did you make the menu & template anyway, brain transplant from another template or from scratch?
Okay... here comes a slew of stuff
--- Quote ---Good call on the empty pages... You're absolutely right. I've got a "coming soon" on there now; hopefully they'll actually put some pictures up eventually!
--- End quote ---
It occurs to me that it should be an option to automatically display a message (from a text box in the settings panel) if there are no pictures or sub-albums in a gallery. Why don't you have a go at it, or suggest it to the author of whichever gallery you're using.
--- Quote ---now that you mention it they would have been almost invisible on the CRT we used to have. I brightened them a bit; do you think they should be brighter yet? I'd like to keep them kind of subtle, but yeah... invisible is bad. ;-)
--- End quote ---
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. If it's info that's rarely needed, sure, store it out of sight. but remember it will be harder to find it when someone does want to read it, so make it obvious where you've "hidden" it. Subtly is good for appearance and for drawing attention to what to click on, and other look & feel. I.e. functionality should be obvious, with look & feel enhancing and drawing attention to it, not hiding it. 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.
But, 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
http://www.lighthouse.org/accessibility/effective-color-contrast/ - colour problem information
http://jehiah.cz/colour_contrast/ - test your style sheet, based on snook's somehow
http://evolt.org/Understanding_Color_and_Accessibility - an article with several links, including above
Also, 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.
--- Quote ---I'm happy with how the Site Info box-things worked out; I feel it's a bit nicer than writing all that in the footer; kind of keeps it clean.
--- End quote ---
Ah, 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 :roll:
One 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).
One 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.
Related 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.
Check your server logs to see what size of monitor your visitors have to see if it's worth the effort.
(If you need one, http://statcounter.com is a very nice, easy, free [for last 100 visitors] visitor analyzer, although it uses cookies and can get blocked as "tracking cookies" - I have to add it back into my anti-spyware hosts file. It includes graphs of browser, resolution, etc. Much easier than Webalizer, etc that come with my server)
--- Quote ---It's really nice to get that kind of feedback.
--- End quote ---
Ya, nothing worse than... chirp! chirp! chirp!
Hope you wanted THIS much feedback :-D
sboots:
Wh-oa! DGEC, you rock! I could not have asked for such great feedback. This is absolutely awesome.
The menu & template is all original (which could explain the atrocious CSS files... it's all the usual "try it until it somehow looks decent"...), but it's partly copied from the previous WB template I made (http://mjblockparents.ca) and from the previous (none too impressive!) mjfootball site design that I made about a year ago.
I really, really appreciate your comments. I'm still a newbie when it comes to good, interoperable (is that the right word?) design, and it's so cool to get all this info. I am blown away.
Unfortunately, I'll be away until the end of the weekend, so I'll go through and tweak everything then, then get back to you. Hopefully next week I'll also have time to make a generic version of the template to submit to WB... but I'll have to seriously clean up the CSS first!
Thank you so much. This is so cool. I'll get back to you as soon as I can on monday.
DGEC:
You're extremely welcome! The thing I do best is complain :roll:
I find myself in the situation frequently of, "I ALMOST like this but.....?" Having some guidelines to work from really help me. And when it comes to this stuff, the general body of knowledge is still being built. Almost everybody is still experimenting.
As for clearning and submitting the design, that's great! "Delete as much as you can but no more"
I have some CSS cleaning of my own I need to do, and I'm getting annoyed with the IE/FF differences :x
sboots:
--- 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.
--- End quote ---
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...
--- Quote ---But, 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
--- End quote ---
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=g
--- Quote ---Also, 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.
--- End quote ---
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.)
--- Quote ---Ah, 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 :roll:
--- End quote ---
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.
--- Quote ---One 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).
--- End quote ---
*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?
--- Quote --- One 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.
--- End quote ---
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. ;-)
--- Quote --- Related 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.
--- End quote ---
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.)
--- Quote ---Check 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)
--- End quote ---
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.
--- Quote ---Ya, nothing worse than... chirp! chirp! chirp!
Hope you wanted THIS much feedback :-D
--- End quote ---
:-)
--- Quote ---I find myself in the situation frequently of, "I ALMOST like this but.....?" Having some guidelines to work from really help me.
--- End quote ---
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"
--- End quote ---
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.
--- Quote ---You're extremely welcome! The thing I do best is complain
--- End quote ---
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
--- Code: ---<?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
}
?>
--- End code ---
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.)
--- Code: ---<?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
}
?>
--- End code ---
And you'll need the JS blocking function, in your page head or whereever:
--- Code: ---<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>
--- End code ---
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.
Navigation
[0] Message Index
[#] Next page
[*] Previous page
Go to full version