Anonymous Monk Design Proposal

Intended as a redesign of the Anonymous Monk (logged out) face of PerlMonks partly in response to a previous discussion:

UPDATES :: Wednesday, February, 9, 2011 ::

• Ongoing revisions are being made here: http://luisroca.com/PerlMonks/Anon_Monk_rv.html
1. Users with monitor resolutions of 800 by 600 and above should be able to view both columns
2. Reduced padding and margins throughout the design.
3. Based on feedback in this thread and jdporter's RFC: Eliminate the "Offer Your Reply" links, I swapped out '## Direct Replies' and 'Offer Reply' for 'Discuss this Post'.
4. Removed "Want Mega XP..." wording in the Superdoc Header block to take up less space.
5. Removed the 'Log In' and 'Create New User' links from the main navigation list. Since the options are provided in the 'Log In' form I thought it was a good way to simplify that list.
6. The bar has been removed from the post titles. I also changed the order to have the title above with the poster's user id below.
7. Swapped the text color in the Superdoc header block and lightened the grey background of the two columns to increase contrast.
8. Removed the fixed footer bar across the bottom and moved the information to the bottom of the second column.

SYNOPSIS

HTML Page

• http://luisroca.com/PerlMonks/Anon_Monk.html
*(Please note that the links are for placement only. This is not linked to perlmonks.org)

Screen Shot

• http://luisroca.com/PerlMonks/img/Anon_Monk_Design_Screen_Shot.jpg
I posted a screen shot for anyone who may have difficulty seeing the html page (if my css brakes your browser :) ).

DESCRIPTION

While the organization of information has been kept largely intact, there are enough differences between the current Anonymous Monk design and this proposal that it's important to note in each area. I used The Monastery Gates for the design sample provided along with content from earlier this month.

The design has been organized into two columns: One for node content and titles. The second for all navigation including search, log in and the Chatterbox.

Below is a more detailed description of design decisions made in each area.

Column One:

Page Head (Superdoc)

I grouped together the Section Title, Node Number and Utilities a little tighter than they are currently mostly for further clarity. The blue box and stripe was added to reinforce the visual grouping and lead people's eyes to both the posts underneath as well as the Masthead and Search Bar to it's right.

Latest Posts Divided by Section

Organized the poster's name, date, number of replies and link to post reply into one visual unit above the post title. I wanted something to create a tightly grouped navigation bar for each post that will always be in the same location. (An example would be in regards to 'Offer your reply' which can shift depending on the length of a particular post.)

Probably the most notable change has been done to the code blocks by adding syntax highlighting (Using a variation of the Midnight Theme from Syntax Highlighter ). The download link has been removed as users can simply double click on the code block, revealing the selected plain text.

Column Two:

PerlMonks (Logo/Mast)

I placed the rotating PerlMonks statements right above 'PerlMonks' to create a more condensed and unified masthead. * I also wanted to mention that I have been working on some ideas for logos but felt it would detract from the more important conversation of the site design for Anonymous Monk. Logo ideas are something I'm still interested in providing PerlMonks (even if just to use on new t-shirts) but they become and deserve to be their own conversation.

Search Bar

Right underneath 'PerlMonks' is the Search bar which is a change from the current layout. The bar itself doesn't span across the page and 'Super Search' has been removed from the Main Navigation List and placed to it's right.

Main Navigation List

• The only real change here was replacing the vertical bars between links with additional spacing.

Log In Area

The layout is very similar to the current Anonymous Monk with the exception of the dark blue background to further distinguish the area for new users and break up the side bar visually.

Chatterbox

I initially had the entire CB contained within a darker grey background but after some of the preliminary feedback (ironically from the CB) I agreed that it was a little much. I simply placed the Talk field within a blue bar to help break up the nodelets visually without overwhelming the second column.

List of Logged in Monks

In an attempt to help 'pull up' more information into the browser window I wrapped the list of logged in users rather than give each their own line. This is something that was experimented with before but was applied to all the nodelets (If I remember correctly). I used this style in the Node Search List as well and left the others as is. I felt these two areas would still remain clear to navigate for users while breaking up this second column visually and somewhat reducing the need to scroll down.

Also important to note is that I eliminated 'Other Users' and simply use 'Others meditating upon the Monastery: (##)' as the head of the nodelet condensing the two lines into one.

Perl Monks Sections + Perl Monks Information Nodelets

Left as is.

Node Search List

Changed display of link list to wrap.

Referral Links (Leftovers) + Poll (Voting Booth) Nodelets

Left as is.

Footer Bar

Contains Attributing Information within a fixed narrow bar at the bottom. Since I've eliminated the Pair logo from the top I felt it was only fair to give them, the Perl the Perl Foundation and Vroom a permanent place on the page while sacrificing very little vertical space.

ACKNOWLEDGEMENTS

I'd like to thank the following people for providing preliminary feedback to the design and helping debug parts of the markup:

ambrus, belg4mit, Corion, ELISHEVA, jdporter, MidLifeXis, roboticus, steve, tye, Voronich, Your Mother

SEE ALSO

Stylesheets (For the page design only. * Syntax highlighting is a slightly modified version of Syntax Highlighter. See Code Block section above.)
• base.css
• detail.css

CAVEATS

This document will probably change to reflect any edits to the design. I'll list the changes below this section in the future.