Beefy Boxes and Bandwidth Generously Provided by pair Networks
Welcome to the Monastery
 
PerlMonks  

Comment on

( #3333=superdoc: print w/ replies, xml ) Need Help??

Anonymous Monk Design Proposal

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

  • Site facelift?
  • 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

    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.


    "...the adversities born of well-placed thoughts should be considered mercies rather than misfortunes." Don Quixote

    In reply to RFC: A Design Proposed for Anonymous Monk (logged out view) by luis.roca

    Title:
    Use:  <p> text here (a paragraph) </p>
    and:  <code> code here </code>
    to format your post; it's "PerlMonks-approved HTML":



  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • Outside of code tags, you may need to use entities for some characters:
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.
  • Log In?
    Username:
    Password:

    What's my password?
    Create A New User
    Chatterbox?
    and the web crawler heard nothing...

    How do I use this? | Other CB clients
    Other Users?
    Others chanting in the Monastery: (5)
    As of 2014-08-31 02:24 GMT
    Sections?
    Information?
    Find Nodes?
    Leftovers?
      Voting Booth?

      The best computer themed movie is:











      Results (294 votes), past polls