[Bug] SEO problems on mobile devices with the GRASS GIS manual pages

[neteler]

Describe the bug There are notable SEO problems on mobile devices with the GRASS GIS manual pages.

• Text too small to read
  • see: https://support.google.com/webmasters/answer/9063469#small_font_size
• Clickable elements too close together
  • see: https://support.google.com/webmasters/answer/9063469#touch_elements_too_close
• Viewport not set
  • see: https://support.google.com/webmasters/answer/9063469#viewport_not_configured
• Content wider than screen
  • see: https://support.google.com/webmasters/answer/9063469#content_not_sized_to_viewport

Random example: https://search.google.com/test/mobile-friendly/result?id=nIc8LtrwxGgKXYAouSsizw&hl=en --> https://grass.osgeo.org/grass82/manuals/r.walk.html

Expected behavior

The manual pages should be responsive, i.e. mobile friendly.

Proposed solution for "Viewport not set"

It appears that fixing "Viewport not set" seems solvable by simply adding the next line to the page header:

<meta name="viewport" content="width=device-width, initial-scale=1">

which is easy to do here as in an additional line 42:

https://github.com/OSGeo/grass/blob/841e0b39811083e1b86b93b5500864d3f1558a1a/man/build_html.py#L41

Result of a test

Current state without viewport:

• content not readable

Potential fix with viewport:

• content readable
• menu is gone (but not really useful anyway on narrow mobile devices)

If the viewport meta line makes sense I can open a PR.

[tmszi]

* menu is gone (but not really useful anyway on narrow mobile devices)

Maybe we could replace this menu with hamburger menu (HTML + CSS but without JavaScript), example is here https://dev.to/ljcdev/hamburger-css-no-js-2dfa and https://codepen.io/ljc-dev/pen/NWxJezy. What do you think @neteler?

[neteler]

Interesting idea!

[neteler]

The "Viewport not set" issue has been addressed in main (for the upcoming G8.3.0), releasebranch_8_2 (for the upcoming G8.2.1), and releasebranch_7_8 (for the upcoming G7.8.8). The other issues are still open.

[tmszi]

Module manual with hamburger menu (hamburger menu icon is showed for screen with width < 1023.99 px and for screen width > 1023.99 original right TOC menu is preserved).

Example r.basin.fill module:

Hamburger menu icon (screen width < 1023.99 px):

Hamburger menu (screen width < 1023.99 px):

Preserved right TOC menu (screen witdh > 1023.99 px):

Hamburger menu icon and menu close icon (SVG format) is drawed be me in the Inkscape, with color which respect GRASS GIS brand.

Example r.basins.fill module HTML man page I attached in the ZIP archive module_html_man_with_hamburger_menu.zip

How to test:

A. Localhost

1. unzip module_html_man_with_hamburger_menu.zip
2. firefox-bin module_html_man_with_hamburger_menu/r.basins.fill.html
3. Mozilla Firefox Ctrl + Shift + M the keyboard shortcut for responsive design
4. Change screen layout width < 1024 px

B. Upload HTML example page into our Apache web server

1. Test example HTML page on the tablet or mobile device screen

[neteler]

For easier testing with Desktop and mobile, I have copied it here:

https://data.neteler.org/tmp/module_html_man_with_hamburger_menu/r.basins.fill.html

[neteler]

Hamburger menu (screen width < 1023.99 px):

Works pretty well on my mobile phone! Could the vertical empty space be removed (i.e., make it more compact)?

[tmszi]

Could the vertical empty space be removed (i.e., make it more compact)?

Something like that (reduced height of empty space between links)?

grassdocs.zip

[neteler]

Thanks, updated here for easy inspection: https://data.neteler.org/tmp/module_html_man_with_hamburger_menu/r.basins.fill.html

[veroandreo]

This is how it looks like on my phone - does not seem responsive when I zoom in further:

How to get a responsive zoom level to make it more readable? I liked the zoom level in the last screenshot of @neteler's proposed fix with viewport

[tmszi]

This is how it looks like on my phone - does not seem responsive when I zoom in further

Yes, you are right. This example HTML source code is without @neteler PR #2591 (without fixed viewport).

How to get a responsive zoom level to make it more readable?

Could @neteler upload this example HTML r_basins_fill_html.zip (with fixed viewport) please? Thanks.

[neteler]

Could @neteler upload this example HTML r_basins_fill_html.zip (with fixed viewport) please? Thanks.

Done: https://data.neteler.org/tmp/module_html_man_with_hamburger_menu/r.basins.fill.html

[veroandreo]

Could @neteler upload this example HTML r_basins_fill_html.zip (with fixed viewport) please? Thanks.

Done: https://data.neteler.org/tmp/module_html_man_with_hamburger_menu/r.basins.fill.html

muuuch better now :)

[neteler]

The "Viewport not set" issue has been addressed in main (for the upcoming G8.3.0), releasebranch_8_2 (for the upcoming G8.2.1), and releasebranch_7_8 (for the upcoming G7.8.8).

This change has good impact!

[neteler]

Could @neteler upload this example HTML r_basins_fill_html.zip (with fixed viewport) please? Thanks.

@tmszi would you be willing to submit the mobile menu change as a PR?

[tmszi]

@tmszi would you be willing to submit the mobile menu change as a PR?

Yes of course PR #2606.

[neteler]

FYI: The current state (SEO could still be improved) - compare to above plot:

[neteler]

Closing as it is pretty ok now.