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.<\/p>\n
What’s new?<\/p>\n
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.<\/p>\n
So let’s talk about this main menu some more… <\/p>\n
Given: We need the main menu. People don’t need it often, but when they do<\/em> need it, they really<\/em> 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.<\/p>\n These are the places where we can put this menu:<\/p>\n 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. <\/p>\n (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.)<\/p>\n 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.<\/p>\n 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. <\/p>\n Still, there’s one major issue left, and I’m a bit stumped…<\/p>\n Apparently, people using Apple mobile devicesAnd thus Safari browser.<\/span> can’t close footnotes. Normally, you can click on the little number like this oneHi there!<\/span> 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.<\/p>\n If you’re curious, here’s the Javascript:<\/p>\n 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. <\/p>\n Some other notes:<\/p>\n 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. <\/p>\n 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<\/em>. 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.<\/p>\n","protected":false},"excerpt":{"rendered":" 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[111],"tags":[],"class_list":["post-43949","post","type-post","status-publish","format-standard","hentry","category-notices"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/43949","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=43949"}],"version-history":[{"count":23,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/43949\/revisions"}],"predecessor-version":[{"id":43987,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/43949\/revisions\/43987"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=43949"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=43949"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=43949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n Location<\/th>\n Advantage<\/th>\n Drawback<\/th>\n<\/tr>\n \n Menu on Top<\/td>\n 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.<\/td>\n 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.<\/td>\n<\/tr>\n \n Menu Left<\/td>\n The “Home” link is always visible, and the menu now occupies that empty space that was wasted on desktops.<\/td>\n 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.)<\/td>\n<\/tr>\n \n Menu Right<\/td>\n The “Home” link is always visible, and the menu now occupies that empty space that was wasted on desktops.<\/td>\n 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.<\/td>\n<\/tr>\n<\/table>\n Footnote Popups<\/h3>\n
\r\n\/\/call this function once the page has loaded\r\n window.addEventListener('load', snote_init, false);\r\n \/\/window.addEventListener('mousedown', snote_hide, false);\r\n window.addEventListener('mouseup', snote_hide, true);\r\n\r\n \/\/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.\r\n function snote_init() {\r\n var snote_elements = document.getElementsByClassName('snote');\r\n for (var i = 0; i < snote_elements.length; i += 1) {\r\n (function(i) {\r\n var snote_element = snote_elements[i];\r\n\r\n snote_element.innerHTML = '[' + snote_element.title + ']<\/span>' + '' + snote_element.innerHTML + '<\/span>';\r\n snote_element.style.display = 'inline-block';\r\n snote_element.addEventListener (\"mouseup\", function () {snote_show(i)}, false);\r\n })(i);\r\n }\r\n }\r\n\r\n function snote_hide (arg)\r\n {\r\n var snote_elements = document.getElementsByClassName('snote_tip');\r\n for (var i = 0; i < snote_elements.length; i += 1) {\r\n var snote_element = snote_elements[i];\r\n snote_element.style.visibility = 'hidden';\r\n }\r\n }\r\n \r\n function snote_show(arg)\r\n {\r\n var snote_tip = document.getElementById('snote_' + arg);\r\n\r\n \r\n if (snote_tip.style.visibility == 'visible') {\r\n snote_tip.style.visibility = 'hidden';\r\n } else {\r\n snote_tip.style.visibility = 'visible';\r\n }\r\n };\r\n<\/pre>\n