🌐 Website Issue | Can't scroll down to the bottom of the 'Software'-submenu (mobile) #872

Closed
opened 2019-04-17 11:13:57 +00:00 by Hanouta · 5 comments
Hanouta commented 2019-04-17 11:13:57 +00:00 (Migrated from github.com)

Description

When I visit privacytools.io on my smartphone, the last entry of the 'Software' submenu (Productivity Tools) gets cut off, making it very hard to click on that entry(it's impossible to scroll down further). My smartphone has a 5.1" 16:9 1080p screen, but it's pretty easy to reproduce this issue on desktop browsers by making the window size smaller.

Screenshots

Screenshot

## Description When I visit privacytools.io on my smartphone, the last entry of the 'Software' submenu (Productivity Tools) gets cut off, making it very hard to click on that entry(it's impossible to scroll down further). My smartphone has a 5.1" 16:9 1080p screen, but it's pretty easy to reproduce this issue on desktop browsers by making the window size smaller. ## Screenshots ![Screenshot](https://user-images.githubusercontent.com/46742447/56282917-96453600-6110-11e9-8b47-2cf1e721b6b4.jpg)
Offpics commented 2019-04-17 19:15:43 +00:00 (Migrated from github.com)
Related: https://github.com/twbs/bootstrap/issues/23374
abbluiz commented 2019-04-20 11:22:25 +00:00 (Migrated from github.com)

Yes, I can confirm this issue. Tested on a 6.22", 1440p smartphone.

Yes, I can confirm this issue. Tested on a 6.22", 1440p smartphone.
five-c-d commented 2019-04-25 19:54:34 +00:00 (Migrated from github.com)

on my smartphone, the last entry of the 'Software' submenu (Productivity Tools) gets cut off

There are two ways to get around menu-size limitations: reduce the size of the menu-items (smaller font), or reduce the number of menu-items. Smaller font or less whitespace is a bad idea, because people with poor/elderly eyesight won't be able to read the items, as will people in high-glare or unstable-screen situations (outside or in transit or walking ... or walking down the aisle of a moving train with sunlight streaming in the windows is all three at once)

To reduce the count of menu-items, is difficult but not impossible. One of the easiest ways is to merge similar/overlapping categories.

  • Combine the Email_Clients and the Email_Alternatives into a single "email clients & email alternatives" subpage or just "email clients&alternatives" subpage.
  • Similarly, in another draft-post, I'm already going to be recommending that IM+VoIP should be not just combined, but outright merged/blended, because back in 2015 there were a lot of IM-only tools and a lot of VoIP-only tools but in 2019 almost all of them have converged... they don't all support confcalls, and some of them only support async-voice-notes via audiofile attachments rather than quasi-realtime cryptocalls. But the overlap is very strong. In the short run, combined onto one page, makes sense
  • File Sharing + File Sync, those are similar enough they could be combined
  • Calendar Sync + File Sync, alternatively could be combined
  • Digital Notebook + Productivity Tools, again very similar categories, could combine them onto a single subpage methinks

To be clear, I'm not suggesting that email-clients and email-alts should be merged into a single category, I'm just suggesting they ought to be 'combined' i.e. on the same subpage, so that the submenu will have one less menu-item.

By contrast, voip+im is something I believe should be merged (eventually) to just list top3-in-the-merged-category but that is a different question... to reduce the menu-item count, for now, it makes sense that having im at the top of the /im_and_voip subpage and then further down having voip, would solve this bug about being unable to tap a menu-item. If they eventually get merged into a single im&voip tools listing, that is also fine, but that is a separate and distinct step from merely combining them onto a subpage.

> on my smartphone, the last entry of the 'Software' submenu (Productivity Tools) gets cut off There are two ways to get around menu-size limitations: reduce the size of the menu-items (smaller font), or reduce the number of menu-items. Smaller font or less whitespace is a bad idea, because people with poor/elderly eyesight won't be able to read the items, as will people in high-glare or unstable-screen situations (outside or in transit or walking ... or walking down the aisle of a moving train with sunlight streaming in the windows is all three at once) To reduce the count of menu-items, is difficult but not impossible. One of the easiest ways is to merge similar/overlapping categories. * Combine the Email_Clients and the Email_Alternatives into a single "email clients & email alternatives" subpage or just "email clients&alternatives" subpage. * Similarly, in another draft-post, I'm already going to be recommending that IM+VoIP should be not just combined, but outright merged/blended, because back in 2015 there were a lot of IM-only tools and a lot of VoIP-only tools but in 2019 almost all of them have converged... they don't **all** support confcalls, and some of them only support async-voice-notes via audiofile attachments rather than quasi-realtime cryptocalls. But the overlap is very strong. In the short run, combined onto one page, makes sense * File Sharing + File Sync, those are similar enough they could be combined * Calendar Sync + File Sync, alternatively could be combined * Digital Notebook + Productivity Tools, again very similar categories, could combine them onto a single subpage methinks To be clear, I'm not suggesting that email-clients and email-alts should be **merged** into a single category, I'm just suggesting they ought to be 'combined' i.e. on the same subpage, so that the submenu will have one less menu-item. By contrast, voip+im is something I believe should be *merged* (eventually) to just list top3-in-the-merged-category but that is a different question... to reduce the menu-item count, for now, it makes sense that having im at the top of the /im_and_voip subpage and then further down having voip, would solve this bug about being unable to tap a menu-item. If they eventually get merged into a single im&voip tools listing, that is also fine, but that is a separate and distinct step from merely combining them onto a subpage.

This really seems like a Bootstrap 4 upstream issue more than anything.

This really seems like a Bootstrap 4 upstream issue more than anything.
five-c-d commented 2019-04-29 20:08:01 +00:00 (Migrated from github.com)

Okay, there are 3 ways to get around menu-size limitations: wait for the upstream CSS project to get their scrollbars working when there are a huge number of menu-items, is way#3 ;-)

But I still think that the correct solution to "there are too many items in this submenu" is to rebalance the menu-structure, either moving menu-items to another sub-menu (changing the "browser" category to be a "communications" category for instance), or combining similar tools-listings onto a single relatively-long subpage where that makes sense (per examples given above).

Having to scroll around in the submenus, is always sub-optimal UI/UX, compared to not needing to scroll around, right?

Okay, there are 3 ways to get around menu-size limitations: wait for the upstream CSS project to get their scrollbars working when there are a huge number of menu-items, is way#3 ;-) But I still think that the correct solution to "there are too many items in this submenu" is to rebalance the menu-structure, either moving menu-items to another sub-menu (changing the "browser" category to be a "communications" category for instance), or combining similar tools-listings onto a single relatively-long subpage where that makes sense (per examples given above). Having to scroll around in the submenus, is always sub-optimal UI/UX, compared to *not* needing to scroll around, right?
This repo is archived. You cannot comment on issues.
No Milestone
No Assignees
1 Participants
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: privacyguides/privacytools.io#872
No description provided.