In the Daily Kos community, we have an inside joke about discussions “moving to the right margin,” often signifying an interaction in comments that is starting to lose its integrity because of the deep nesting, and sometimes because it’s become a tit-for-tat between two grumpy users. In truth, this suggests a design problem. How do we keep the threads clear? How do we keep the comments from getting too skinny to read while showing that relationship? At what point do we stop rewarding replies to replies because they’ll have lost all relevance anyway?
One of the projects we’re working on is improving the comment experience on narrow screens, particularly at phone width. Currently, we have a whole separate display arrangement at m.dailykos.com that is usually served to mobile users. This was built in a time when having a simpler feature set for phones, which had little bandwidth and not a lot of resolution or computing power, made sense.
Today, though, we want to bring the full power of the comment editor and the comment feature set to all devices equally. We’ve already rewritten the comments so they can go as narrow as the narrowest phones and be readable and usable, and we’ve also improved the memory management so that they work better on all devices, phones to desktop. This also helps with accessibility for people who need to be able to change their font size on any device in order to read the text. Currently, it’s the story body layout that has a minimum width which keeps it from getting sufficiently narrow, and work to change that is in process. Our goal is for all pages to be usable on every device, with the code dynamically making small changes based only on the width of your browser, and we’re getting there.
In the process of doing this, we’ve noticed that some changes actually work better on wide devices and desktops too, so we’re in the process of removing some of the differences at desktop width. In truth, width is also not a good proxy for the device type, since many people use tablets with larger screens than a laptop, especially if they like to use them in landscape view.
One of the changes we’re making is to rely as little as possible on the browser’s hover state, where you put your mouse over something and it changes color, or flies out a menu. Everything should instead be a click. This is because touch devices don’t support hover properly, and also because hover can create accessibility issues for people who don’t use a mouse or who have fine motor control issues.
To address this, comments are getting a “three dot menu,” (sometimes also called a “meatball menu”), three dots in the upper right corner. You might have noticed that we’ve started this pattern in other areas of the site, including for group administrators. In some instances, there may be only one option for now, but this will be a new navigation and control pattern. The link that let you open the single comment page that used to be on the timestamp for the comment is moving to this new menu.
The three-dot menu is already live, and soon the link on the timestamp will be going away, to avoid duplicate navigation. The other changes will be coming later this fall.