Mobile layout

[aubertc]

There are at least three issues with the layout on (my) mobile phone:

1. the CC icon is not properly displayed (that's most likely a font issue),
2. the footers are ugly (table too short?)
3. the spacing between the "alternative formats" and the tags is too narrow.

[whmarsh87]

Part of the issue is that font sizes are based off em and % in the code. What this means is if 1em, or 100%, is set by the system to equal 16pt, it will always equal 16pt in every situation. What will occur is that a phone or tablet will have 1em equal to a smaller font size (most likely at least) when compared to a desktop; however, it is also (most likely) the difference of 16pt and 14pt. Keep in mind, these are only example pt values to highlight the fact that screen sizes will reduce faster than em to pt value will. This is not a statement of what these values are, just what a relative reduction is reasonably expected to look like. Font cannot reduce at the same rate that screens reduce or an individual will either be squinting on mobile or be presented with massive text on a computer. This leads to a situation where what displays well on a computer, which tends to have more width than height, won't display well on mobile or tablet, which tend to have more height than width. The other side of resolving this issue is that page layout needs to adjust as the available width gets smaller as, while some play with chosen font size can be done (1em reduced to .95em or .9em), that can only occur so much before text becomes too small to read.

The website at full screen:

The website at half screen:

The website at a quarter panel:

The website as small as I can reduce the window (close, but not perfect, proxy to the amount of space available for mobile displays):

The footer, on a computer, in a fully reduced down window:

[whmarsh87]

Another issue, which I would throw into the mobile-issue bucket, is the navigation at small sizes is not ideal.

From the main page, a user is left with this graph as the only means to get to another page:

And then from any page that is not the main, a user only has these links at the top to navigate:

I would argue that the graph is not a common method or navigation and it being the only manner on the main page is not intuitive. I would also say it is not good to have what a user must interact with to navigate change from page to page; additionally, it is not good for the location to change (graph is at the bottom of the main, links are at the top of each satellite page). I think having a fixed nav bar across the top of the page would be better for situations where a side navigation bar no longer fits on screen. While I think the text on the satellite pages are better than the graph, something to keep in mind for mobile is that there is no mouse. That text looks like normal text, and a user cannot hover over it to notice that it is in fact a link. While it is a link color (blue) and not the text color (white), it's a little too subtle for the primary mode of navigation. Making something more visually definitive that it is the navigation for the website would be significantly better.

I will also say, the navigation should either be fixed to the screen, where it cannot scroll off, or some method to quickly return to the top, such as links for "return to the top" at the bottom of each section and page, would make it more user friendly on mobile. When navigation is at the top and can scroll off page, should a user need to go to a new page while at the bottom, they will have to scroll up the entirely of a page to reach the navigation. Couple that with the fact mobile has less width- meaning all displayed content will have significantly more height to it due to end of lines occurring sooner.

Paragraphs with width to display them:

The same paragraphs with less width to display them:

[whmarsh87]

After familiarizing myself with Quartz a bit more, the sidenav isn't behaving in the same manner as all "left" marked items. Figuring out if this is a setup issue or a Quartz bug could start to resolve the navigation portion of this issue.

Desktop layout:

Mobile layout:

Desktop display:

Reduced display (on desktop, but the same on mobile:

[whmarsh87]

Quartz does have emitters for Desktop-Only and Mobile-Only. Will need to familiarize myself with Quartz more to determine how to best utilize this functionality for dynamic displays:

[aubertc]

https://quartz.jzhao.xyz/layout#layout-breakpoints:

The breakpoints for layouts can be configured in variables.scss.

This may solve one or two of the issues you discuss above. We would have to edit

https://github.com/princomp/princomp.github.io/blob/quartz/quartz/styles/variables.scss

[whmarsh87]

I checked the Quartz website this morning while looking at the breakpoints.

The "explorer" part of the nav on their website also disappears, so that behavior might be by design:

[whmarsh87]

Checking on mobile, they also suffer from the same limitations with a mobile display. I'm not a fan of only the bottom positioned graph existing for the main page and then top header links being the nav on satellite pages, but that might be a limitation of Quartz. There may be a method to override the behavior with an adjusted behavior or insert a fully custom built nav, but, barring either of those options existing, it may also be something we have to live with.

It will come down to what are simply default declared behaviors and what are fixed behaviors.

[aubertc]

There may be a method to override the behavior with an adjusted behavior

Yes, it's detailed at https://quartz.jzhao.xyz/layout

It's a question of adding / removing the Component.MobileOnly( and Component.DesktopOnly( around

princomp.github.io/quartz.layout.ts

Lines 33 to 36 in 384fd00

	Component.MobileOnly(Component.Spacer()),
	Component.Search(),
	Component.Darkmode(),
	Component.DesktopOnly(Component.Explorer({sortFn: sortFn})),