The top header AKA Title bar AKA “Tool bar”.
The Toolbar keeps similar behavior to the current design. I.e. it is narrow, retracts on scroll-down, and reappears on scroll-up. This is the default behavior of the Polymer app layout:
The essential elements are, from left to right:
Hamburger for nav drawer
≡ Middle Discourses 🔍 🗪 ⚙ ⋮
Tools and chat are context dependent.
Toolbar background color should change according to context. Rather than the pastel yellow we use currently, we should use a bold color as usual for MD. We can define distinct colors for:
- Home page
- Suttaplex lists
- Text pages
- Search results
- Static pages
Let me discuss each item in turn.
##≡ Main site navigation
Opens the nav drawer.
This one is cute:
MD typically eschews the traditional “Home” icon. Instead, “Home” appears at the top when the nav drawer is opened. This is seen both in Inbox and the MD specs site.
Meanwhile, the Toolbar displays a context-dependent title.
- On suttaplex lists, this would replace the “caption” on the division pages of the old site.
- On text pages, we can have the Sutta title and translator.
- On search pages, “search results”
For apps where search is not the main purpose, such as SC, MD specs say display just the icon by default, and expands on click.
Use expandable search
There are a number of different styles of search fields in MD apps. I dislike extreme search fields, where clicking on the icon radically changes the view (like, say, https://www.wired.com/). Better to modestly expand from the current position, as for example, https://material.io.
Connection with Discourse is similar to use of social media widgets, etc.
Display forum icon on every page, with badge indicating the number of conversations
In the old design, we import snippets from Discourse and list them. This could be done in the new design, using an MD list to display content in a popup.
However, I am leaning towards thinking that this is unnecessary. The forum has become fairly well established by now, and there is less need to promote it. In addition, it is already more prominent in the new design, being visible, with a mention-count, on every page. So I propose that we deprecate this functionality, and instead:
Click on the forum item leads to the relevant search results on Discourse for that sutta.
Use MD dialogue
Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.
Dialogues can include a greater variety and complexity of interactions as opposed to Menus.
The Tools dialogue only appears on Text pages. By appearing only then, it calls attention to itself.
- Textual Information
- Lookup dictionary
- Script switcher
- Text & Translation view selector (not yet implemented)
- ⇄ Parallels and References
Here is a discussion of each element.
Toggle with a switch
Use a dropdown
Rather than having separate “select” and “activate”, as currently, include “none” as one of the options.
The script switcher allows to select one from a group.
Use a dropdown.
###Text/Translation view selector
The Text/Translation view selector allows the user to compare the translation with the original text in a variety of ways. Each of this has its own use case.
- Columns are good on a wide screen.
- Line by line is for narrow screens.
- Popup is good for occasional checking if using a mouse.
Use a radio button group.
###Parallels and References
Open “suttaplex URL” in new tab.
Metadata displays the information as in the current metadata tab.
In addition to the info currently available, extract data from github, such as contributors, last modified, etc.
Menus in MD display a list of choices, with one choice per line. They are not used for primary navigation. Represent with a three vertical dot icon (AKA vertical ellipsis) at the far right of the Toolbar.
Whereas the Tools is for the text pages only, the Toolbar Menu applies site-wide. Here we can include:
- Change site language
- Abbreviations (include “Numbering”)
- Free, Open, Safe
- About SuttaCentral
###Change site language
This switches the UI, etc., i.e. it applies the i18n.
Use a dropdown menu. Also see:
Among the many, many disadvantages of help pages:
- Who uses them?
- When was the last time you ever used a Help page on a website? Was it in a year that started with a “2”?
- According to Google Analytics, the current Help page accounts for 0.01% of our page views, with a bounce rate of 100%.
- Hard to update
- Each time the site changes we have to check it. Our current Help hasn’t been updated for years, and I am sure it has lots and lots of wrong things. Who cares? Not me!
- It’s almost impossible to anticipate answers to specific problems with a general solution.
- Consider the different people who will use the site
- Someone goes on to the site who knows nothing about computers. Like, literally, say a Burmese monk who has just got their first Android phone and has never used the internet before. “Click” on a “link” or “use search” or “open sidebar” are just meaningless to them.
- Someone else comes on who wants to know how to extract JSON data via our REST API.
How are supposed to cater for both of these with a generic Help?
- Let Help die already. Use Discourse instead.
Use a Stripe form:
Downloads, Acknowledgements, Methodology, Abbreviations, Bibliography, About
These all lead to static pages. We can review them, but otherwise they stay much the same.
###Free, Open, Safe
Here we can include:
- Copyright policy
- open source policy, link to Github
This page is expanded from the current Copyright page, and gives an overall view of the ethics and legalisms of our site. If we call it “copyright”, it sounds like we are making copyright claims, rather than relinquishing them, so let’s call it the opposite.
We can explain the copyright situation as currently. In addition, promote the open source nature of our work, encourage people to fork the repo, etc. And we can make an assurance that there is no advertising, tracking, etc. on the site.