seminars
seminars copied to clipboard
roed314
Mobile Usability issues
From Google:
Mobile Usability issues detected on mathseminars.org To the owner of mathseminars.org: Search Console has identified that your site is affected by 3 Mobile Usability issues:
Top Issues
The following issues were found on your site:
Viewport not set
Text too small to read
Clickable elements too close together
We recommend that you fix these issues when possible to enable the best experience and coverage in Google Search.
To add a specific work issue to this. On my phone editing a seminar schedule is unusable as the date boxes are almost completely off the edge of my screen.
I'm not sure editing is the top priority (do you really want to edit the seminar schedule on your phone)? I would focus on viewing and searching first.
That is an issue also in the desktop if you make your window narrow enough.
It looks like most parts of your page should already work on smaller screens, perhaps with minor css adjustments. The bottlenecks seem to be, as Edgar mentioned to me, the tables that you see in the different browse pages. Replacing the table rows by "two rows" on small screens should be doable using css alone, but without using tables but rather divs (and grid layouts).
But first one should find solutions for more basic problems of tds that have too much content. E.g. very long titles, very long lists of institutions, very long lists of speakers, very long lists of topics -- they all ruin the layout. One simple option is to give text only one line of a fixed length of space, where everything beyond that gets replaced by "..." (or if you want, by nothing, i.e. a hard cut as the lmfdb does for the overview of all knowls (which I dislike by the way)). This can be done with css alone. Another option is to give text a fixed number of lines and a bounded length of horizontal space, and again use "..." or "" for the remainder. This seems to be not universally available in css, but can be done with js. Another option is a dropdown list, where you for example click on a "..." and get the remainder of names, institutions, topics. Something like this would also make people naturally restrict the number of topics to the most relevant ones. But if you for example only show 2 topics by default, perhaps you also want to give the users the choice which two topics are the most relevant ones.
About the viewport: In the end you want the meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your <head> section, and adjust the css styling and @media queries from there to make the page responsive, meaning in particular that there should be no horizontal scrolling possible/necessary.
And your filters on top of the browse pages have a lot of categories. A good solution for small screens could be a container for the categories with fixed height that is horizontally scrollable.