Beefy Boxes and Bandwidth Generously Provided by pair Networks
Pathologically Eclectic Rubbish Lister
 
PerlMonks  

RFC: A Design Proposed for Anonymous Monk (logged out view)

by luis.roca (Deacon)
on Feb 01, 2011 at 20:23 UTC ( [id://885610]=monkdiscuss: 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

    Replies are listed 'Best First'.
    Re: RFC: A Design Proposed for Anonymous Monk (logged out view)
    by mr_mischief (Monsignor) on Feb 01, 2011 at 21:38 UTC

      I like it. I looked at the source and was gladly surprised to see the cleanliness and clarity of the markup. The design is clean and clear. The colors make text legible without being glaring on a bright monitor.

      I'm not personally a fan of one aspect of the markup in particular, though. The thick border between the byline and the node content followed by the thin rule between nodes reads at first as if you've used bottom attributions. It's very easy to miss that first by-line at the top and look at what is most clearly delineated. I'm not a fan in particular of bottom attributions, either, and I almost commented about that before I noticed it wasn't the intent. If you had used bottom attribution lines, that'd be merely a minor adjustment for people reading the site. I'm afraid what you have here will lead to mistakes in replies if it is implemented. Putting the whole by-line in the divider as the current design does may not look as crisp, but it is much clearer. I think an alternative would be to use quite a bit more vertical whitespace between the list items used to contain the nodes.

    Re: RFC: A Design Proposed for Anonymous Monk (logged out view)
    by Anonymous Monk on Feb 01, 2011 at 21:42 UTC
      I see you've put in a lot of work, but as someone who uses the logged out view quite often, i find yours simply unreadable
      • a lot of empty screen space on the right
      • poll is on the bottom (as is chatterbox etc etc ) and its hard to read because there is not enough contrast
      • using sans-serif font (Arial?), and mixing serif/sans-serif
      • lego color scheme for code (hot blue, hot pink, orange, on two shades of brown)
      • code looks ok without js only because the background is ends up whiter, so there is enough contrast for easy reading
      • unreadable link colors (black on dark blue)
      • complete disconnect between node title/content and author, I can't tell who wrote what
      • tumorously dark floating footer which gets clipped, with bizzare prose, and its not even a navigational
      • A visit to the monastery should not begin with It was a dark and gloomy night
      You've also chosen a peculiar page to mock up, the monastery Gates, I don't think I've visited that page in years, but it has made this stand out
      ( by LanX on Jan 03, 2011 at 12:57 ) 7 direct replies Offer your reply
      There are 7 replies already and even The real Monastery Gates is providing a link to offer another one reply -- 7 replies is a lot, adding another one without viewing the existing ones would surely lead to duplication

      See what it looks like for me http://browsershots.org/http://luisroca.com/PerlMonks/Anon_Monk.html

      I hope this is helpful

      Snooki want smoosh smoosh
           

        See what it looks like for me http://browsershots.org/http://luisroca.com/PerlMonks/Anon_Monk.html

           I hope this is helpful

        I appreciate that you took the time in writing your critique. I would like to point out again that I realize there will be users who will see a poorly rendered version of the design. Please feel confident that is NOT the design I have intended for Perl Monks.

        Again, for anyone who is having difficulties seeing the site (ie: only one column is visible, extremely poor contrast etc.)

      • Please View the Following Screen Shot : http://luisroca.com/PerlMonks/img/Anon_Monk_Design_Screen_Shot.jpg
      • I do apologize to anyone who is having trouble seeing the html page. If you are someone who is seeing the site as described by Anonymous Monk above, post here or msg me and include your specs if possible (browser, screen size and resolution). This will be a big help when I make corrections. I will update the document above with the specs users are most likely to have viewing difficulty and when the corrections for those specs have been made.

        Thanks again for the feedback


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

          From looking at the linked browsershots page, it looks like the vast majority of browsers didn't render it as you intended. So you already have a whole slew of "spec" examples that demonstrate bad rendering.

          - tye        

        Well your link certainly wasn't helpful. It almost makes your post look like spam.

          The link to browsershots? That was quite interesting and seemed quite useful. It certainly showed similar bad rendering to what I saw (and informed luis.roca of prior to his posting). How does that look like spam to you?

          - tye        

    Re: RFC: A Design Proposed for Anonymous Monk (EFFORT ABANDONED)
    by luis.roca (Deacon) on May 21, 2012 at 03:40 UTC

      Hello everyone,

      tye made me aware in the recent thread: PerlMonks site design that I hadn't updated the status of this specific effort to redesign PerlMonks. I've abandoned the work, in short, due to both my poor choice of a top-down approach and what I perceived as a lack of interest from a good percentage here in the Monastery. Please don't take that as a recommendation that such efforts shouldn't be tried in the future but I would advise the endeavor take a different direction.

      Thank you to everyone who gave feedback during the process. It was a humbling experience for this cocky graphic designer. ;-)


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

        You're welcome and thank you for giving it a go. I'm just sorry you had to learn the hard way just how futile it is to attempt a PerlMonks redesign.

    Re: RFC: A Design Proposed for Anonymous Monk (logged out view)
    by Crackers2 (Parson) on Feb 04, 2011 at 18:41 UTC

      My personal opinion...

      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.

      That's not working too well, since even the "plain text" still has its lines wrapped with the + in front of continuation lines. So it's not a good substitute for the download link.

      Footer Bar

      Personally, I hate this. I'd rather have three times as much space taken up by something that doesn't stay on the screen all the time as opposed to the permanent stuff.

      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.)

      The separation looks wrong to me. When I glance at the page I immediately think of a post as what's between two gray bars. While in reality the it's what's between the two barely visible dotted lines. Personally I'd move the author etc. line below the gray bar and just remove the dotted line altogether.

      There's something similar on the righthand column. The change of background color for the chatterbox input line makes it appear as if it's actually a new section, especially since the change in background color between login section and chatterbox does the same.

      The increase in size of the righthand column isn't my cup of tea either. I'd prefer to keep the main column as wide as possible. From the looks of it the main reason might be an increase in font size?

      In general, all the background colors seem to give the site somewhat of a claustrophobic look compared to the current one. Perhaps changing the background of the main section back to white and lightening up the rest might help some with that.

      On a nitpick note, what's with the question mark after each header in the right column?

      I'm afraid I'm far better at expressing things I don't like than things I like, but I hope at least some of these comments might be useful.

    Re: RFC: A Design Proposed for Anonymous Monk (logged out view)
    by steve (Deacon) on Feb 04, 2011 at 15:27 UTC
      Suggested
      • Remove border from text input elements. They have awkward corners. The following might work:
        input[type="text"] { border:none; }
      • I mentioned this before, but I think mr_mischief explained it better:
        The thick border between the byline and the node content followed by the thin rule between nodes reads at first as if you've used bottom attributions. It's very easy to miss that first by-line at the top and look at what is most clearly delineated. I'm not a fan in particular of bottom attributions, either, and I almost commented about that before I noticed it wasn't the intent. If you had used bottom attribution lines, that'd be merely a minor adjustment for people reading the site.
      • In the Others examining the Monastery section I would prefer to leave each username on its own line. When I am looking to see if someone is online (say ... luis.roca) it is much harder to see who is here in the dense paragraph format.
    Re: RFC: A Design Proposed for Anonymous Monk (UPDATE NOTICE)
    by luis.roca (Deacon) on Feb 09, 2011 at 21:25 UTC

      I'm posting my first set of *updates for the Anonymous Monk Proposal. The updates will be ongoing for the next few days so you can check back here or PM me. These ongoing revisions can be found here: http://luisroca.com/PerlMonks/Anon_Monk_rv.html

      Thanks again to everyone who posted and messaged me their feedback. A few of you also helped me figure out a number of the initial problems — the help is greatly appreciated.

      Luis

       

      * I realize it can be considered bad form to reply to your own post so I'll only do this once. Apologies.
      Any updates I make will be made on the original post only so as not to clutter the thread.


      "...the adversities born of well-placed thoughts should be considered mercies rather than misfortunes." — Don Quixote
        I realize it can be considered bad form to reply to your own post

        I've heard that many times. I don't subscribe to that view. Replying to yourself is much better than making major updates to a node. So, replying to note major updates to a node is rather the worst of both choices.

        - tye        

          "Could you please use an ISO date notation?"

          Isn't this something you could have easily said in a private message to the OP? This is a thread asking for comments on a graphic design.

          $ date "+%Y-%m-%dT%H:%M:%S%z" 2011-02-10T01:13:07-0800 $ date --iso-8601 2011-02-10 $ perl -MTime::Piece -le"print Time::Piece->localtime->strftime(q!%Y-% +m-%dT%H:%M:%S%z!);" 2011-02-10T01:13:41PST
          #!/usr/bin/perl -- use strict; use warnings; use DateTime; print DateTime->now->strftime(q!%F %T%z!), "\n"; print DateTime->now( qw! time_zone America/Los_Angeles ! )->strftime(q +!%F %T%z!), "\n"; print DateTime->now( qw! time_zone Asia/Taipei ! )->strftime(q!%F %T%z +!), "\n"; __END__ 2011-02-10 09:25:08+0000 2011-02-10 01:25:08-0800 2011-02-10 17:25:08+0800
        Forget the javascript syntax hilighter, make those navbars/polls/chatterbox.... collapsible

    Log In?
    Username:
    Password:

    What's my password?
    Create A New User
    Domain Nodelet?
    Node Status?
    node history
    Node Type: monkdiscuss [id://885610]
    Front-paged by Arunbear
    help
    Chatterbox?
    and the web crawler heard nothing...

    How do I use this?Last hourOther CB clients
    Other Users?
    Others drinking their drinks and smoking their pipes about the Monastery: (6)
    As of 2024-03-19 08:48 GMT
    Sections?
    Information?
    Find Nodes?
    Leftovers?
      Voting Booth?

      No recent polls found