TOPIC:

When I enable a members-only floater and go to the club website using Chrome 71 for Android on a phone, after I log in to the website:
1) The floater blocks the menu button making it hard for many members to figure out what to do next.
2) Even after you click the small [close] on the floater, the menu button is broken. It doesn't start working until you refresh the page.

According to Google Analytics, almost 50% of our club site traffic is from mobile devices. It's a problem as members are getting very confused after logging in. They can't find or use the menu when we have the members-only floater on.

The question is what to do with the floater for small screens? Any ideas?

Could put it on the bottom of the page (I think this would be good) or move the message a little to the right so it doesn't block the menu button.

On a mobile device, for members-only messages, it may also make sense to have a popup similar to your admin messages, however I feel that most floater messages are short (maybe 1 or 2 sentences) so it may not make sense to implement that to solve this.

I do not think there is any location that will totally work on a small screen, so long as it is displayed overlapping something else. Clubs sometimes put a lot of text in floaters that will take up a lot of space on a mobile screen regardless of where it is shown.

My thoughts are to either provide a setting to not show it on small screens or to show it above the TM banner without it overlapping on small screens (push everything else down until it is closed).

This really is a case of a feature that was developed for desktop not working so well for mobile. I am sure we will have more of these types of things. The system is clearly "desktop first" vs "mobile first", so we are having to do "graceful degradation" vs "progressive enhancement" that the consensus deems to be the wisest approach.

This is also a good example of why my attitude is that FTH 3 is "sort of" responsive... We have certainly "dipped our toes" into that, but there is more to go.

SteveTheTechie wrote:

show it above the TM banner without it overlapping on small screens (push everything else down until it is closed).

That sounds good to me. It'll fix the issue and still maintains the functionality.

SteveTheTechie wrote:

This is also a good example of why my attitude is that FTH 3 is "sort of" responsive... We have certainly "dipped our toes" into that, but there is more to go.

Yeah, I understand. To tell you the truth, a year or so ago, I never thought any reasonable mobile-friendly version would come any time soon. This first iteration is actually better than I thought it would be for this system that only has one developer. Though I'm sure it will get even better in future versions.

Ok, I realize this has been a bit old discussion, but I have had to deal with life challenges a bit so did not get around to doing anything on this until now. (I did not forget about it.)

You should find that the floater behavior on small width screens is different now to prevent the menu button or other screen elements from being blocked on a small screen. Essentially, the "floater" on a small screen is locked in place at the top above the TM blue banner unless you click the close button... if you click close, the "floater" is collapsed and disappears.

I am going to have to revisit some of the font, link, and button sizes a bit more on small screens. Coming back at this again, it seems that some of those a bit too small on a small screen.