search

flutter / website

Flutter documentation web site
https://docs.flutter.dev
Other
2.82k stars 3.23k forks source link

Code snippets are impossible to read due to 10 letter visible column on mobile #2313

Open juliankim opened 5 years ago

juliankim commented 5 years ago

S9, Android 8, Firefox.

It's nearly impossible to read code snippets on mobile as you can't fully expand, zoom in/out on code snippets.

The most code snippets on the doc are wasting the half, sometimes even 2/3 of screen width with excessive white spaces.

Make sure you get rid of excessive margin, paddings on mobile. Better yet, try to keep things in new lines in block structure manner for each HTML elements. There is absolutely no reason for code snippets to have outside left indentation on mobile.

sfshaza2 commented 5 years ago

@chalin, thoughts?

chalin commented 5 years ago

We're almost in the same situation for our other Dart sites. (I'll comment a bit more later.)

chalin commented 5 years ago

Here are examples from dartlang.org:

screen shot 2019-01-30 at 13 25 08 screen shot 2019-01-30 at 13 23 24

This is from flutter.io:

screen shot 2019-01-30 at 13 26 49

So we do have a bit more margins on the left and right, but not that much more. I expect that most folks view code in a landscape view like this:

screen shot 2019-01-30 at 13 26 56

Of course the problem is exacerbated by the fact that in some cases we show code excerpts under a bulleted list or a numbered list and that pushes the indentation even further:

screen shot 2019-01-30 at 13 28 05

In conclusion we should adjust margins on mobile, but it would buy us much. @InMatrix @galeyang @fertolg - any comments about this?

InMatrix commented 5 years ago

@juliankim Could you tell us how often and under what circumstances do you use Flutter's documentation from a mobile phone? We're under the impression that developers use our documentation mostly from a desktop browser. We might be overlooking something here.

juliankim commented 5 years ago

@InMatrix it's not just about how often people use it on mobile in my opinion. It's about having a completed, fully functional website, not "half-responsive" website.

I have written my own opinion on LinkedIn. https://www.linkedin.com/feed/update/urn:li:activity:6496341900012945408

ened commented 5 years ago

@InMatrix To answer your question, I often check Flutter docs before heading to bed, or while commuting. RSS feeds often link to interesting articles, which follow up with links to the documentation site.

While a mobile site hardly is enough to go to extreme detail (like, reading the source for some standard widgets), I'm thankful for any website that provides dense content in such context.

InMatrix commented 5 years ago

@ened Thank you for telling us how and when you use Flutter's documentation on mobile. @juliankim We do want to make the website display its content properly on mobile. It's really a matter of prioritization.

I'd say reducing the right and left margin of snippets on mobile could be helpful. The snippet does allows me to scroll it horizontally, FWIW.