for the contest Web Hosting Provider Site
Submitted design #40
Simple straight CSS design, the only image is the NFSN logo.
This should be a very flexible design, the top nav bar could be made smaller if desired, thus bumping the content a bit farther up the page.
I honestly just banged this together tonight, I'm definitely willing to make improvements!
Submitted design #41
Here is the FAQ page for my submission...
Wish you could upload multiple pictures at once.
Submitted design #42
...and the signup page!
Submitted design #44
Revision of my first design, uses space a little more efficiently. Smaller NFSN logo.
Submitted design #45
Revision 2 cont.
Submitted design #46
Revision 2 "Sign Up Page"...
Submitted design #47
Revision of my first design, uses space a little more efficiently. Smaller NFSN logo.
Submitted design #48
...faq version 2.
Submitted design #49
...sign up page 2
#49 Just a note on my 2nd submission, it actually is a liquid layout (as per the requirements), there is just some extra margin that on the right hand side that I forgot to chop off, which makes it look like it isn't.
The white box would expand with the browser window and allow the text to flow.
From the first design (40/41/42), we particularly like the idea of a discrete spot on the page that gives you the page title and a little "what am I doing here?" blurb. However, the copyright notice in the middle of the page is a little awkward, particularly on the main page.
Other than that, we all seem to like several aspects of the second design (47/48/49). One person says the logo is a bit too small.
On both designs, there is a consensus that the body font is too small.
Thanks for the submissions!
Submitted design #61
This is a new design for the NFSN mainpage roughly based on my first two submissions.
I bumped up the text size slightly and the NFSN logo is now the same size as it currently appears on the live site.
This is another liquid, CSS/XHTML design with only 1 image.
The navigation is very flexible and can include whateverl links you would like.
The "Sign Up Now" and "Member Login" links are emphasized in the upper right corner of the screen.
Submitted design #62
This is a version of my latest design with larger text.
The text size is comparable to the text size on the current live site.
I tend to favor the design with the smaller text because larger text makes it hard for the user to distinguish emphasized areas from the main content; areas like the "Sign Up Now" link and the navigation start to blend in with the copy when the font is larger.
Keep in mind that all browsers allow easy text-resizing and this liquid layout will flow accordingly.
Submitted design #63
...FAQ page in my new layout.
Submitted design #64
...Sign up page in my new layout.
Submitted design #65
...oops! I realized I cut some text off by accident in the signup page. It's now been adjusted.
This latest design is very good. It's got at least one ardent internal supporter who carries a lot of weight.
However, we do have some more concrete concerns.
First, we need to see more FAQ text because we need to see how it handles obscenely long pages, and where the right margin is on large blocks of text. You're sort of artificially shortening the page right now by excluding all the actual answers. Could we see the same design with just enough question & answer content to clear that up?
Second, the signup form is a problem; we like the form layout of #49 much better than #65 because #65 gives people a giant block of small print that they won't read.
Third, I'm a little concerned about having enough room to grow on the sidebar.
Thanks!
NearlyFreeSpeech,
Thanks for the great feedback, I'm excited about the latest mock up as well. I will work on the revisions you are looking for tomorrow. Sorry about the FAQ, I'm working on a 17" monitor and I got lazy and didn't want to extend the image, haha, but I'll get to work on that tomorrow.
I thought you might say that about the signup form, I agree that most people will probably skip over the block 'O text. I'll work on a version that's more similar to the layout of #49.
How would you feel about moving some of the TACOS and Rules links from the sidebar to the bottom of the content block? Like how the Copyright is positioned, except maybe on the left hand side?
I think we could make some room on the sidebar by restructuring the site a bit. It really depends on what links you want on the top nav and how you want those links to drill down into the content. We could even make the side nav a "Sub-Nav" for each of the main "Tabs" on the top-nav. So when you click on "Services" on the top, it changes the "Side-Nav" to display the various services you offer. Or something like that. I'm definitely open to suggestions, and I'd love to work with you on this further.
Just so you know, I would be happy to do the XHTML/CSS coding for this design if it is chosen, I haven't started yet because I know that my designs could still be rejected.
I'll submit some changes in the next day or two.
We're definitely open to putting certain elements at the bottom to free up sidebar space.
We are going to be doing quite a bit of restructuring (details TBD) so we are definitely looking for a design that is flexibility enough to absorb whatever we come up with and come out looking good.
Submitted design #100
Here's a revision of my 3rd design. I changed the border color of the main container to green and tweaked the nav bars a bit.
I made the "Sign Up Now | Member Login" box slightly smaller and moved the search bar up above it. This allows the top nav to extend all the way to the end of the content box.
I also moved the TACOS, Privacy Policy, and Content Info links to the bottom of the content box.
Submitted design #101
Here is the extended version of my FAQ page with some minor edits...
I'm not sure how you would want to utilized the top/side nav bars, so I've tried to illustrate some of the possibilities for you.
Submitted design #102
Here is the signup page.
Submitted design #103
Here is an example of the FAQ page with the main container extending all the way to the right margin of the web browser. Just a possible tweak in the overall design.
Submitted design #105
Just thought I'd submit a design utilizing a CSS dropdown menu. This is the main page at first glance. No sidebar to take up any content space, so there is lots of room for large font sizes.
The nav bar has a slight light-green to NSFN green gradient, although this could be easily made a solid color so you wouldn't need an additional (although small) image.
Submitted design #106
Here is the main page with the dropdown activated. Not all items would have to be dropdowns (e.g. "Blog" could simply link directly to the blog).
The drop-down item that is highlighted is the one that the mouse would be hovered over.
This dropdown menu is cross-browser compatible using simple CSS. Some older browsers that do not support CSS pseudo-classes like ":hover" will fall back to a simple javascript file that adds/removes css classes to make the dropdowns visible.
Failing that, when viewed with CSS turned off the dropdowns appear as simple unordered lists near the top of the page.
Here is some more info on the dropdowns:
http://www.htmldog.com/articles/suckerfish/dropdowns/
See them in action:
http://www.htmldog.com/articles/suckerfish/dropdowns/example/
Submitted design #107
faq page of my dropdown oriented design...
Just wanted to add that you can make "Multi-Level" dropdowns very easily, they are simple nested lists. This would allow you to have a very complex and multi-dimensional site layout.
Submitted design #108
...Signup page...
Submitted design #109
Sorry for the deluge of submissions, I just keep revising things I'm not quite happy with.
For this latest revision of my "dropdown design" I added some defining lines to each item on the menu bar.
I also added a #F9F9F9 colored bar below the nav bar to better contain the breadcrumbs (with a #CCC colored bottom border).
I also gave the footer a #F9F9F9 colored background with a #CCC top border.
While #105/#106/#107/#108/#109 is a very clean design, we're just not comfortable with the trade-offs you describe for the CSS popup and thus we're going to have to eliminate it. Thanks for giving us such the opportunity to consider that avenue.
More feedback to follow as we try to get incoming submissions under control.
NearlyFreeSpeech,
I totally understand on the CSS Dropdowns. I've used them successfully on other projects before and like them a lot, but I had a feeling you wouldn't be happy about the "degrade to javascript" thing.
If you could tell me why this person liked #62/#63 better than #100/#101/#102 I might be able to come up with some sort of compromise between the two.
If it is the border color (grey instead of green) or the font size, then these things can be easily adjusted to your liking.
Either way thanks for the great feedback, this has been a great experience!
Submitted design #119
I have tweaked the FAQ page by upping the font-size about 2px...
Submitted design #120
haha, I'm experimenting with navigation ideas now. Here is an example of a "cascading" two-tiered menu. Basically you have a main nav-bar where the current page is highlighted. This current "parent-page" cascades down into a second "sub-nav" that holds "child-pages." This is a solution that requires no fancy javascript or CSS. Opinions?
#120 was an interesting idea, but we decided it wouldn't work for the nav scheme we have in mind.