Optimize Layout for mobile browsers

[harimm]

There are a few things which hinder using futurecoder from a mobile device. Although the IDE works great, the UI elements are not properly aligned and the login/signup button as well as the table of contents overflow into the course description below.

Fixing this would greatly improve the usability on mobile devices

[harimm]

I am not aware of the user base who would use mobile, so not sure about the priority for this. But if someone stumbles across futurecoder on mobile, they should not be turned away due to the broken layout is what I think

[alexmojaki]

On my mobile chrome, I can tick 'Desktop site' which mostly fixes the layout problems. It's still not great because everything is too small, but it doesn't look broken as you say. Is there a way to make mobile browsers treat it that way by default? There's a tag in index.html which looks relevant: <meta name="viewport" content="width=device-width, initial-scale=1"/>

[alexmojaki]

On a related note, I find it almost impossible to type code into the editor or shell. Things like autocomplete and capitalisation are constantly interfering. If possible they should be marked as 'raw' input fields so that mobile devices use the most basic keyboard possible.

[harimm]

Desktop sites are not "mobile friendly". It kind of mitigates the problem temporarily, but if we need to reach out to more to mobile userbase, a proper mobile layout and your second point - mobile friendly editors would become necessary

[alexmojaki]

It kind of mitigates the problem temporarily

Yes that's exactly what I want to do.

if we need to reach out to more to mobile userbase

I'm skeptical of how much we need to do this, but if we eventually do, it seems like a large project and maintenance burden. I don't want to go there any time soon.

[harimm]

It may not be a large project for a person with enough amount of frontend experience. Let's keep this open and see if someone comes up. (Or I would love to take it up, just not in the near future)

[alexmojaki]

It's not simply a matter of fixing some CSS so that things no longer overlap. There's no way to fit the editor shell, course content, and buttons all on the screen at the same time. A proper mobile UI would need to work completely differently, and just figuring out that UI design is already a challenge. And it will need to be kept in mind every time we want to add a feature to the desktop UI.

I'm not saying this should never be done, but I really doubt it will be done soon. In the meantime I think it's definitely worth it to use the 'desktop' site because as you say it damages futurecoder's reputation.

[harimm]

You got a point there. There are more things involved. Let me update the title a bit to reflect that. I suggest we keep this open as a "nice to have" until there is a significant demand (or someone is excited to take this up?)