Bug Fixes For Mobile and More

in Chrome in order to get the navigation panel revealed the scroll bar must be nudged a tad

Yes, that’s what is supposed to happen.

but, bhante, it’s inconvenient and counterintuitive and already driving people nuts :smile:

why would the users be forced to perform redundant movements if the navigation panel can just stay in sight all the time? it’s not a hindrance

shouldn’t they be able to immediately access the menu from whatever place they’re at on the page? i would guess this is what implied by user friendliness

You can access the menu from wherever you are, that’s the whole point. You just scroll or swipe upwards a little and there it is. Much easier to use than conventional menus, where you have to scroll all the way to the top of the page. It’s a widely used behavior, and it’s staying.

It doesn’t drive people nuts: we had a complaint, which was a bug, and it’s fixed, and said user is now happy!

yes i misunderstood his problem due to similarity to what i’m witnessing

but maybe you misunderstood what i’m describing

nowadays for the desktop the convention is that the menu always stays in sight, which is not the case with Suttacentral

in using the menu the difference is simple

currently: 2 movements A) nudge the scrollbar so the menu appears B) navigate away

ideally: 1 movement - navigate away

you explained that navigation panel disappears to free up space for mobile devices, which is legit, only that i don’t think that convenience for mobile users must come at the expense of desktop users convenience

true, this is trifling, but this is still so, and i thought this behavior could be a glitch

my report is actually in line with what you commended me for

I will chime in with some statistics that I found. Like many things with user interfaces, their are strong personal preferences one way or the other. These preferences even change on the individual level over time - an example would be the absolute horror that Facebook users expressed when the ‘news feed’ was first launched.

In our case, with the vanishing header vs always-visible-header vs scroll to the top to see the header, we have some evidence that the current tilt is strongly in favor of the design that @sujato has chosen. Here is one poll on the subject that leans 66% vs 33% in favor of this method: https://scotch.io/bar-talk/weekly-poll-is-hidingshowing-a-fixed-header-good-ui

Ideally, there would be a preference setting for such things. Maybe sometime in the future.

Dave

unfortunately the poll results don’t differentiate between mobile and desktop users

it could well be that the positive answer was mainly given by mobile users

for the desktop i cannot understand how disappearing navigation panel could be favored, unless it fades in at a mere mouse hover by the top and so doesn’t require additional moves, a realization, which i have never seen thus far

Thanks for the research! One thing to bear in mind is that, while we want to follow best-practices of modern web design, we don’t follow them slavishly. I’m also a Dhamma teacher, and I have a didactic purpose in building the site. It’s not just about what users want, it’s also about training in what we should want. People should learn to read the suttas without distractions, and that’s the whole purpose of the site design. A menu says “be somewhere else”. No menu says “be here”. I think what we have now is a good solution to this.

Yup, that is what I like about your development methodology. I also happen to like your design direction and think that it makes sense. My Facebook (FB) example was actually addressing this exact issue where FB decide that the news feed was how people should be interacting on a social website. In the case of FB, I happen to find issues with their decisions, but I think the minimalism and purity of your site makes complete sense.

Back to the main job, how are we going with things? I’ve been pretty much distracted these past few days. I think the relevant bugs are squashed, is that right?

If so, there’s another mobile-oriented job i wanted you to look at. That’s the search result pages. They are not too bad, but could probably do with a little mobile optimization.

Have a look at the following:

https://suttacentral.net/search?query=cat

https://suttacentral.net/define/babbu

Can I ask you to check these and similar pages on mobile and ensure they display well? For the “define” pages, we can suppress the left column on narrow screens if need be.

do you, bhante, mean that the site only caters for studying sutta texts with dhammic motives ?

which indeed warrants paring down distractions to a minimum

that said obviously when the navigation is still one move away, concealment of the menu can’t hold a user off from leaving the page if one so wishes

distractions are inside the mind (uddhacca) and not on the page

Hi @sujato and @blake ,

Sorry, I had some distractions as well over the last few days. Back in the saddle here now and here is where we stand:

The bug regarding the disappearing header does seem to be fixed, but the first thing I will be looking into this morning will be how it was fixed and if my changes were incorporated from staging back into Master. There was a message in this thread regarding a “stab in the dark” by Blake to fix things and that may or may not have been using the code that I wrote in the branch. I will see if I can get a hold of @blake to confirm/determine where we stand with all of that integration stuff.

I still need to look into these other bugs you mentioned:

as well as the search result bugs:

Dave

@sujato,

A few clarifications…

  1. Here is a 2em triangle. Is this about the size you are looking for (note that you might have to base you decision on the relative difference between the old and new size since suttacentral distorts images)?

  2. I could not see anything different in the location or behavior of the ‘cite’ widget on the two pages. However, I did see a big difference in the page margin (see images for both pages below):


  3. I also noticed that the popups (on hover) are not visible at very small widths (ie portrait mode iPhone for eg). It looks like the are being clipped rather than floating above their container as they do on larger width screens. Do you WANT to hide the popup at small widths? Or shall I show them? Note that either choice will require some mods.

Thanks,
Dave

  1. Okay, so we are seeing different sizes here, this is obviously the problem. See below screenshot on my desktop:

The triangles are too small, here, this is why I said 2em; however in the examples you give above, the basic size is fine, and the “2em” size is way too big. So it must be something in how the CSS is interpreted differently. On my mobile (Galaxy Nexus) they show up just as in your screenshots, which is fine. So there is a glitch in the desktop CSS.

  1. The cite widget is indeed fine, must have been some glitch, so we can forget that. The difference in page margins is fine, the tables are flexible because they include different amounts of infomration.

  2. The popups should show, and they should be consistent across platforms. They are too far away currently from the triangle. If there’s a widley-employed standard for this, we should use it. Popups are never a great idea on mobile; so if you have a better suggestion I’m open to it. However the information in them is very specialized, so it won’t be that often it’s needed on mobile anyway.

@sujato,

Thanks for getting back to me. In regards to this:

I would argue that these pages are actually identical in content (5 columns each, column titles are exactly the same, both are using the same grid layout, etc.). These should really have the same size grid IMHO. For example, if the grid width jumped around like that while scrolling down the page of an excel document (ie somehow based on the content of the particular rows) it would be very disruptive. You can most easily see the problem by opening your browser to a fairly wide width and then put this in as the URL: https://suttacentral.net/dn16 . Next, put this in as the URL: https://suttacentral.net/dn1. Now use the ‘forward’, ‘back’ buttons of your browser to switch back and forth. Ugly.

Dave

@blake, @sujato,

Here is one for Blake to look into. From the ‘textual details’ pages such as the ones that Sujato mentioned above ( eg URL: https://suttacentral.net/dn16), if you select one of the main navigation tabs (say, “Sutta”), then you are taken to this page: https://suttacentral.net/su Which looks like the drop down menu, but actually is not. Once this is displayed, the real menu will simply display over it.

Give it a try and you will see if this is not clear.

Dave

Honestly, I think it’s fine. I’ve been using it for years, and I’m kind of a stickler for typgraphic design, and I don’t have any problem with it.

I see what’s happening, not sure if there’s anything wrong with it. The menu “panels” have their own URL, and if you click on them you are on that “page” Like all pages on SC, they have the top menu bar.

If I remember correctly this was in case of JS failure.

Is there some reason this is bad?

Hmm, hopefully we are not understanding each other as I can see no reason that the menus should behave differently on this particular page as opposed to any other page. Maybe this short video will explain better. Notice how the first click brings up the menu page rather than the popup menu (which is what happens on every other page when you click the tab): https://youtu.be/qilfMDKO3S4