Im looking for very constructive criticism of its code, design, and functionality: http://www.onpunbb.com/
Everything looks great. The code is clean, valid, and fast loading. The design is sleek and user-friendly. Just a little thing I hate: change your navigation hover to underline instead of bold. It's my personal pet peeve, but it doesn't make the text stretch.
Looks nice and clean. I'd take the bold off the hover on the menu as it makes them spread out and then contract when you move the mouse away. I'd put them as bold all the time and use a different colour for the hover effect. Also you need to use a proper list rather than a line break so you don't get the second line going under the bullets.
Fixed metric fonts in the menu and footer are too small for large font/120dpi users, 14px or larger would be nice - in the same light the color choices for the menu make it hard to read since the contrast between background and foreground are too low. (the WCAG guidelines have a formula that explains that). White text on cyan? Illegible. The menu jumping around on hover because of the bold is distracting/annoying too. You do not appear to have semantic markup, since you have no headings, no lists, and no paragraphs on a page that quite obviously has all of the above in it's content. The page also has inlined style - which is as big a sin as presentational markup - though I recognize this {sexual preference slur deleted} a mile away class="main-content main-category" Code (markup): Here's a tip, don't take HTML/CSS advice from the 'tards at Wordpress. Though I've seen worse. It's refreshing to see someone writing a new page in strict, it's refreshing to see a page that actually validates, and it's refreshing to see a page that has MOST of it's presentation not in the markup. Just move that last bit of presentation out, get some semantic markup in there and you're golden... oh, and you might want to investigate something called 'media types' for your CSS LINK. Had I written that page the markup would go something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <link type="text/css" rel="stylesheet" href="print.css" media="print" /> <title> OnPunBB </title> </head><body> <div id="pageWrapper"> <h1> OnPunBB <span></span> </h1> <div id="topAdvert"> <script type="text/javascript"><!-- google_ad_client = "pub-4402646035547741"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_channel = "4863483133"; google_ad_type = "text_image"; google_color_border = "F4F4F4"; google_color_bg = "F4F4F4"; google_color_link = "005CB1"; google_color_url = "005CB1"; google_color_text = "000000"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js" ></script> <!-- #topAdvert --></div> <ul id="mainMenu"> <li> <a href="http://www.onpunbb.com/index.html">Home</a> </li><li> <a href="http://www.onpunbb.com/whyus.html">Why Us</a> </li><li> <a href="http://www.onpunbb.com/install.php">Create A Forum</a> </li><li> <a href="http://support.onpunbb.com/">Support</a> </li><li> <a href="http://www.onpunbb.com/about.html">About Us</a> </li> </ul> <div id="fauxColumns"> <div id="contentWrapper"><div id="content"> <h2> Welcome to OnPunBB.com - The no.1 in free remotely hosted PunBB forums! </h2> <p> Here is a just a taster of what you can look forward to: </p> <ul> <li>Subdomain URLs: http://myforum.onpunbb.com/</li> <li>Unlimited posts, threads, members, catagories, forums</li> <li>FTP access to customize and mod your forum to look the way you want it to</li> <li>Totaly free, so you have nothing to lose</li> <li>Instant activation!</li> <li><a href="whyus.html">Read the full list of features here</a></li> </ul> <!-- #content, #contentWrapper --></div></div> <div id="sideBar"> <a href="http://www.onpunbb.com/install.php"> <img src="images/signup.png" alt="" /></a> <!-- #sideBar --></div> <!-- #fauxColumns --></div> <div id="footer"> Copyright © 2009 OnPunBB.com. All Rights Reserved. <ul> <li><a href="http://validator.w3.org/check?uri=referer">XHTML</a></li> <li><a href="#">Terms of Use</a></li> <li><a href="#">Privacy Policy</a></li> </ul> <!-- #footer --></div> </body></html> Code (markup): Everything else being in the CSS.
wow thanks death, it really helps. im fairly new at XHTML/CSS validation as im mainly a PHP developer. again, thanks for the pointers.
Do ya one better. Had a few spare minutes, so I tossed together the CSS and images I'd use to do that home page. http://www.cutcodedown.com/for_others/rahahm33/template.html as with all my examples the directory http://www.cutcodedown.com/for_others/rahahm33 is unlocked so you can grab the gooey bits... Which you'll want since it now only uses three images, and those images no longer being 24/32 bit .png will actually work in IE6/earlier without assistance. Valid XHTML 1.0 Strict, would be valid CSS if not for the three IE workarounds. Tested working in IE 5.5, 6, 7 & 8 (hover on the 'get some' image doesn't work in 5.x and 6 - big deal), FF 2 & 3, Opera 9.64 and 10 beta, and the latest two iterations of Safari and Chrome. You'll notice I took a few liberties - I switched it to a min/max-width layout so you can be friendly to 800+ but not end up with monster lines 1152+, added a hover state, adjusted the font sizes to use %/em instead of px, and gave that 'get some' image a hover state as well. Hope this helps.
Wow, thanks a ton death. If i had some money i'd pay you for this, but unfortunately I'm pretty broke right now. I'll upgrade my site to this asap, if theres anything i could possibly do for u let me know.
i like how you kept the theme/colors going into the support area as well. I see a lot of times where people have mismatching colors/fonts between the site and the support forum.
Your fonts/etc become smaller from the home page -> the install page. The last B of your logo is cut off. Otherwise seems pretty basic stock web2.0 styling to me, not bad to look at, nothing impressive or anything that screams "we're good"