Beefy Boxes and Bandwidth Generously Provided by pair Networks
Perl Monk, Perl Meditation
 
PerlMonks  

PerlMonks site design

by kimmel (Scribe)
on May 16, 2012 at 20:07 UTC ( [id://970911]=monkdiscuss: print w/replies, xml ) Need Help??

So I made a comment on reddit the other day about the PerlMonks site design: http://www.reddit.com/r/perl/comments/tlied/becoming_a_friar_on_perlmonks/

TL;DR: No one's done the work on a new PerlMonks site design.

Challenge issued, challenge accepted :) I downloaded a copy of the front page and got to work. I have 3 primary goals with this redesign attempt.

1. Tableless layout
2. Responsive on cellphones and other small screen devices.
3. Less visual clutter

I am not changing the color scheme or the layout so it looks the same as it does now.

Can someone post the templates that generate the pages and sections so I can verify that my changes will fit?

I am waiting on the rest of my browser shots of the site and then I will make another post with a link to a github account containing the new design as well as screenshots of the current site versus the new one on desktop browsers and on cellphones. Are there any 'gotchas' I should know about for working on this project? Bring on the commentary!

Replies are listed 'Best First'.
Re: PerlMonks site design
by jdporter (Chancellor) on May 16, 2012 at 21:51 UTC

    btw -- I'm actually a little perturbed by the comments on that reddit post. In particular, to say that the site hasn't been modernized because "No one's done the work" and especially "Plenty of people have volunteered over the years. None have delivered" is actually pretty insulting. Some of us have done tons of work to try to modernize and otherwise improve the site. Most/all of these changes have been small, "incremental" improvements. But there are impediments to making the kind of sweeping changes that most people envision. There are technical impediments, such as the rather unwieldy Everything-based engine; and there are more policy-related impediments, based primarily on fear of change by those few who hold the keys. For example, there is a deeply entrenched fear of javascript, apparently, which rules out all the AJAXy goodness you can think of.

    I reckon we are the only monastery ever to have a dungeon stuffed with 16,000 zombies.
      Some of us have done tons of work to try to modernize and otherwise improve the site. Most/all of these changes have been small, "incremental" improvements. But there are impediments to making the kind of sweeping changes that most people envision.

      I apologize for any offense or insult my comments caused!

      I was thinking of the types of changes like "Why does it still use table-based layouts" or "Why is the CSS so grotty" or "Why can't you separate the templates from everything else?" which have the impediments you mention.

      (Like you, I've also added some incremental improvements to the site, long ages ago.)

        See Restyling PerlMonks, which is where I was tracking my work to convert the site to use CSS instead of hardcoded and old-school html styling. In it, I say:

        Most importantly, someone with some sense of design and a pretty good understanding of css should define an overarching style "architecture" for the site.

        One thing you can do right away is turn off the use of tables for layout at the top several* levels of most pages. Go to Display Settings, scroll to the bottom, and turn on the three "layout * as DIV instead of TABLE" flags. Then, of course, you'll have to edit your CSS to take advantage of all the div classes and id's you'll get.

        * The number of levels of table layout affected varies, but I think it's generally between 2 and 4. And some pages are not affected by the settings at all (yet).

        I reckon we are the only monastery ever to have a dungeon stuffed with 16,000 zombies.

        I'm the guilty party who both wrote and published that post on reddit.

        I didn't see any disrespect with chromatic's comment, but perhaps it's because I've researched what chromatic has already done for PM.

        I personally don't care whether PM updates with a facelift or not. I suppose I differ greatly from the new generation(s) of web users though. Kudos to the OP if they are serious about making a valiant attempt. I'm sure you'll learn quickly who to contact for what in short order if you show any decent signs of progress.

      "btw -- I'm actually a little perturbed by the comments on that reddit post. In particular, to say that the site hasn't been modernized because "No one's done the work" and especially "Plenty of people have volunteered over the years. None have delivered" is actually pretty insulting."

      Having put in about 15 total hours of work on the last attempt to redesign at least the front facing (Anonymous view) part of the site I didn't find flip, uninformed comments like that surprising but annoying nonetheless. As a full time freelancer I value my time greatly so I can only imagine the annoyance to others who have put in far more hours on the site's design (and/or functionality) in one way or another even from a nodelet to a full theme. However, having looked at the people who made the comments and the forum they chose to do so makes me take it all far less seriously.

      "...the adversities born of well-placed thoughts should be considered mercies rather than misfortunes." — Don Quixote
Re: PerlMonks site design (CSS)
by tye (Sage) on May 17, 2012 at 01:32 UTC
    1. Tableless layout

    Yes, because CSS is so much better at sizing and positioning (!gi css mug). It gets tiring to try to rinse this KoolAid out of people's mouths, but nice as CSS can be for some things, it really is just fundamentally broken when it comes to sizing and positioning. Yes, I realize that "everybody" is using it that way. In fact, I find it hard to forget that because I constantly run into sites where the sizing and positioning is just horribly inflexible. I have a button to disable CSS when that happens. Yay for browser add-ons.

    cellphones and other small-screen devices

    Yeah, like that. In my experience, the number one reason for sites truly sucking on small browser windows (you don't even need to get down to "small screens" to have serious problems) is due to the use of CSS. Sure, you can make tables suck in small windows as well, but it is pretty easy to avoid those problem.

    I've used PerlMonks quite a bit on tiny screens quite well. Depending on how small, you may want to turn off the unfortunately-composed navigation block and/or turn off the nodelets, etc. (w/ "/bare/").

    And there already is a CSS-based layout.

    - tye        

Re: PerlMonks site design
by jdporter (Chancellor) on May 16, 2012 at 21:52 UTC

      That was a promising round of work. It appears that it was abandoned. And without an announcement or any insights into why, at least that I've been able to find. Though such a result is not a big surprise, in my experience. Sticking with a volunteer effort to completion is often quite difficult. Thanks to luis.roca for the effort!

      - tye        

        I join my thanks to your; it was indeed a nice effort.

        He took it about as far as he could, and then I think he hit a wall. Specifically, the wall between design and implementation. He threw his design over the wall, so to speak.

        That's appreciated and you're welcome.

        I'll make an update to that original node and let everyone know /that/ specific effort was abandoned. Briefly, *(and I could detail this in a longer form guide for anyone interested in pursuing a similar endeavor) my failure was approaching the project from the top-down rather than bottom-up. Steady redesigns done one nodelet to section at a time, within certain parameters has a far better chance of getting implemented than any sweeping, heroic attempts.

        At the time I also didn't sense there was enough support for the redesign. I don't know what hard number enough was to me then but for every quiet bit of praise sent via private message, it seemed another, louder node was posted publicly against the effort. The indifference or opposition was apparent to me from the moment (I think it was Locust?) suggested a redesign, through to the last bit of work I did over a year ago. — It may have been an overactive imagination on my part but I've been a graphic designer long enough to know when it's time to stop trying to sell a presentation.

        I'm not saying that is still the case or if it should even matter what the loud opposition has to say but those two points were enough for me to get back to my own freelance work.


        "...the adversities born of well-placed thoughts should be considered mercies rather than misfortunes." — Don Quixote
Re: PerlMonks site design
by marto (Cardinal) on May 17, 2012 at 08:50 UTC

    Regarding PM on portable devices, I've been using it for years on an HTC_Magic (320x480) and now a Samsung_Galaxy_S2 (480x800), and found no problems with either. In the past I've responded to requests for a PerlMonks App (Andriod/iOS) stating the the default browser for Android works fine.

Re: PerlMonks site design
by jdporter (Chancellor) on May 16, 2012 at 21:35 UTC
    Can someone post the templates that generate the pages

    I had to upvote this just because it gave me a much needed laugh on this long weary day.

    I reckon we are the only monastery ever to have a dungeon stuffed with 16,000 zombies.
      Am I correct in assuming this has to do with how PerlMonks stores things in the database (I read in another post about the issues around setting up a PM clone) or is the page output straight up hardcoded in?

        The former. The Everything engine (upon which PerlMonks is based) is primarily code driven. At the page top level, Everything does use an ASP/JSP-like template format. But a typical template as used here consists of a bunch of calls to code and very little (often zero) HTML. For example, the Perl Monks Discussion page's template looks like this:

        [{get_sitedoclet}] [{votehead}] [{newlistapproved:monkdiscuss,monkdiscuss approved linktype,PerlMonks +Discussions,15,navbaron,showunapproved}] [{votefoot}] [{newmoderatelist:monkdiscuss,monkdiscuss approved linktype,Unapproved + Discussions}] [{addnewform:monkdiscuss,Discussion Item,Give us your input}]

        Each one of those is a call to code. And yes, everything is stored in the database.*

        * The exceptions are the scripts that actually handle the web request (index.pl) and the common modules, such as CGI.pm, and a few cron scripts, such as Vote Fairy.

Re: PerlMonks site design
by zentara (Archbishop) on May 17, 2012 at 09:42 UTC
    Bring on the commentary!

    What? No mention of adding links for Liking a node to Facebook? bwa haha


    I'm not really a human, but I play one on earth.
    Old Perl Programmer Haiku ................... flash japh
      I "like" your idea.
        Can I get G+ up in here? :)
Re: PerlMonks site design
by thomas895 (Deacon) on May 17, 2012 at 22:56 UTC

    I am against a completely new layout. Many of us have gotten so used to the current layout, that forcing a new one would confuse many of us.
    Also, the current layout has some big advantages. The most important is probably the code to content ratio -- or the amount of markup used to generate something(in this case). You will notice that there is very little "trash" code -- code which serves no other purpose than unnecessary tweaks -- is present. Therefore, download times are faster, and render times aren't that bad, actually.

    Another thing I hate on many sites is the many kilobytes of huge stylesheets and javascript libraries that must be downloaded every time. On a related note, did you know that PerlMonks displays almost perfectly in IE4, on Windoze 98? Altering it would ruin that viewing experience.

    Lastly, the majority of us are programmers, and not so much end-users. We care more about seeing the content than the endless amounts of "Like" boxes, Twitter buttons, animates, jquery popups, and the likes. It greatly reduces the time required for reading something, you see?
    Besides, I like the current design. :-)

    ~Thomas~ I believe that the source code to life is written in Perl :-)
      Many of us have gotten so used to the current layout, that forcing a new one would confuse many of us.
      yeah, good reason.
      if everybody thought like that we would be all still writing on stone.
      Therefore, download times are faster
      uhm... can you tell me the address of perlmonks you are using? seems promising =)
      Another thing I hate on many sites is the many kilobytes of huge stylesheets and javascript libraries that must be downloaded every time.
      well, I partly agree that some pages are just overkill. but usually the referenced stylsheets/js are only loaded once and then read from the cache for a certain amount of time, or the server just returns a 304 not modified.
      We care more about seeing the content than the endless amounts of "Like" boxes, Twitter buttons, animates, jquery popups, and the likes.
      nowhere did the OP talk about like buttons and the other stuff! let me quote him: "Less visual clutter". you're carrying away the OP's concern to something he never intended.

        if everybody thought like that we would be all still writing on stone.
        There is a difference between evolution of technology and the want to integrate things. This is more a situation of "if it ain't broken, don't fix it" and perhaps KISS as well.

        uhm... can you tell me the address of perlmonks you are using? seems promising =)
        If there is no need to download an extra kilobyte or five of jQuery statements or huge CSS3 files, then why should we? The layout as it is now works fine.

        well, I partly agree that some pages are just overkill. but usually the referenced stylsheets/js are only loaded once and then read from the cache for a certain amount of time, or the server just returns a 304 not modified.
        And yet, much of it won't work on older browsers or hardware. Yes you can make it efficient and yes you can return 304, but that won't change the awkward-looking layout on my PSP.

        nowhere did the OP talk about like buttons and the other stuff! let me quote him: "Less visual clutter". you're carrying away the OP's concern to something he never intended.
        They're bound to be worked in someway, somehow, someday. I want you to look at some sites from the past in comparison to now.

        ~Thomas~ I believe that the source code to life is written in Perl :-)
      We care more about seeing the content than the endless amounts of "Like" boxes, Twitter buttons, animates, jquery popups, and the likes.

      Abso -- friken -- lutely!


      With the rise and rise of 'Social' network sites: 'Computers are making people easier to use everyday'
      Examine what is said, not who speaks -- Silence betokens consent -- Love the truth but pardon error.
      "Science is about questioning the status quo. Questioning authority".
      In the absence of evidence, opinion is indistinguishable from prejudice.

      The start of some sanity?

        I'm not against a change per-se, but I do agree wholeheartedly with that statement.

Re: PerlMonks site design
by Anonymous Monk on May 16, 2012 at 21:50 UTC
    I love this site but unfortunately it has backed itself into a corner whereby nothing can be changed for fear of breaking user CSS settings. See Site facelift?.

      I love this site but unfortunately it has backed itself into a corner whereby nothing can be changed for fear of breaking user CSS settings.

      That is completely false.

Re: PerlMonks site design
by afoken (Chancellor) on May 17, 2012 at 08:22 UTC
    Responsive on cellphones and other small screen devices

    Um, why? For "general-purpose" web sites (sorry, have no better word), this is a good idea. Imagine www.google.com "Best viewed with IE5 @ 1920x1200". But perlmonks? When I've nothing better to do than to surf the web and answer questions here, my browser runs full-screen, which means at least 1024x600 in kiosk mode. When I need perlmonks, either at work or at home, my setup is dual-screen 1280x960, with a full-screen browser on one of the screens. I would never write code or surf the WWW on my cell phone. 84x47 B/W is hardly enough for texting.

    Alexander

    --
    Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so". ;-)
      I would never write code or surf the WWW on my cell phone.

      Other people would and do.

Re: PerlMonks site design
by Argel (Prior) on May 17, 2012 at 20:34 UTC
    The Perl-Blue theme combined with a couple of CSS and Javascript tricks is good enough for me. And not sure how "visual clutter" could apply to PM when these days just not having a ton of images on a site is almost enough to qualify it as "not cluttered"!

    Elda Taluta; Sarks Sark; Ark Arks
    My deviantART gallery

Log In?
Username:
Password:

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

How do I use this?Last hourOther CB clients
Other Users?
Others avoiding work at the Monastery: (5)
As of 2024-03-19 08:28 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    No recent polls found