The header and forum index look pretty nice. TBH everything else leaves a lot to be desired, as others in this topic have stated, but it shouldn't be
too hard to improve. Already, I can think of some simple improvements: add more padding to things like headers; lighten backgrounds so that text doesn't contrast too badly; etc.. It's the kind of layout where yeah, it's not perfect, but many of the worst flaws have simple fixes that can be done with little to no HTML modifications.
On a related note, I'll probably end up fading my text manually as a temporary solution. Default text and background hurts my eyes, so much contrast. (That's actually a tricky thing to get right on a dark background. 'S why most of the web uses white as a bgcolor.
)
Simple(-ish) recommendations and small problems.
There's a bug! The element that contains #inlinepopup2 needs to be set to
display:none when the popup isn't actually visible. Otherwise, it acts as an "invisible wall", blocking clicks on a small sliver of space on the page. I don't know how likely it is that someone would attempt to click on something that just HAPPENS to be covered by this element, but it just happened to me, and it's... confusing. Disorienting. "Why isn't my mouse doing anything to that textbox?"
The PM notification block should be moved to the left,
where it will be infinitely more noticeable. I checked the code; it would be literally as simple as changing the word "right" to "left" in the relevant HTML.
Put a background on the utility nav ("Settings/Messages/Logout"). It's a little hard to read -- particularly the Settings link, which is right on the edge of the orange planet. Perhaps a translucent black background could work? Use a transparent PNG -- rgba() colors aren't supported in some browsers, most notably IE.
Lighten the text color on the quicksearch box. It's nearly illegible.
Change "Quick Search" to just "Search". A web usability book that I highly recommend (
Don't Make Me Think) basically puts it best: "It's a simple formula: a box, a button, and the word 'Search.'" (Believe it or not, we -- web users -- actually do navigate the web better when we don't even need to think about it. Less words, less time spent thinking.)
The quicksearch's button is just an image with JavaScript. It should be changed to an
<input type="image">, and slap a SRC attribute on it. That's basically a hybrid between an input[type=submit] and an img -- you still get to use a fancy image, but you no longer need JavaScript of any kind, because the browser will do the work for you.
Try applying this CSS to the DIV that contains the quicksearch form (#qsearchf):
float:right; margin:20px 10px 0;That will position the quicksearch to the right (where people often expect to find search forms on sites) and move the breadcrumb menu upward. Overall, the search and breadcrumbs combined will take up less space, and a bit more content will be above the fold. A quick-and-dirty fix to get the breadcrumb looking a tad better afterward would be to apply
top:7px to the breadcrumb menu (div.nav).
Try to find a way to
add a visited link color to external links. Given that content on SEN -- be it thread listings or the contents of topics -- changes frequently, a visited link color is next to useless for internal links.
External links, which are often found in posts (like this one), don't change as rapidly, so having a visited link color could be useful. (Perhaps a PHP script could just slap a classname onto any external links; the CSS can then simply apply styles to, say,
a.external:visited.)
Okay, I'll admit, this one might not be so simple, but...
add a site map. Not a map of the
entire site (down to every forum thread), but something that allows someone to get an overview of the whole site at once.
A mini-analysis, from a coder nerd's point of view and motivated entirely by boredom.
Just random things I've noticed.
The header images are all done using IMG SRCs. I, personally, would've done IMGs without SRCs, and used a technique similar to
CSS sprites to actually specify the images from within the CSS. This would lower the number of HTML (and PHP) changes needed for a skin to change the header graphics. (The specific technique? Set an IMG to display:block, set its width and height to zero, use padding to get it to the right size, and give it a background image. A bit roundabout, a bit involved, but it increases the flexibility of CSS.)
The problem that Merrell and others were experiencing with the nav results from the approach Dev took with the nav. He actually did the entire shape as a single background image:
This is good simply because it is, well, simple. It's easy to skin that part of the layout: just draw a different shape to go behind the SCI/SCII icons. Me personally, though, I prefer to use the HTML itself to the fullest extent possible, even if means jumping through hoops. For this particular layout, the hoops would've been writing the SCI/SCII chunks up so they're both just boxes without the slants... I'd then use some clever trickery with CSS backgrounds to make it so that just the slants are a background image, an image like this:
The image would, of course, be cropped and positioned properly entirely with CSS. No extra HTML elements needed at all, just a list with two items (one for each icon). This solution would've been tailor-made for this (Corbo's) skin, and (if similar approaches were applied across the whole layout) would've prevented issues like the one experienced by Merrell However, it has a key drawback: the CSS would have been trickier to understand, which would make it a bit harder to skin the site.
'S all I got for now, actually. Bored, tired, and the meds're wearin' off, so... yeah.
All that said, however,
Praise.
The header isn't particularly prone to
banner blindness. Good job.
You actually have a quicksearch now, and it's in a more-or-less-intuitive location near the top. That's good;
a usability expert found that by using a search form instead of a link, actual usage of his site search increased by 91%. I don't think I ever used SEN's search before. Yep, that's right, not even once! Maybe now I will.
You didn't do
anything on this page that could be avoided.
SEN still loads at a good speed.Most of the nav entries
are identifiable at less than a glance, and use
simple and mostly familiar terms. This is good because
people browse the web at high speed.
You followed
several good guidelines for how links should be displayed.
FINALLY, WE GET A FULL BBCODE TOOLBAR BUTTON KIT THING WHEN REPLYING TO PMS! OMGOMGOMG I LOVE THIS.
Responses.
I'm gonna try to convince Devourer that most members have a wide enough resolution that we can do Quicksearch on the nav bar and/or a "Community" dropdown rather than pairing that with "Site."
1024px is still the "standard" resolution for which people should design. Widescreen compatibility is nice, but not at the expense of breaking the layout for 4:3 aspect ratios. If, however, the utility nav (Settings/Messages/Logout) was moved upward, then the green strip beneath it could be thickened, making room for a quick search on 1024px and therefore also on widescreen. Alternatively, the solution in my Recommendations box (float the quicksearch to the right) could be used.
[DavidJCobb is too lazy to find this and quote it. Sorry!]
Quicksearch should
always be global unless the user explicitly specifies otherwise. If there was a drop-down, then local search would be fine -- though global should still be the default.
When I posted the above, I was in a friendly, forgiving mood.
I was on the Forum Index and noticed a lot of blank space. I experimented with it in Firebug, seeing what could be done to remove it. I got a much closer look at v5.1's HTML than I had before.
Please excuse me while I bash my head into a wall repeatedly, in an attempt to scrub these horrors from my mind via repeated self-inflicted blunt force trauma to the head.
Post has been edited 1 time(s), last time on Jul 21 2010, 3:48 am by DavidJCobb.
None.