OK, deployed to staging and ready for testing. Note that the branch I am using is called: DaveBugFix1
Dave
Thanks I will check it as soon as I can. I’l be able to check with an iPhone tomorrow I hope.
Could you say something more about the rotation issues?
Also, another small detail for you. The look and behavior of the triangles that we use in the sidebar is not consistent.
See a page such as https://suttacentral.net/pi/mn1
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.
although now it’s extant on Chrome
as soon as the scroll bar is moved it fades out of sight under the top
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 
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
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
A few clarifications…
-
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)?
-
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):
-
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
- 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.
-
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.
-
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.