Improve compatibility with relevant browsers and devices

[uakci]

I'm all for this.

I can add mobile responsiveness right away; old browser support I could try to work on as well.

-------- Original Message -------- On 20 Nov 2019 08:25, Hoemāı wrote:

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[lynn]

on my Android phone running Chrome, I see:

• the page content is off center (probably, the content div should cover the whole view if the browser window is small enough. so no white page with contents framed, just the contents)
• the accent font size is off

[uakci]

Just 2¢ more from me: It might be worth it to collapse the table into sequences of rows for smaller screens.

Please leave the c11y work to me — it's my due. :P

[solpahi]

This is what it looks like on iPhone SE Safari 12.4.1:

I don't yet understand why it only happens in some places. Lesson dialogues and translation exercises don't seem to have smaller tone letters, except for the last one in each lesson, as well as every Fill in the blanks exercise.

[uakci]

@solpahi Safari (WebKit) is known for its willy-nilly rescaling, especially in landscape.

Relevant thread elsewhere: https://www.sitepoint.com/community/t/css-fails-when-changing-device-orientation/103223/6.

[uakci]

Note: I will have to scale the whole layout of the website by 20% in order for it to be possible at all to make the content fit on small screens such as my or your phones.

Once that's done, I'll ask you to resubmit your screenshots.

[solpahi]

Isn't it possible to simply apply two different renderings depending on the device? It doesn't seem right to sacrifice the "normal" design just to accomodate mobile users. I would prefer it if the original sizes were retained. Even the reduction to 700px width doesn't sit well with me, and scaling images beyond their own resolution like on the landing page is not good either. I know mobile compatibility is not easy to achieve, but I'd rather wait for a method that doesn't sacrifice the original design.

[uakci]

Sure enough we could do this… but it'd require:

• two versions of the lined paper graphic (one downscaled by 20%);
• a massive amount of mobile styles (as every instance of 20px and 25px, as well as values derived therefrom, would need to be replaced with 16px and 20px respectively).

This would be a lot of unnecessary work. Besides, 20px is already a lot; 16px is, I dare say, easier to read for longer passages of text.

Alternatively, we could ‘relativize’ the whole design so that the font size is expressed in relation to vmin; this would result in extremely consistent scaling across all platforms that support it.

@solpahi

[uakci]

For reference, here's what the page renders like on my mobile device. The text is extremely legible — so much so that the overfrequent line wraps make it hard to read again.

[solpahi]

Alternatively, we could ‘relativize’ the whole design so that the font size is expressed in relation to vmin; this would result in extremely consistent scaling across all platforms that support it.

That might work. I don't know enough about it to judge whether there are better methods. If it produces the desired results, that's all that matters.

For reference, here's what the page renders like on my mobile device. The text is extremely legible — so much so that the overfrequent line wraps make it hard to read again.

Yes, it doesn't make full use of the limited space available on a mobile screen, creating too many wraps.

[uakci]

I'll try relativizing, then.

[solpahi]

Discord user Xeizzeth noticed a problem with the audio elements in Lesson 0. They don't stay within the screen width.

Screenshot: