This thread will be used to communicate about the bug fixes specified by @sujato:
Hi David,
there are a few outstanding bugs affecting mainly iphone. Below is the minimum job, we will find some more things for you once we start.
The header disappears at the top of the page. This is really annoying and makes the site borderline unusable. When you go further down the page the header behaves as it should, but when at the top it just vanishes and there’s not much you can do about it. This also affects the search: when you click on the search icon, it goes to the top of the page, and hence disappears.
The sidebar is still not swipeable. (Actually I think this is the case for Android, too)
The script changing buttons on the Pali texts don’t work.
I have noticed that there is a semi-related bug that I will also address while fixing the ‘vanishing header’ issue: It seems on FireFox, that the header never goes away and is always visible. I will look into this while investigating.
@sujato, Question for you on the ‘script changing button’ not working. Can you clarify what you are seeing for me? I assume you are referring to these buttons:
They do seem to work for me, but the response is slow and the side panel does NOT automatically close which might be wanted for small screen sizes?
Any clarifications are appreciated.
I will be checking in fixes for the first two issues shortly.
Yes, that’s the right thing. On the iPhone I used, the buttons simply didn’t work. I can’t recall exactly what model it was, but I can check for you in a day or two.
Should the screen auto-retract? Not sure, what do you think? Someone might want to do more than one thing in the sidebar, so perhaps best to supply a natural choice to put it away. In Android, if I recall correctly, you’ normally swipe it back: what would be the normal iPhone behavior?
Yes, that is a tough UX problem. I think, for now, let’s leave it to the user to close with a left-swipe (which should now be working properly).
I am going to call this round of fixes ‘done’ once I check in and deploy to staging for you and others to test.
A suggestion for future bug work: It seems there are issues when a device is rotated from horizontal to vertical layout. This should be seamless and is not working properly in my (limited) testing.
Compare the “Languages” button under “Navigation” with “Lookup Language” under “Tools”. The latter is incorrect, it should be like the “Languages” button, i.e. with the the triangle before the word, and shifting to a downwards pointing when the dropdown is displayed. Also, ensure that these are all the same size, currently the sizing is inconsistent.
Here is another example of inconsistent sizing: https://suttacentral.net/dn16 The triangles should be bigger, about 2em, but without wrecking the line height and other spacing. Also, the popups on these pages have drifted away, they should come up near the triangles, not way off to the side.
And one further bug on this page: very weirdly, the “cite” widget, which should appear below the table, is in the popup in the final row of the table. Compare https://suttacentral.net/dn1, where the cite button appears in the correct place.
These little details just seem to drift if you don’t keep your eye on them.
I have had the chance to test staging on iphone 4 and 5s.
The problem with the header disappearing has been fixed, and also the sidebar can swipe to close now. I realize now that “swipe to open” the sidebar won’t work on iPhone, as this behavior by default goes to the previous page. So thanks for all this!
The main bugs have been fixed, but there are a bunch of minor bugs that were apparent only on the iPhone 5s; all these work fine on the iPhone 4. Both of these are pretty much stock, without browser addons and so on.
The “Textual Information” button works fine to show the extra stuff, but it doesn’t hide it.
The script selector still doesn’t work.
The Search is flaky; sometimes it works, sometimes it just sits there and doesn’t expand to show a search field.
The “Pali Lookup” also seems flaky, although this is barely usable on a touchscreen anyway.
Finally, I still don’t like the fact that the triangles are of different sizes everywhere: in the “prev/next” links at the bottom of the page on the iPhone they are ridiculously large. I don’t know why this is such a problem: perhaps we should define a “triangle size” in SASS and ensure that they are consistent everywhere.
but, bhante, it’s inconvenient and counterintuitive and already driving people nuts
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.
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.
