4 ms·

2 (Sidebar) is not usable on mobile, because there is no good hover event. Since mobile-first is almost a necessity, it won't work this way. Accordions make mo

by WA 5y ago

2 (Sidebar) is not usable on mobile, because there is no good hover event. Since mobile-first is almost a necessity, it won't work this way. Accordions make most sense as a table of contents, although they are often used in FAQs. But in FAQs, you can't use the browser's search on page to find collapsed words. So you trade better scrollability for searching on the page. Not sure how many people use "search on page" on mobile devices though. 1 + 3 are great though.

StevenWaterman 5y ago
Yeah I agree that the sidebar isn't a very useful example given that it's not even close to something you'd implement in production. The same technique can definitely be made to work with mobile, which is how the burger menu at the top right of the page is implemented - ie just using `:focus-within` rather than `:hover` and using media queries to only display that menu on mobile. I'm glad that you enjoyed 1 and 3 though - it's been really interesting seeing each person take something different away
- gbear605 5y ago
  Unfortunately the burger menu at the top right of the page also doesn’t work very well on mobile (iOS Firefox). One the menu appears, there’s no way to get it to hide again, permanently covering up any content underneath (in this case, your name). Aside from that, something very weird is going on with the page. There’s a huge blank area to the right of the screen that you can easily scroll to accidentally. This also happens on Safari on macOS, where for some reason it doesn’t let you scroll back left (and persists the scroll position on page refresh?!). I definitely agree with the blog post in general though - we should try to use HTML and CSS instead of always resorting to JavaScript.
  - easrng 5y ago
    You can tap on something else to hide the menu.
    - gbear605 5y ago
      That works on my laptop, but not on my phone. Not sure what the difference is.
franciscop 5y ago
Did you try it on mobile? I was gonna comment the same thing, but I tried it and worked perfectly to my surprise. If you tried and it didn't work, mind sharing what mobile/browser?
- gbear605 5y ago
  It worked very poorly for me on iOS (Firefox, not that it matters). Trying to hover over the side bar made it immediately click on whichever link happened to be under my finger when the sidebar appeared.
  - tiborsaas 5y ago
    That's just bad design. The point is that :hover works on mobile.
encryptluks2 5y ago
Never had an issue with sidebars on mobile. I think this is really just implementing it correctly and not using broken examples that you find online. Collapsable objects can be expanded by default as well, so not sure how relevant that is. I'd much rather a site use native techniques than load 100 JS frameworks in my browser to do something simple.
eterm 5y ago
Even on desktop it doesn't feel natural because you don't want menus to disappear exactly the instant the mouse is no longer hovering them. You want them to remain for a (very) short time after you stop hovering to make them feel much more natural.
- aembleton 5y ago
  Then you can add a transition-delay to the CSS https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay https://developer.mozilla.org/en-US/docs/Web/CSS/transition-...
croes 5y ago
It works for me on Android Chrome. I just click the sidebar and it becomes visible, then I can choose a link.
WillDaSilva 5y ago
It can be done with a checkbox element instead, and then have the style changed (to translate it) based on whether it is clicked.

by WA 5y ago

StevenWaterman 5y ago

Yeah I agree that the sidebar isn't a very useful example given that it's not even close to something you'd implement in production. The same technique can definitely be made to work with mobile, which is how the burger menu at the top right of the page is implemented - ie just using `:focus-within` rather than `:hover` and using media queries to only display that menu on mobile. I'm glad that you enjoyed 1 and 3 though - it's been really interesting seeing each person take something different away

gbear605 5y ago
Unfortunately the burger menu at the top right of the page also doesn’t work very well on mobile (iOS Firefox). One the menu appears, there’s no way to get it to hide again, permanently covering up any content underneath (in this case, your name). Aside from that, something very weird is going on with the page. There’s a huge blank area to the right of the screen that you can easily scroll to accidentally. This also happens on Safari on macOS, where for some reason it doesn’t let you scroll back left (and persists the scroll position on page refresh?!). I definitely agree with the blog post in general though - we should try to use HTML and CSS instead of always resorting to JavaScript.
- easrng 5y ago
  You can tap on something else to hide the menu.
  - gbear605 5y ago
    That works on my laptop, but not on my phone. Not sure what the difference is.

franciscop 5y ago

Did you try it on mobile? I was gonna comment the same thing, but I tried it and worked perfectly to my surprise. If you tried and it didn't work, mind sharing what mobile/browser?

gbear605 5y ago
It worked very poorly for me on iOS (Firefox, not that it matters). Trying to hover over the side bar made it immediately click on whichever link happened to be under my finger when the sidebar appeared.
- tiborsaas 5y ago
  That's just bad design. The point is that :hover works on mobile.

encryptluks2 5y ago

Never had an issue with sidebars on mobile. I think this is really just implementing it correctly and not using broken examples that you find online. Collapsable objects can be expanded by default as well, so not sure how relevant that is. I'd much rather a site use native techniques than load 100 JS frameworks in my browser to do something simple.

eterm 5y ago

Even on desktop it doesn't feel natural because you don't want menus to disappear exactly the instant the mouse is no longer hovering them. You want them to remain for a (very) short time after you stop hovering to make them feel much more natural.

aembleton 5y ago
Then you can add a transition-delay to the CSS https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay https://developer.mozilla.org/en-US/docs/Web/CSS/transition-...

croes 5y ago

It works for me on Android Chrome. I just click the sidebar and it becomes visible, then I can choose a link.

WillDaSilva 5y ago

It can be done with a checkbox element instead, and then have the style changed (to translate it) based on whether it is clicked.