Design
About designing the Online Portal.
Spacing
Placing elements to where they belong.
Being a mainly-informational website, we space elements like a text document. Thankfully, HTML was originally built for our purposes.
An inline margin is applied to each page to limit its width. This simulates the ratio of a document in portrait orientation, which in turn means less eye movements than the conventional website.
Whitespace characters are used as spacers where appropriate. Selectable trailing and leading whitespace characters are avoided for clutter-free text. You can try selecting the entire page and inspect the highlights to verify this.
Colors
Comfortable yet distinguishable.
We want to ease the reader's eyes with a readable contrast. Colors must not be too contrasting to discomfort, but they must also be quickly distinguishable from one another.
The Online Portal uses one of two opposing color schemes: light and dark, [depending on the user preference]. Their colors differ only by their lightness to be consistent with their denotations.
Graphics
For illustrations and branding only.
We want the Online Portal to be accessible with 2G connectivity,[1] and thus are meticulous in its use of resources. External graphics are used only for illustrations and branding, and that they must be manually-processed to reduce their file size while retaining the intended amount of detail.
- Since 09/04/2021, we can no longer verify this in practice since 2G is no longer available from our provider.
Weighing
Limiting the amount of page content.
In hopes to reduce information overload and/or pollution, we use two heuristics to limit the amount of page content.
The first uses the page menu as an indicator, such that--under our standard rendering environment--its items must span only a single row.
The second limits the number of menu items to six per page.
The limit is reached when one of the two conditions is met.
Of course, a menu item can correspond to a long section, so this solution is imperfect.