improve display on mobile phones #40
Conversation
improve display on mobile phones and other small devices + whitespaces in styles
domel
added
the
spec:editorial
|
@domel Do you have a concrete example where this change makes a difference and what this difference looks like? |
|
@hartig yes, actually on any mobile device this page (and others display badly). The most common issue is with tables that extend beyond the right margin. The result is a scroll on the x-axis, which is very annoying and unreadable. You can check this on your smartphone or in a desktop browser by pressing F12. |
|
What do you mean by "this page"? This one here on github? That one looks fine in my mobile browser. Here's a screenshot:
Can you please point out concrete tables in the actual spec draft that you have a problem with, ideally using screenshots (and, ideally, screenshots before and after the changes in this PR). |
|
I mean spec document. All tables have problems. If uou want I can take a screenshot later. |
|
|
|
|
|
I'm a bit surprised that you don't see the differences between these two websides of spec. I specifically tested it on 43 different devices and it displays the same bad everywhere. It is worth remembering that nowadays more traffic is generated by mobile browsers than by desktop browsers. IMO it's worth taking care of these users. Maybe I'm weird or maybe it's because I used to be a front-end developer. |
|
Just because there is more traffic from mobile browsers in general doesn't mean that there is any significant traffic to W3C recommendations from mobile browsers. If this change makes viewing worse from larger-screen devices then it needs to be rethought. |
1 similar comment
|
Just because there is more traffic from mobile browsers in general doesn't mean that there is any significant traffic to W3C recommendations from mobile browsers. If this change makes viewing worse from larger-screen devices then it needs to be rethought. |
|
@pfps If you think that the current desktop view is not good enough, I can improve it so that different styles are for desktop and different for mobile devices. |
|
you can check again |
|
There are three or four cases here:
Concepts isn't a good example - it has two tables, both of which are additionally style with ".simple" but I do see a worsening: PC - narrow window: Chrome : different tabs, same window.
SPARQL Query:
Would I've uploaded SPARQL query from "main", from "rwd" and with work-break to make it easier to try out at different widths and different devices: https://afs.github.io/sparql-respec/Screen/sparql-query/index.html#sparqlGrammar https://afs.github.io/sparql-respec/Screen/sparql-query-rwd/index.html#sparqlGrammar https://afs.github.io/sparql-respec/Screen/sparql-query-break-word/index.html#sparqlGrammar |
|
I think |
|
The "media" seems to stop zooming out to see the table, whereas the current set up does (Chrome on a OnePlus6). |
|
The Web-Developer Extension can be helpful for previewing such things in various screensizes (click to activate the extension, then the Resize tab, then View Responsive Layouts). If the preset sizes are not sufficient, you can Edit Resize Dimensions.... I would not expect many people with the tiniest phone screens to try to read docs like these thereon. Tablets, large phone screens, desktop, and printout should be our primary concerns. |
|
@TallTed - no longer relevant, due to later changes, and the setting is deprecated. |
I may not be representative but I read W3C specs on a smartphone 90% of the time. |
|
@domel — What's your smartphone's screen size & resolution? My current iPhone 12 Pro Max is 6.7″, and 1284 x 2778 pixels at ~458 ppi. I could read most W3 TRs on it, but I find the touch environment ill-suited to my web surfing. The original iPhone was ~3.5", 320 x 480 pixels at 163 ppi, and I think very few — even fewer than those who would use their phone to read W3 TRs — are still using such. These would be the people "with the tiniest phone screens" I referred to. I also think that those who are most likely to read W3 TRs on phone screens are also the most likely to have the largest phone screens with the most pixels available. |
| code { color: #ff4500; } /* Old W3C Style */ | ||
| div.abnf { margin-left: 1em; } | ||
| @media (max-width: 850px) { | ||
| table { overflow-wrap: anywhere !important; } |
There was a problem hiding this comment.
What effect does !important have here?
|
The most complex table in this doc is labeled A list of the RDF-compatible XSD types, with short descriptions" (and that trailing quotation mark should be deleted), in §5.1 The XML Schema Built-in Datatypes. This table currently exhibits mid-word breakage enabling the table to fit within the smaller windows, instead of keeping words unbroken and overflowing window width. I'm wondering, why are the CSS changes not the same for all documents? Possibly because they were created over time, and hence got different CSS to start? It seems to me it would be better to make the same CSS apply to all the documents, though I'm sure this will entail a fairly large piece of work. |
…h short descriptions". See #40 (comment)
…h short descriptions".
|
I fixed the trailing quote issue. |
Unfortunately, HTML in documents is very dirty and heterogeneous. Probably because a lot of people edited them for many years. I think I'll try to unify the specs structure in the near future, but it's a complicated endeavor that will take me a couple of weeks. Of course, I think it lends itself to new PRs. |
This reverts commit d310888.
Improvement display on mobile phones and other small devices + whitespaces in styles
Preview | Diff