MORE Theme Changes? Are You KIDDING Me?

By Shamus Posted Sunday Sep 9, 2018

Filed under: Notices 112 comments

The nightmare of fussing continues. To be totally honest, this is kind of fun. I could do this forever, except I know that having a consistent experience is important and I know how disorienting it is when you show up to a previously familiar site to find everything has been moved around. So I need to stop messing around with the site because I don’t want to drive everyone crazy. At the same time, I really want to see the results of just one more round of changes. Maybe two. Possibly two. We’ll see.

What’s new?

  1. The main menu has been moved to the right. I’ll talk more about that below.
  2. Fixed some instances where a comment and its direct reply might end up being nearly the same color.
  3. Regardless of whether it eventually winds up on the right, the left, or the top, the menu is now more compact.

Some people say they dislike the left-menu because it feels wrong or alien. Apparently left-to-right reading habits have them scanning over the useless (to them) sidebar every time they visit the site. So let’s put the menu on the right and see what happens. As before, I’m adopting a “Squeaky wheel” approach to design, so if you love something and don’t want to see it changed then you need to speak up.

So let’s talk about this main menu some more…

Given: We need the main menu. People don’t need it often, but when they do need it, they really need it. The main menu is mostly for newcomers, which means we can’t hide it away in a rollout bar of some sort. Longtime readers will be able to find it, but the people who need it most (newcomers) will have trouble. That’s no good. Also, the menu is that one place where you get the all-important “Return to the front page” link, and that needs to be easily available.

These are the places where we can put this menu:

Location Advantage Drawback
Menu on Top The main menu takes up very little screen space. When the user scrolls down, the menu is gone and their display is entirely focused on the text. Once you scroll down, you lose access to the “return to homepage” link. Worse, on desktop displays you end up with VAST fields of wasted space on either side of the text.
Menu Left The “Home” link is always visible, and the menu now occupies that empty space that was wasted on desktops. This puts the main text slightly off-center, which apparently drives some people nuts. It also puts the menu “before” the main text for people scanning the display left-to-right. (I have no idea why these people don’t have the same problem with top menus. Usage habits and user expectations are strange sometimes.)
Menu Right The “Home” link is always visible, and the menu now occupies that empty space that was wasted on desktops. This puts the main text slightly off-center, which apparently drives some people nuts. However, it’s not quite as distracting for people doing left-to-right scanning.

When I began messing with this, it seemed like desktop users wanted side-menus and mobiles wanted top-menus. So it made sense to use side-menu for “big” displays and top-menu for “small” ones. However, it’s now clear that actually adapting to different screens is a larger and more subtle problem than I can solve on my own. Some desktop users shrink their window, throwing things into an approximate “portrait” mode. Some mobile displays are large. Some desktop displays are small.

(And because I know someone will suggest “make it an option”, I should add: Allowing users to select the layout themselves would mean using cookies and Javascript. That’s a nightmare of extra complexity that will make troubleshooting more difficult for me. Also, the WordPress system of cookies is broken due to over-zealous EU GDPR compliance. It took me four hours just to get cookies working in the comment field. I can’t imagine what a pain in the ass it would be to gain cookie access for some sort of homebrew layout customization. Sorry, this operation is too small for me to do fancy stuff like that. I need something simple that fits within my sphere of knowledge.)

One thing I’ve noticed is that the people who disliked the wasted space problem of menu-top do not seem to be delighted with the side-menu arrangement. At least, none of them have shown up to express approval. Perhaps the menu-top thing we had a month ago was already the optimal solution, and I should have ignored the complaints about wasted space. But for the sake of knowledge, I’m going to leave the menu on the right for a few days and see how people respond to that. If the gripes still outweigh the expressions of relief, then I’ll drop the side-menu altogether and we can go back to having the menu at the top.

It’s all good for me. I already got what I wanted out of the redesign. I got to cut out huge sections of confusing details and legacy code, which helps with maintainability. I think this theme is less than half the number of lines of code and makes a fraction of the MySQL calls.

Still, there’s one major issue left, and I’m a bit stumped…

Footnote Popups

Apparently, people using Apple mobile devicesAnd thus Safari browser. can’t close footnotes. Normally, you can click on the little number like this oneHi there! to see the text, and then click anywhere outside the popup box to get rid of it. For whatever reason, Safari on mobiles handles this differently from everyone else. The only way to close a footnote is to open a different one. I don’t have any Apple devices so I can’t test this, and I really have no idea what to do about it.

If you’re curious, here’s the Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//call this function once the page has loaded
  window.addEventListener('load', snote_init, false);
  //window.addEventListener('mousedown', snote_hide, false);
  window.addEventListener('mouseup', snote_hide, true);
 
  //this function will add a span with snote_tip class where a span with the snote class is used, this reduces the html needed and makes writing notes so much simpler/cleaner.
  function snote_init() {
      var snote_elements = document.getElementsByClassName('snote');
      for (var i = 0; i < snote_elements.length; i += 1) {
        (function(i)  {
          var snote_element = snote_elements[i];
 
          snote_element.innerHTML = '<span class="snote_refnum" title="">[' + snote_element.title + ']</span>' + '<span class="snote_tip" id="snote_' + i + '">' + snote_element.innerHTML + '</span>';
          snote_element.style.display = 'inline-block';
          snote_element.addEventListener ("mouseup", function () {snote_show(i)}, false);
        })(i);
     }
  }
 
  function snote_hide (arg)
  {
    var snote_elements = document.getElementsByClassName('snote_tip');
    for (var i = 0; i < snote_elements.length; i += 1) {
      var snote_element = snote_elements[i];
      snote_element.style.visibility = 'hidden';
    }
  }
 
  function snote_show(arg)
  {
      var snote_tip = document.getElementById('snote_' + arg);
 
 
      if (snote_tip.style.visibility == 'visible')  {
        snote_tip.style.visibility = 'hidden';
      } else {
        snote_tip.style.visibility = 'visible';
      }
  };

This code was provided years ago by a reader. I’ve poked at it a bit since then. You can see at some point I commented out line 3 and replaced it with line 4, where it responds to mouse UP events rather than mouse down. I’m not sure why I made that change, so I don’t know what it’s for.

Some other notes:

I wanted to make the sidebar very slightly transparent like some of the other bits of the interface, but the drop-down boxes for the Archives & Category controls apparently can’t do that. I found several threads on StackExchange all saying the same thing: You can’t change the background of a drop-down box like that. I tried it myself, and it does seem to be immune to anything beyond simple color changes.

I’m sure the more OCD among you have noticed that “Archives” is very slightly out of alignment with the other items. (When you’re looking at the vertical version of the sidebar.) This is a mystery I can’t solve. I forced every single element in that menu (icons and words) to fixed widths, and the mis-alignment remained. You might blame those icons, but shuffling the icons around doesn’t change the odd spacing. You might assume I messed up the layout of dropdown boxes, but Categories and Archives are also out of alignment with each other. I just… I have no idea. This wasn’t a big deal when the menu was a field of whitespace, but now that I’ve packed the menu together those mystery pixels really stand out.

 

Footnotes:

[1] And thus Safari browser.

[2] Hi there!



From The Archives:
 

112 thoughts on “MORE Theme Changes? Are You KIDDING Me?

  1. Daemian Lucifer says:

    I have no idea why these people don’t have the same problem with top menus.

    Like you said,if you scroll down it disappears.But even if it remained at the top,think about your reading habits while scrolling down:you can follow the line you were on with your eyes easily without losing your place.Especially when the text is broken into paragraphs.But following the text when scrolling left to right(say if its a big line of code)is not that easy.

    And because I know someone will suggest “make it an option”

    Technically,you did.Zooming in makes the menu jump at the top.Which Im fine with.

    Also,you missed one option,though I guess that is the hardest one for you:Have the menu be hidden until you press one small button somewhere in the corner.

    1. Echo Tango says:

      I think another reason that the side-menu is annoying, is that when you read an English text, you effectively ignore all the lines above and below your current line. (The exception is if the lines are very close together, so you need to put more effort into tracking when you go from the end of a line to the beginning of the next.) However, every time you end one line and begin another, you have to again scan over the menu. If the menu was at the top, you only scan over it once.

      1. Agamo says:

        This makes absolutely zero sense to me. The starting position of the text doesn’t change, so you don’t need to go all the way to the left when you get to the next line. You just go back to where the text starts. You don’t have to spend time scanning over the menu.

        1. Daemian Lucifer says:

          Sadly,thats not how our eyes(or brain) work for many people.Sense rarely has anything to do with human biology.

          1. Duoae says:

            Daemian, maybe you can expand on what you mean here because there’s nothing in our biology that causes this behaviour – IMO, it’s a learnt aspect. Othewise vertical writing systems would never have developed because the letters or icons on either side would distract from the sentence being read.

        2. Duoae says:

          Yeah, I don’t get this line of thinking either. The only time something like that affects me is videos playing on either side of the text. Though that’s a distraction more than anything else.

  2. Profugo Barbatus says:

    Wow, caught me off guard to have this change in the middle of reading some of the archive. Thought I’d broken something weird for a second.

    Still not really sold on left or right menus. I’d have to say right is better than left, but the old top menu was preferable for me. Generally, I’m either archive diving, or reading the latest article. If its the former, I don’t need the sidebar, I’m following the links at the bottom of the page. If its the latter, there’s rarely more than a handful of new articles, and if there’s an excess because I’ve fallen behind, I’ll just open them in new tabs, or hit the back button on the browser to return to the homepage. It just feels like a really edge case scenario where I am in the middle of the page, and need to return to the homepage, but pressing the back button on the browser is insufficient. Not a frequent enough occurrence to justify giving up screen real estate to either side, when I could just have a bit of a wider article.

    1. Husr says:

      I’m just replying here to fully second what you’re saying here, since the squeaky wheel apparently gets the grease.

      I have no idea why these people don’t have the same problem with top menus. Usage habits and user expectations are strange sometimes

      There’s a pretty dramatic difference between something you scroll past once per article and then never see again and a menu that you have to jerk your eyes away from every line.

      I’d also add that in the nearly four years I’ve been using this site, I’ve never once needed to return to the homepage. I mostly use the RSS feed, which I know almost no one else does, but bookmarking the main page works essentially the same way: you open the newest article, or if there are several you’ve missed, open all of them in new tabs. Jumping around from the archives is better done with the links on the bottom and the master page of them accessible from the top menu, and I remember that when I first got linked to an article on this site as a new reader (Blistering Stupidity of Fallout 3 FWIW, though I’d read DM of the Rings years earlier without checking out the site further), those are the methods by which I continued to traverse it.

      For a regular reader without RSS, having the mainpage exist to be bookmarked and checked to see what’s new is valuable, but in normal use both as a new and experienced person there’s very little reason to ever go “back” to it from an article, and certainly not such a pressing need that one needs to be able to do it without scrolling back up to the top. (The only downside of having to scroll up is losing your place in an article, and if you’re about to click on a link to take you elsewhere, you’ve almost certainly already finished reading what you want to read of it.)

      In summary, you were pretty much dead on the money here:

      The menu-top thing we had a month ago was already the optimal solution, and I should have ignored the complaints about wasted space.

      1. Fizban says:

        I dunno about “most” people not getting here via RSS- whether that’s true or not, I know it’s how I show up. The only time I use my bookmark to the main page is if I’m checking a comment thread (since the RSS link will have been marked as read and hidden).

        That said, I do occasionally want to hit a “back to main page” button, such as when I’m checking between multiple comment threads, because for whatever reason I’ll open forum threads in different tabs but blog comments I won’t. And like Shamus said, when you want that title page button, you want it. A lot of people don’t know how to use their home/end keys (I didn’t until a couple years ago), and having to scroll wheel all the way back to the top or grab the slider bar is just annoying.

        As for the menu-right alignment: jarring at first, but I am quickly finding it more likeable than the left side. Helps that I sit just a little left of center on my monitor, so right side is way far right and very easy to ignore.

        One thing I do still find jarring is the brightness of the grey on the menu. Even if the dropdowns aren’t transparent, a transparency on the menu might be nice.

        1. Daemian Lucifer says:

          The only time I use my bookmark to the main page is if I’m checking a comment thread (since the RSS link will have been marked as read and hidden).

          There is a separate rss link for comments only.Why not use that one instead?

          1. Droid says:

            It also has 32 instead of only 12 replies stored now, so you can actually shut down your computer for a day or so without missing people’s invaluable insights and priceless contributions to your life.

          2. Fizban says:

            ‘Cause I don’t always check back on the comments- only when I’ve posted something or another post has particularly caught my eye. Even if it was just for one post at a time that’d still be way too many. A giant pile of comment notifications would be counterproductive to how I use use my feedbar, which is just to offload a bunch of update schedules for webcomics and blogs and such.

    2. Steve? says:

      +1 to this. Top menu is most preferred, right menu was fine, left menu is just odd feeling.

  3. Aevylmar says:

    I’m one of the loudest people talking about how the side menu didn’t work. I’m sorry, but it still doesn’t work. It may be less bad, but it’s still cripplingly so.

    It wasn’t the left-to-right scrolling. It was the text being non-centered in the screen. If you look at, say, http://slatestarcodex.com/ (apologies for linking something political, it was the best example I could think of), you’ll note that, although there’s links and menus on the left, the posts are centered in the screen. The white area containing the text is flanked by two equal light gray bars containing links and ads, which are then themselves flanked by two equal dark gray bars that automatically adjust in size to your menu, so that the text box remains exactly centered in the middle of the screen. Your old layout, with the top bar, used to be similarly centered, but the new layout isn’t.

    There’s probably a solution that doesn’t require centering the text space, but I have no idea what it is. Facebook doesn’t cause this – it has other problems, but not this one – even though the text is non-centered. But the only way I found (with the most-recent-but-this arrangement) to read posts on your site without getting a headache was to make the browser window larger than my screen and then move it so that the sidebar was completely covered. I think I’m going to have to keep doing that.

    (tl;dr: at least for me, It’s the lack of centering that’s the problem, not whether the bar is on the right or the left.)

    1. Droid says:

      Couldn’t you just use Adblock to block all elements of the sidebar? It’s a dirty hack, yes, but since you’re apparently the only person so vocal about off-centre-ness, maybe you could fix it on your end? I’ve seen sites adjust their themes to more radical intrusions than blocking a vertical bar element correctly, so it might just work.

      1. Aevylmar says:

        The problem is that I have no computer/programming skills whatsoever, so I’m not sure how to do that. Someone below posted a thing, but I have no idea how to use the thing. Maybe it will be obvious from context?

        1. Droid says:

          So, I’ve used it on Firefox in the past, and there, it was different than it is now on Chrome, but both methods were 100% doable by everyone:

          1) Install the Adblock Plus add-on.
          2) Click on the big ABP sign to the right of your address bar.
          3) Choose “Block element” from the menu.
          4) Point at the thing you want to block. If it’s highlighted the correct thing, click on it.
          5) If some remains (scattered textboxes, icons or something) are still there, go to step 2).
          6) Enjoy a sidebar-free experience on this site for the rest of your life (unless it breaks when Shamus updates the design, anyway).

          It’s possible that ABP in Firefox still does blocking via the context menu, so in that case, you’ll have to right-click on the annoying thing and choose “Block element” in the right-click menu instead of the procedure above.

          But it’s still nothing horribly complicated. If anything, it’s just tedious.

        2. Wolf says:

          With the current layout of the site. If you zoom in enough or make your window slim enough the sidebar will jump to the top.
          It’s a bit of work you would have to do every article… but it might prevent your headache.

          Also maybe check if your neck is super strained and holding your head in an askew angle to read offcenter text is overtaxing your neck muscles.

      2. MelTorefas says:

        Aevylmar might be the most vocal, but they’re not alone. >.> I really really prefer centered text. I would definitely be using the adblock element hiding option if the text stays uncentered. I don’t mind the bar being there, though I do think I prefer it on top, but I can’t deal with the non-centered text long term.

    2. Olivier FAURE says:

      If you look at, say, http://slatestarcodex.com/ (apologies for linking something political, it was the best example I could think of),

      But it’s the good kind of political! :D

      There’s a lot of overlap between the kind of people who like TwentySided and the kind of people who like SlateStarCodex.

    3. vonloghausen says:

      Here’s a bit of CSS tweak that makes the menu bar auto hide and the rest of the site centered (including preview): https://twitter.com/vonloghausen/status/1037779917398847488

      1. Echo Tango says:

        Shamus plz, default CSS! :)

  4. Anonymous says:

    Top bar is fine with me, as long as it is not always there (i. e. taking up reading space). BUT, would it be possible to add the last two/three posts somewhere near the top of the page/in the menu bar? This might just be me, but I don’t want to miss a post, even if I’m here every day, so I scroll below the first post to see that I know the second one… until once a while, there are two posts and I would have missed the second one :/

    1. Olivier FAURE says:

      I think the easiest solution would be to use a RSS aggregator. For an hour of work, you get a much smoother browsing experience and mostly free yourself from the F5-F5-F5-F5 problem.

  5. Joseph says:

    I don’t know what it is, but I’m not a fan of having the menu on the right, though I really can’t put my finger on why.

    1. Bookwyrm says:

      I’m more or less here, though my finger goes to “That isn’t how these things are done!!!”

      I could get used to it (eventually), but to me, menus are either at the top or on the left by long standing convention. It just feels wrong to have it on the right side. Menus belong at the “front”, and the front is Top-to-Bottom, then Left-to-Right.

    2. TMC_Sherpa says:

      There is actually a good reason for the menu to be on the right. Most humans are right handed and if you’re using a touch screen your hand will block the display when you go to click on something.
      I used to do Crestron programing and there have been a ton of studies done on UI layouts and usability.

      That said… Having a sidebar with a white background with a predominantly black background center field isn’t super great and is probably causing most of the brain issues. An interesting test would be to stop the rotating background for a couple days and see if that helps.

  6. Amstrad says:

    As someone who’s used a feed-reader for years (Google Reader then Feedly and now Inoreader) I’m super used to a menu on the left and articles offset a bit from center on the right and wasn’t bothered at all by the menu on left layout. This same layout was used for a long time on other sites years ago (4chan comes to mind (youthful indiscretion)). On the other hand the number of websites I can think of with a right hand navigation is exactly zero.

    What I’m saying here is: Top or Left = Good; Right = Bad

    One more thing, have you considered making the background image fixed instead of scrolling?

    Edit: One more thought, in a hypothetical menu on top mode, couldn’t you add one of those ‘return to top’ buttons that just scrolls with the view?

    1. Amstrad says:

      Additional thought: Instead of trying to remove the extra space in front of ‘Archives’ and ‘Categories’ why not just add a space in front of the other text elements?

  7. default_ex says:

    Pretty sure you changed the mouse down to mouse up because on some devices mouse down is fired every frame the mouse button is pressed while mouse up is only fired when it is released. Always annoyed me in just about every input system I’ve worked with, had to rewrite the 3-state logic for pressed->held->released so many times now it’s silly.

    An idea for those Apple devices. Check coordinates against the boundaries of the note. Had to do that on a past website where we had pop-up boxes which mimicked an in-game item link when you moused over an item name the database we linked against recognized. Spent a ton of time on it to make sure it loaded whatever GUI skin the person viewing used in their game client or the game’s default skin if it couldn’t find the game on their system. Just to have 3 people out of the 180 or so unique visitors report the box never went away when they moused out of it. Since I was using mouse enter and mouse leave, which was only supported on the popular browsers at the time, I had to implement them myself.

    However I am crap at JavaScript. While sometimes I can do cool things like those item boxes I mentioned, majority of the time I struggle to do basic things. So maybe there’s a cool trick to it now that makes it a lot easier.

    1. Tektotherriggen says:

      A benefit of using mouse-up events, rather than mouse-down, is that you can easily cancel your click if you suddenly realise you didn’t want to. Click button, “Oh no!”, drag mouse off button while still held down, release mouse, nothing happens, “Phew!”. Completely irrelevant for footnotes, but for more important functions it can save a lot of grief. It’s surprising how often I realise I’ve made a mistake in that fraction of a second.

  8. Tuck says:

    Navigation menu on the right goes against pretty much every de facto standard in UI for the last 20 years (30? Not just on the web, in application design too). It’s just not what people are used to. It also looks weird (read “ugly” :P) having left-aligned text in a panel that’s right-aligned.

    I personally prefer the menu at the top, but then I practically never use it anyway.

    Change to mouseUp may have been to support selecting text, since otherwise dragging across a footnote (while selecting text) would pop it up?

    1. Echo Tango says:

      I actually prefer menu-on-right, from playing (nealry) all of the Command & Conquer RTSs. :)

      1. Confanity says:

        I don’t know if this is as strong as an “expression of relief,” but let me add that the right-side menu is totally fine in my opinion.

        And… this is probably something Shamus already checked, or that’s not possible given how the input works, but might the slight misalignment of the “Archives” link come from an extra space before the word? It doesn’t seem terribly likely, but it would mean that the text is actually perfectly aligned (as far as it’s concerned) and the visual oddity would be easy to fix.

      2. krellen says:

        I also prefer menu-on-right. Maybe the way I read the site is weird, but menu-on-left kept pulling my eye away, but menu-on-right is easy to avoid.

  9. Why not have a little hamburger overlay in the top corner (like on my site – http://peterchayward.com/ ) that, when you click it, pops down the whole menu? The hamburger can follow you around the screen, and everyone knows how to get to the menu from that without it taking up a bunch of real estate.

  10. David F says:

    The extra space in front of Archives and Categories is because they are dropdown boxes. The box element is properly left-aligned with the other list items, but there’s padding inside the box around the text. The easiest solution is probably to add padding to the other list elements to compensate, since removing padding from the boxes could make it look weird when the dropdown is opened.

    Edit: Looking at the code a bit more, you could probably put the text of the non-dropdown list items (the actual word “About”, for example, not including the icon) inside a span tag with a custom class that can be css’d to have the needed padding.

  11. Andrew says:

    I disliked the left menu, but I’m entirely happy with the right one.

    “loose” should be “lose” in the first row of your table.

  12. Scimitar says:

    When you mouse over the code block, it pops out to show you the whole thing. This is noticeable since this means it now floats over the menu on the right, which is for whatever reason somewhat jarring to me.

    Aevylmar above points out slatestarcodex as an example with side bars managing to have centered text, and it seems the key there is that there are two side bars, one on either side. On the left are the “more content” type things, while the right has more meta stuff like logging in, rss feeds, and advertisements.

    You mentioned how various screen usages are causing unforeseen problems, and I can see roughly two ways of looking at a screen that are useful: either you have a portrait view where there is less space to the side than vertical length, or a landscape mode where you have more side space than vertical. If all monitors were easily divided into one of the two categories you could have a top menu for portrait and side menus for landscape…

    But then there’s the problem of not all screens nicely conforming to one or the other, computer monitors usually being either square or sideways rectangles, and mobile devices being either a vertical or horizontal rectangle. I’m not sure what you’d pick for square views, or very mild vertical rectangles. It’s a complex problem that I don’t envy you needing to solve.

  13. aradinfinity says:

    I like the menu on the right side more than on the left, though it seems like that’s anomalous- I do feel like there should be a little more color there, like make the d20 a dark blue or something instead of a grey, but I’m not a web designer or anything, and that might grab attention to it that’s unwanted.

    As a note, if you were going to keep the side bar but wanted the post centered, I’d put the menu on the left and then have the comment creator on the right- that way, if I’m scrolling down an article and note something that I might not retain by the time I finish reading it, I can type in my response before I get down to the very bottom of the page.

  14. Gordon Wrigley says:

    For the Archives drop down you have a space character between the icon span and the actual select, that is the source of the additional space that Categories doesn’t have.
    Also to generally adjust the position of those two relative to the others you could put negative left margin on the selects, but the spacing is browser specific, so good luck with that, here’s some references https://stackoverflow.com/a/27006710/10471

  15. Droid says:

    Uhm, Shamus, it seems like you simply have a space symbol in front of the Archives dropdown menu when you have none in front of the Categories menu. You can even mouse over it and select it. It’s pretty much smack in the middle of the empty space on that line.

    EDIT: Gordon beat me to it.

  16. Mephane says:

    I do not like the menu on the right for two reasons, both somewhat particular to me and my setup, but possibly still relevant in general.

    * I don’t maximize my browser window. No seriously. I don’t need a ~2000 pixels wide browser window. So I have it docked on the left side (Windows does that nicely for you) and then pulled wide enough to be roughly at a 4:3 aspect ratio. To the right of the browser Window I have stuff like Discord and Steam chat open so I can take a glance at what someone has written without alt-tabbing. Menu on the right shifts the content to towards the left, however, which is rather annoying when I sit right in the middle in front of the screen. Now I have to turn my head a bit to the left to read the content. With the old, top-menu-centered content it worked well without noticing, but this shift to the left is noticable now.

    * The sidebar menu is so bright. The background image here is rather dark, the chat windows on the right are very dark, and in the middle there is not this distracting vertical strip of almost-white. This is what it looks like: https://i.imgur.com/0I7JPDT.png

  17. Zaxares says:

    Huh. Having the menu on the right-hand side IS less obtrusive, although I hadn’t even known that was a thing. If we’re going with the side-menus, I vote that it remain on the right.

  18. Thomas says:

    Is there any way of compressing the top bar more on a wider display? Could you have more than 3 columns of buttons or maybe put them into the same row as the TwentySided bar?

    I’m happy with how it displays on a phone now – although “Twitter” is out of line with the rest of the buttons for me on my phone and desktop is I reduce the size of the window.

  19. rabs says:

    Looks good to me.
    For those that want options, there is Greasemonkey, Tampermonkey or similar plugins. Maybe a way to please everyone is to provide and maintain a couple of configurations.

  20. Paul Spooner says:

    This works well for me. If I want the side-menu, I can make the window wide. If I want the side-menu to go away, I just narrow the window until it snaps to the top.

  21. rmt says:

    So, after having complained about the footnotes-not-closing-on-iOS issue last time, I decided to do some remote debugging with the iPhone Simulator. I’m not a web developer, more of a systems and industrial automation dev, but how hard can this stuff be, really?

    Turns out that on iOS, some elements are not ‘clickable’. This seems to apply to most content and scrollable elements. I believe it’s supposed to make touch scrolling work better or something. I don’t know. There are some details here (from older iOS versions, but it should(?) still apply.)
    In any case, snote_hide only gets called if I tap on any clickable elements. The only ones handy in a post are usually other footnote links. Unfortunately, this immediately shows another footnote (or the same footnote, again.)

    The quick and dirty solution would be to just register another event handler, but for the ‘touchstart’ event type:

    window.addEventListener(‘touchstart’, snote_hide, true)

    That solved the issue for me.

    A better way, maybe, would be to change the code for showing and hiding footnotes so that clicking/tapping on a footnote link while that footnote is open just closes the footnote (instead of immediately closing then showing it again.)

    Oh, also I like the new sidebar much better. It also doesn’t have the weird indentations any more that I had last time on desktop Safari.

    1. BenD says:

      Fun fact: Images are also clickable in this sense, and will close footnotes. (I’ve noticed this behavior also and this is my usual workaround.)

      1. olofos says:

        Thanks! I always have to go on a hunt for the previous/next footnote when I want to close a note. Never occured to me that clicking images work as well.

  22. MichaelG says:

    I read the site with an ancient Firefox, NoScript, and override page choice with my own colors and fonts. So I vote for “I don’t care — just give me the text.”

  23. Olivier FAURE says:

    My personal taste is:

    The kind of sidebar that you have (stays stuck to a side of the browser window, has absolute positioning so that it always stays with you when you scroll) only works for webpages that act like content dispensers, with an infinite amount of content that takes the full width of the page, and gets added as you scroll down. Examples: Youtube, Gmail, Google Drive, Firefox Pocket, Inoreader, StackOverflow (kinda), etc. All these websites have their sidebar on the left.

    However, a webpage on your blog isn’t a content dispenser, it’s a static article. There are two kind of sidebar designs I know for this format: the Wikipedia design, and the WordPress design.

    In the Wikipedia design, the sidebar is stuck on one side of the screen, and the main content fills the remaining screen space so there’s no empty space. The sidebar is often made to blend with the background, to make the rest of the screen feel like the main content. Examples: Wikipedia, Gamepedia, giantitp.com, archiveofourown.org (when you do a search).

    In the WordPress design, the sidebar is stuck on either or both sides of the main column, forming one unified body, with the background image/color on both sides of that body. Examples: SlateStarCodex, parahumans.net, Disqus, most StackExchange communities, most WordPress webserials.

    In both cases though, the sidebar usually has static positioning, so its content disappears when you scroll down. You say in your post:

    Once you scroll down, you lose access to the “return to homepage” link. Worse, on desktop displays you end up with VAST fields of wasted space on either side of the text.

    I don’t think that’s a major concern. Scrolling up is one press of the “Home” key if you’re keyboard-savvy, a click-and-drag on the scrollbar if you’re not. Same thing for the wasted space, you can always use the browser zoom or halve your window size if that’s a problem; sidebars shouldn’t be used to fill space.

    My personal takeaway is that you’re halfway between two designs: your sidebar sticks to one side of the screen like in the Wikipedia layout, but you have a detailed background image on both sides of the main content like in the WordPress layout. It makes the sidebar look unrelated to the main content, which makes it distracting.

    My recommendation: stick the sidebar to either side of the central column, or put it all at the top. Either way, lose the absolute positioning: it makes an element take up everyone’s attention, even though very few people need it.

    1. Alezul says:

      I don’t know how to quote but you said “It makes the sidebar look unrelated to the main content, which makes it distracting.”.

      That’s exactly my problem. That menu is much better on the right than left but still can’t ignore it. Maybe i need more time to get used to it but it’s a big bright thing that looks like it’s something unrelated to what i’m reading and i can’t scroll down to get away from it.

      I also always get here with rss so i read the article and i’m out. No need whatsoever for a menu..

    2. toadicus says:

      Just for representation I’m going to provide a moderately-dissenting opinion on the sidebar. I think that the high-contrast between the background and the sidebar, along with the ubiquitous nature of sidebars in general and the need for max-width content portions makes a fixed sidebar makes the sidebar as is a more-or-less perfect solution. It’s easy for me to tune it out because it feels like an obviously-different thing, the same way I tune out my browser’s navigation and window-dressing areas at the top and bottom. It doesn’t use up any of the real-estate that I want to be useful for reading the content, and it gives me the “go home” button where I want (well, that was better when it was on the left — “go home” is always on the left), whenever I want it. The “Home” button is not far away if I’ve got both hands on the keyboard… but more often than not I’m browsing with my hands in WASD+Mouse position because that’s where they live for work and that’s where they live for games, and then Home is a big forearm movement for either hand, and even a small shoulder movement for my left hand. Contrast that with a three-digit mouse movement up to the “go home” button and the persistent sidebar for desktop is a clear winner in my book.

      1. Olivier FAURE says:

        Curse you and your slightly different UX preferences!

  24. Olivier FAURE says:

    Bug report: whatever CSS flex layout you’re using to put the sidebar at the top when the screen isn’t wide enough, it’s triggered when I do a Ctrl-F search on Mozilla Firefox (which changes the effective viewport height), even though there should still be enough room for the sidebar.

    After some tweaking, I figured out that it was because the sidebar’s minimum height is a little higher than it looks: basically, the sidebar needs a little empty space below the Twitter button, and if it isn’t given that space, it shifts to the top of the page.

    I’m not sure there’s a fix for this problem (I think the sidebar needs space for the twitter box); it’s kind of annoying though, because it means the page layout changes dramatically every time I use Ctrl+F.

  25. wswordsmen says:

    As someone who was fine with the Top Down and didn’t like it on the left, the reason I didn’t like the left was because I kept reading it over because my process is

    1. Look for a picture telling me an post has started.
    2. Read on top of the picture for the title to decide if I am going to read it.
    2.5 Start on the left… no wait that is the menu
    3. If I want to read it actually start reading it.
    3.5 No wait that is the menu that is where I want to read is.
    4. At the end of each line return to the far left to begin reading the next line.
    4.5 No wait to far that is the menu again camouflaging itself because the big theme gap I am used to is now small and instead of just reading from the far left I need to actually pay attention where that small gap is.

    Honestly it didn’t bother me that much but I like it on the right better already. Since you asked I am assuming you want to know in way too many words.

  26. NPC says:

    Wasted space has never bothered me. I hesitate to call it wasted at all, negative space is always important to give content balance and room to breathe. If I want to fill in that space then I just shrink the window.
    Conversely, permanent menu on either side always bothers me, if only a little. It feels like it is muscling in on the main content and it’s kind of constricting, particularly as I almost never need to use it.
    It’s not enough to turn me away from the site or anything but since you’re collecting opinions, I will deposit one here.

    1. Dreadjaws says:

      Same here. I’d be more irritated if the entire thing was used for text. I think the backgrounds do more than enough to make use of that space.

  27. Mr. Wolf says:

    At first it felt like the menu was going to leap out and attack the main content at any given time, but it didn’t take long to get over that.

    Although I am still scrolling to the top of the page and clicking the title to try and get to the main page.

  28. BenD says:

    As directed I speak up: I love the fonts you changed to. Better by far than where this theme started you out. Readable, not too thin. I also love that the body of posts has padding on mobile, so the text does not touch the edge of the screen (problem in the old theme). And the whole comment-writing experience on mobile is hugely improved. Yay!

  29. Dreadjaws says:

    One thing I’ve noticed is that the people who disliked the wasted space problem of menu-top do not seem to be delighted with the side-menu arrangement. At least, none of them have shown up to express approval.

    Oh. Oh, Shamus, you silly naive man, you. You should know by now that people are extremely likely to complain when they dislike a change, but very, very unlikely to express approval when they do like it.

    That’s why we have “like” buttons (makes things easy for those who like something but don’t want to “waste time” expressing it) and precisely why so few systems have “dislike” ones (makes things even easier for all the people who are much, much more likely to show their displeasure).

  30. Echo Tango says:

    The main menu is mostly for newcomers, which means we can’t hide it away in a rollout bar of some sort.

    I’m not sure this is a useful assumption of new-person behaviour. Many websites have the hidden-by-default menu nowadays, and the “hamburger-stack” (three horizontal lines) icon is becoming ubiquitous. New people might be able to find and click on the expandable menu, by it using the same standard, that’s developing across the internet UI landscape. :)

    1. Fizban says:

      I’m gonna have to take people’s words for it on this “hamburger stack,” ’cause I haven’t seen it- or if I have, I haven’t noticed it.

  31. Inwoods says:

    I like it on the right, for what it’s worth.

    Mouse up instead of mouse down allows you to cancel. If you start to click on a link and then you’re like “maaaaaaaybe not” you can just slide the mouse away and not open it. I don’t know if it has any additional benefits for accessibility or touch devices.

  32. Narkis says:

    I like the menu on the right. It’s out there in the corner of my eye, not constantly bothering me when reading but within easy reach when I need it. I’ll second someone’s suggestion that it needs more color though. It looks odd as the only greyscale element in the site.

  33. tsc says:

    This is my favorite interface update so far. I do have a few issues with it though. First, the semi-transparent background on the article text looks cool but I can see it making longer articles harder to read. A solid background would be easier on my eyes. Second, while the right side menu is, imo, much better there than on the left, I think you could make it stand out less, perhaps by making its background gray instead of white.

  34. King Marth says:

    I was curious why the note captions in my RSS feed would sometimes start at [3] or so, but it makes sense that the numbers are autogenerated. Still, I wonder how that code is run for it to count spans outside of the article text… probably not a good thing if Feedly is running arbitrary javascript from sites in their embedded view.

    Also, wow, lines 10-16 are so close to functional paradigm, you’d just need to swap the for loop with a .foreach call on the array. It’s even defined that way, using an inline function; you’d be able to clean it up a little by passing the element as well as array index.

  35. Abnaxis says:

    I very much prefer the side-menu to be on the right if it’s on a side. I personally don’t like menus that follow you when you scroll away from them (top, bottom, or side), but if it’s going to be there on the right is WAY less distracting to me, almost painless.

    That’s about as glowing of an endorsement I ever give to modern interface designs :)

  36. LegendaryTeeth says:

    On a Galaxy S7, you can scroll slightly to the right even though everything fits nicely into the screen otherwise. It’s just blank space top to bottom and it feels like I shouldn’t be able to scroll horizontally at all.

  37. Mike says:

    For what it’s worth, I don’t really like the left menu. I’m used to sites having right menus so it’s distracting at the left, like its always in the corner of my eye, while on the right it feels like there’s too much wasted space.

  38. Fon says:

    Do you need more feedback? Looks like you’ve got a lot of comments already (and I didn’t read any of them), but let me add another one anyway.

    I’m a desktop (Windows 10) user who is aware of the wasted space on desktops, and to make use of that, I moved my task bar to the left side of the screen. Does it matter to me if the menu bar is at the left (or right)? Well, not really, but I think I was a little annoyed to see the menu bar at the left… though I’m sure I would have learned to ignore it soon enough. (As of this comment, the menu bar is at the top, so no comment about the menu bar at the right.) I don’t know if I was annoyed because I kept seeing the menu bar, but personally, I’m just used to seeing some empty space… so yes, I apparently like to see some space wasted intentionally…?

    Anyway, the con for having the menu at the top isn’t a problem for me. All I have to do is press “Home” on the keyboard, and I’m instantly there at the top… though usually I just use a bookmark to take me to the homepage, so I don’t use the menu bar to go back to the homepage at all. I guess that makes me a long time user.

    Btw, I think I preferred the old menu bar. You know, the one with the pictures and stuff? I think that was nice. The current one is a bit too plain and simple, if you ask me. Oh, the current videogame-themed background is nice though. Does it change everyday? … Well, no matter, just my two cents. As far as readers go, I’m probably not very picky about where the menu bar is located at. (I do prefer it to be at the top though, if I wasn’t being clear.)(And while I’m at it, I also like images of colorful dice. What? No function? … They look pretty to me, at least.)

  39. Algeh says:

    While we’re all being squeaky wheels…

    I prefer top menus that scroll away as I read to side menus (which, if present, I also prefer to have scroll away as I read), but it’s putting the menu at the top for the window size I’m using, so the current theme works fine for me in that respect and my preference may well be a function of my window size. If I’m using a giant monitor rather than laptop or mobile, I either have the monitor turned for portrait mode (I don’t know why more people don’t do this – my main work setup has 3 monitors and I always throw long text things to the one I have rotated to be in portrait mode because it’s so much easier to read text in narrower but longer form) or resize the window until it’s broken up into more frequent lines for easier reading.

    I like menus that stick around as I scroll if I’m going to be using the menu while I’m using the site, but on this site I only need nav stuff as I begin and end reading an existing article. I’m here to read and then maybe leave a comment, not interact with the text in the main article using the menu while I’m reading, so I don’t really want extra clutter while I’m reading the article text. You can compare this “menu can go away” use case to the “I’m using that menu” use case in a game, where I’m probably using the stuff in that menu to interact with stuff on the rest of the screen, or the grade/comment boxes in the LMS I use where I’m clicking on rubric scores and typing comments in the menu sidebar while I scroll through the paper I’m grading.

    I have an unrelated suggestion, though. I’ve been on an archive-dive lately, and I’ve noticed that it’s hard (well, by modern web design standards) to navigate to the next article in a category if you’re reading all the comments on each article first. You have the previous/next navigation at the start and end of each article, but not at the end of the comments section. Hitting “home” at the end of reading all the comments to get back to where the nav is isn’t exactly hard, but it is more friction than a lot of sites put in to read the next bit of something.

  40. “Allowing users to select the layout themselves would mean using cookies and Javascript.”

    I’ve stopped using cookies fully now in my own projects. Instead i use “localStorage” or “sessionStorage”, sure you need javascript to store and fetch stuff from them, but unlike cookies they aren’t sent with every damn request to a site (hashtagcookiesaredead).

    You could instead dive into the messy world of CSS media queries and pixel densities, I “think” you can have CSS present stuff based on display size and density, or handle real world screen size. But do keep in mind that mobile users (and their browsers) tend to allow pinch’n’zoom which is not something one normally does on a desktop display. There is also CSS code available now for dealing with “the notch” *sigh*. My advise, keep it simple, and make sure mobile users are able to zoom (i.e. do not block/prevent that in any way). Designing for aspect ratio and having the site adapt to that is the most universal and simple solution, when you get that working it’s rare that it ever breaks unlike the more complex stuff.

    As to the menu, I have to admit I’m able to ignore it easier than when it was on the left. It’s a tad bright though, make it dimmer or perhaps give it it’s own diffuse background? I also think the site favicon should match the logo in the menu (or vice versa) for consistency sake.

    As to the alignment of stuff in the menu…. Archives is more to the right than Categories, and Categories are to the right of Top Content which is a pixel to the right of Forums. But Forums is to the left of Support Me (or Support Me is to the right of Forums), RSS seems a tad to the right of RSS comments too. Someone mentioned rogue spaces but it looks like more than that to me.

    Changing the background color of the dropdown boxes is a good idea, you won’t be able to change the hover color of a option but the rest can be styled. Take a peek at the player menu of this web player (gotta click through the welcome/changes history the first time partly for legal reasons with royalties/licensing etc.) Once you go the player shown click the hamburger menu in the top right, there is an example of a custom styled select and options drop down list. That’s sadly as good as it gets unless you wan’t to roll your own using div tags etc.

    My tip. ditch the current div based menu, make it a “ul” (unsorted list) and use “li” (list items), style it using CSS to remove the bullet points (i.e. style that to “none”). The menu is a list so might as well make it an actual one. The code should be cleaner too and you won’t need the menu-item class, you just target the id of the menu and the child li’s instead.

    If you look at the CSS of that web player you’ll see that it uses:

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    That removes pretty much all default padding and margins browser have for stuff (with a few exceptions with input boxes and some other stuff).
    The box sizing set to border-box ensures that a “box” is measured as being the content + the padding + the border + the margin, instead of the older way that saw a box as ignoring the border and margin. Those three tweaks makes it easier to align up stuff.

    BTW! I see a “xmargin” in your CSS for the .menu-item left over from some testing? In any case It’s not valid css and is ignored.

    I also see your menu items are a mix of “div” and “span” and “a”, that’s just begging for alignment hell. They should all be the same. Somewhere something in your CSS or in the browser’s default CSS (all browsers have and use one to fill in “missing” stuff on web pages) has slight differences in the styling for those three. They should all just start with either just div or just span or just a, or as I suggested, make it all a ul with li’s.

    Also, the icon for Archives and Categories are not selectable but all the rest are. You should be able to fix this by making the icon the label for the drop down (this clicking it will open the drop down), I haven’t tested this so my memory might be fuzzy. Or just make the other icons not clickable, as long as the menu is consistent interactively.

    As to the tooltips, I think that was me (or partly me), you had them somewhat working but with issues I provided some code and you used that, you made a small tweak or two and it worked fine since then. I have no clue about mousedown vs up in this case either. Logically mouseup is correct (as keyup would be for keys) as it make it possible for a user to “abort” the action (moving the mouse away from the area from the link while pressed down for example).

    I forgot the criteria you had for the footnote stuff. But I seem to recall that one reason was you found it easy to type them in the way you had been doing it.
    I also seem to recall you could show them at the bottom of the the article in addition but I might remember that wrong.

    Theoretically speaking you could have the footnotes inline using just CSS and no javascript at all. Similar to how a pure CSS dropdown site menu would work, and that should work for all phone users.

    Searching for “pure css tooltip” (minus the quotes) I did find this https://koen.kivits.com/articles/pure-css-menu/
    You should be able to retrofit that into acting as a clickable tooltip. One downside is that if near a screen age these will go offscreen, but then again, so does your current ones. I’m unsure if you can do a pure CSS tooltip that places it’self within the viewable area (might need javascript).

    EDIT: Somebody in the comments of that linked article says that using “cursor:pointer” seems to fix the iOS Safari issue (this is the “hand” pointer shown for links in Chrome etc.) The current tooltips use the question pointer.

    I guess it would also be a starting point for a DIY dropdown list (you’d need to use overflow-y in that case).

    Oh! And here’s a fun thought experiment. That sidemenu space could be used to display your footnote when somebody click on a footnote. So if you wanna go crazy it could serve a dual purpose.

  41. Danakir says:

    Haven’t spoken up so far but I have to say menu on the left looks like the worst possibility to me so far. I’d much rather have menu on the top again.

  42. Liessa says:

    I still prefer the menu at the top, though it doesn’t bother me that much either way. And I also have the footnotes problem on my iPad, though I’m using Firefox rather than Safari. Another problem is that I can’t view spoiler text on the iPad – neither clicking on it nor highlighting it with the cursor seems to work.

  43. Nick-B says:

    Too many comments to scan through, so I’ll just offer this here:

    Shamus, have you noticed there seems to be an extra space between Archives and its icon? Perhaps the spacing is due to a rogue “spacebar” press somewhere in the code. If the code takes any un-escaped space as literal site content, perhaps you just have an almost invisible character inserted?

    The pointer turns into a text selection icon in the middle of the space, and that is usually only for when there is selectable text.

    EDIT: Opinion on the site re-re-redesign: It’s better. I’m not freaking out over your changes like some (apparently) are, but having it on the right is better. I tend to have browsers on my right monitor (left is centered for gaming). Thus, putting a menu on the right shifts the text of the articles (when full screened) to be closer to me than before.

  44. Leipävelho says:

    So far I think that the menu on the right is the best option.

  45. Dragmire says:

    Ooo, right side bar!

    Ok, I like this a lot more than the left side bar for a couple reasons.

    1.) I don’t find it nearly as distracting as having it on the left side. I’m not completely sure why but on the left side it felt like having a flashlight pointed at your face right beside a book you were reading.

    2.) It’s the layout of Command & Conquer so I find the layout nostalgic and aesthetically pleasing!

  46. Bubble181 says:

    And just to make sure all squeaky wheels are heard: I seriously dislike the right-hand menu.
    Personal preference was probably the top, and if it’s going to be on any side, the left, but I can adapt to all of it…Though the right side looks off to me.
    What is probably the very *worst* thing you could do, by the way, is center the text for the whole width while still having a sidebar – it’ll look horribly lopsided to most normal people.

    That said, I do like the current font, the backgrounds, and the style of the menu, though it could probably be a bit darker to contrast less with the backgrounds – while still being clearly separate, of course.

    A lot of the comments on left/right seem to be from people who aren’t using their whole monitor, or are using multiple monitors (one for gaming and one for text, browser in part of the screen with the rest taken up with other apps/programs like Steam, Discord, etc,…). Not to put too fine a point on it, but if you’re going to be repartitioning your screen anyway, you already, by default, have the capacity to ignore menu bars on the left or right – the idea is, after all, to have those other things in your peripheral vision and the main window in your main vision. Frankly, most of those people will adapt fairly easily to one bar more or less.
    The people with physical problems seem to have a problem simply “blocking off” that part of the screen – I find this somewhat strange since I assume they don’t have a problem reading a book lying on a table without starting to read on the far side of the table cloth, but, you know. They’re probably the one with the biggest reason to complain.

  47. baud says:

    My screen is not wide enough (1368*766) to show the menu on the right, but menu on top works very well for me, so I’m good with the current design.

    You can see at some point I commented out line 3 and replaced it with line 4, where it responds to mouse UP events rather than mouse down. I’m not sure why I made that change

    I’m betting on some obscure cross-browser compatibilty issue. Or an IE bug (I’ve recently, at work, had to work around one IE bug).

    Also I don’t since when the code listing expand when I hover over it, but it’s really cool and make reading the code much easier!

  48. Jack V says:

    FWIW, I really like the pop-ups. I mean, I don’t mind the sort of change you’re considering to fix the make them go away, that would probably improve them in general, but I like footnotes that pop up like that. And I don’t usually like extra javascript in my reading.

  49. It’s been my experience that most squeaky wheels are simply people who dislike change, any change, and they’ll get used to it if left alone. Can never please everyone, so please yourself. Plus, that way you don’t have to listen to their increasingly detailed and ridiculous “reasons” for why X way is THE BEST WAY ZOMG.

  50. Piflik says:

    I do not really like the menu on the right. Top was fine, as was left, but right seems off.

    Besides that, at least on Firefox, the Archives and Categories dropdowns are really badly formated: There is no spacing between the last character and the dropdown-button, they have different width and the worst thing is that the menu itself is wider, so while it is left aligned with the links, its right edge sticks out past the dropdown-button.

  51. Gautsu says:

    Any theme is fine, until it interferes with your other content man. As long as you keep writing you can change your stuff every day if you want.

    1. tmtvl says:

      Seconded, every theme change so far has been fine, we can adapt to anything.

  52. Iunnrais says:

    For the sake of squeeky wheels, let me just say that Top is most preferred for me, right is grudgingly okay, and I hated left (for aforementioned scanning reasons). I would prefer if the text area was centered, but lack of centering doesn’t freak me out as extremely as it does for other people.

    As for the “Archives” link being misaligned… I notice that when I highlight the side bar, only for “Archives” is there an extra bit to the left of the word Archives that gets highlighted, similar to if there’s a table with an extra empty cell there. I don’t know if that tidbit will help troubleshooting any. It is just a teensy bit irritating, like a gnat flying around the room.

  53. Matt Dunnam says:

    Maybe you talked about this in an earlier post, but why not a sticky nav?

    Something like this:
    https://www.w3schools.com/howto/tryhow_js_navbar_sticky.htm

    There’s even a way to change the nav on scroll so that when you’re not at the top of the page, only some of the nav items are visible – so you can have a full nav at the top of the page that turns into a compact nav once you’ve scrolled.

  54. Orillion says:

    I really like the menu being on the right because now the text is more or less centered for me. I use a regular 16:9 display, but my browser is Vivaldi, which allows me to have my tabs stacked along the left side of the screen.

  55. Fr33Lanc3r.007 says:

    Quick note regarding Apple devices. It’s not just Safari, Chrome on iOS has the same problem with closing footnotes.

  56. Rick C says:

    For the Archives thing, it looks like–silly as it is, you have a  which I guess is the calendar icon, then a closing span tag, then a select. In between those are a couple of spaces. I think if you take them out the word “Archives” will line up with the rest of the menu. At least, in Firefox, it did when I removed the spaces with the F12 dev tools.

  57. Ramsus says:

    Personally I preferred the menu up top. But I could live with it on the left. For some reason having it on the right is super distracting for my eyes. Like my brain keeps forgetting what is over there on the right when I’m looking to the left and as soon as it enters my peripheral vision again it sends me a “WHAT’S THAT OVER THERE TO THE RIGHT!? SOMETHING IMPORTANT MAYBE?” kind of signal for just long enough that it’s actually something I notice. Which is a fairly new experience to me as far as reading text is concerned. The end result being that its placement on the right repeatedly distracts me from reading.

  58. Richard says:

    Kaselehlie Shamus,

    Ahi tungoal en wahu ong komwi oh ahmw peneinei, my respect to you and your family. I would like to inform you that I like this new layout much more than the previous one. As you mentioned, many of us–including myself–naturally scan left-to-right, and so the bar on the left was constantly noticed. I find this much more comfortable with the menu on the right. Since the majority of your readership is from anglophone countries, I suspect that most individuals will approve this new template over the previous. Regarding the menu at the top, I have no preference though I appreciated easy links to your various long-form series e.g. Mass Effect, Final Fantasy 10, and Batman: Green Arks & Ham.

    Ni wahu oh karakarak,

    -Richard

  59. Lisa says:

    I’ve actually yet to see the sidebar left or right. From when you started this through to today, I only have a top menu. I’ve tried both Pale Moon and Chromium on Linux. I have the browser set to be ‘widescreen’, if that helps.

    Hmm, a bit more playing and I find that my browser ‘usable space’ is normally set to be: 1879×704 pixels.
    If I maximise the browser window (which gives me a usable space of 1887×911 pixels), then it shows me the sidebar.

    I like the sidebar when I see it :)

    Further Edit. If I play around with the window size, I flip from top panel to side at about 1879×733

  60. Misamoto says:

    Only read the site during my commute from a phone :) Don’t notice the menu shenanigans at all and am pretty confused with what everyone’s talking about :)

  61. zompist says:

    Since you’re in the code anyway… I wish you’d make the “keep reading” area bigger and more prominent.

    Right now you have an enormous blue box to go to the previous article in a series, while the “keep reading” link is just bold + a color. The prominence levels are backwards. If I’m here, I always want to “keep reading”; I very rarely want to “stop reading this and read the previous article instead”.

  62. LadyTL says:

    I prefer top over right and right over left for the menu bar. I still find it a bit too bright to be honest though. Your site is no longer giving me headaches as a plus with the move to the right! Maybe as a color make it the same color as the post background? That light blue? color?

  63. Philadelphus says:

    Well, people have complained about the menu being located at the top, left, and right. Clearly the only rational compromise that will satisfy all parties is to have it at the bottom.

    More seriously, I found the right-side menu strange when I first came to this page, but I’ve already adjusted to it in the time it took to read the article and all the comments. For some reason my brain apparently picked up the menu text in my peripheral vision every time I’d go back to the start of a new line, but it’s fine with filtering it out when I’m clearly reaching the end of a line.

  64. Cilvre says:

    I’m fine with the side menu’s but I still don’t like the current font choice.

  65. Geoff says:

    Throwing yet another suggestion into the pot (because I’m sure you don’t have too many of those already): I like top bars and having them anchored so that they can always be accessed is helpful, but the bar as formatted is pretty big. One way to do that would be formatting the top bar as a narrow bar (smaller icon, all the links formatted in to a row or two) and then anchoring it to the top so that it scrolls with the window.

    The other solution, which I’ve seen before (though I can’t think of where so as to provide a useful example…) is to have the the full size top bar at the top of the window, but when you start scrolling it collapses into a thin bar that scrolls with the window. So it would have a smaller, single line title / icon (maybe just the D20, or the D20 + “Twenty Sided” to the right of the icon) and stripped down to only the most relevant links (maybe Search, Archives, Categories, Patreon link and maybe a Next / Previous post link if you want to get crazy).

  66. GTB says:

    Here’s my squeak: I like the menu on top because I -like- the big empty space on either side of the main article window. Now it’s asymmetrical and that is making my right eye do this twitch thing it does when my OCD kicks in.

  67. stratigo says:

    The top doesn’t disorient as you read it once and then your eyes progress down the page.

    It likely has to do with how you read. Some people read word by work, some by chunks, et cetera

  68. toadicus says:

    I’d like to recommend that on mobile themes the main menu go into a menu icon hidden in the top right corner, probably behind a “three horizontal bars” icon (apparently that’s called a “hamburger” icon — I found that out Googling for “mobile menu icon”). This is standard interface language for mobile sites the world over so it feels very approachable to me, and you can keep the “go home” icon in the top left in the 20-sided logo. “Go home” icon on the top left, optional title in the middle, hamburger button on the top right that flies out the rest of the menu.

    The reasoning behind this is that right now you can’t see any content on mobile. I’ve got a fancy new mobile phone with a high-resolution screen (not a phablet, but one of the larger Real Actual Phones on the market) and the menu is taking up the top third of the screen on every page. Then we get a little padding, the top article title, the post meta, and then the top half — maybe — of the Diecast image. When I scroll down a bit farther I’ve got a Really Big Nav button (the link to Diecast #224 is 3 lines deep), and then finally I get to the Big W that kicks off the Diecast #225 post.

    Even if the top menu was only one line deep up at the top we still wouldn’t get to the content. We’d be all the way to the bottom of the padding under the navigation buttons, but still not to the Big W. Ideas there: maybe reduce the size of the post title font on mobile (but not by much) or maybe ellipsize the navigation text on the buttons (so we’d see “< Diecast #224: Sp…" instead of the three-line button.

    Vertical real-estate is expensive and scrolling to start engaging content is a turn-off in my experience. I'm going to keep doing it anyway, because I like the content… but you may consider this wheel squeaky.

  69. Kdansky says:

    What everybody else is doing is using Bootstrap (by Twitter). It’s a CSS framework that resizes depending on size of the device/browser window. It works very well but has a bit of a learning curve.

  70. Blork32 says:

    I may be late to the party, but in an effort to be a “squeaky wheel,” I’d like to say that I did not like the side aligned menu, but now that it is right aligned I do.

  71. AMX says:

    Purely selfish comment:
    The menu on the right looks good on my main monitor.
    Only on that one, due to the asymmetrical way my monitors are crammed in whetever they fit, but that’s the one that matters for this purpose.

  72. Roofstone says:

    Yeah the sidebar still doesn’t work for me. Having it on the right is a noticeable improvement, but it is still just a giant white box in the edge of my vision constantly hounding me. Plus having the webpage be entirely off center is less than appealing.

    It is a uncomfortable reading experience.

  73. Unbeliever says:

    I liked the left menu slightly better, but on the right is also fine if it seriously bothers other folks. Either is way better than having it at the top, and a great usage of dead space.

    The main section being off-center isn’t a problem. It’s visually quite clear where you need to look, and easy to tune out the side menu until you need it.

    TLDR: Leave things where they are now. Squeak squeak. :)

  74. EwgB says:

    I like the menu on the right. I’m one of those old readers, so rarely use the menu (almost never if I think about it), and on the left it definitely felt more intrusive. I think a left side menu makes sense on a site where everybody uses it on a daily basis, like in GMail, but here it is more convenience rather than an often used tool, so left or top makes more sense.
    Like the new, clean design, by the way, that still manages to retain continuity to the old one with the D20 in the logo. I mean, it doesn’t make sense to new people, but it gives us “old folks” another opportunity to reminisce and feel superior about! :-)

  75. kaljtgg says:

    “Some people say they dislike the left-menu because it feels wrong or alien. Apparently left-to-right reading habits have them scanning over the useless (to them) sidebar every time they visit the site.”

    This is exactly how I felt. PLEASE keep it on the right!

  76. BenD says:

    Ooh! It looks so great on mobile all of a sudden! Love the dark blue header and disclosable menu!

  77. The Rocketeer says:

    Left menu was bad. Right menu was worse. Top menu is good, though it has a lot of wasted vertical space on my screen. I like the translucent blue.

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun. Your email address will not be published. Required fields are marked*

You can enclose spoilers in <strike> tags like so:
<strike>Darth Vader is Luke's father!</strike>

You can make things italics like this:
Can you imagine having Darth Vader as your <i>father</i>?

You can make things bold like this:
I'm <b>very</b> glad Darth Vader isn't my father.

You can make links like this:
I'm reading about <a href="http://en.wikipedia.org/wiki/Darth_Vader">Darth Vader</a> on Wikipedia!

You can quote someone like this:
Darth Vader said <blockquote>Luke, I am your father.</blockquote>

Leave a Reply

Your email address will not be published. Required fields are marked *