How would you make COMMENTS look and work on mobiles?

Andrew Boon posted 10th of April 2015 in News. 23 comments.

Comments can make or brake engagement on a content-focused social network. Mobile traffic overtakes desktop traffic on social networking sites. Getting comments to look and work perfectly on mobile devices is crucial for social software platform like Dolphin. Let's talk about what would constitute the most elegant, user-friendly, efficient, secure and engaging commenting system.

Then we'll build one for you.


Actually, we'll just improve the existing one, which is even better, because you know... it won't take as much time. So, let's see...



You know that different sites and developers take different approach to nesting. And, even though it is possible to create various setting and options for users to choose what they want, it's always best to try and get it right for the default setting. 99 out of 100 people will not care to change settings


Some sites allow multiple levels, indenting every level to visualise the structure. 



That's useful and helps to comprehend the conversation flow, but once we get to a limited screen width... things start turning ugly.



By the time you're on 4th or 6th reply even short words don't fit a single line. 


You could limit nesting to just one level, like we do here on BoonEx, but still profile pictures would take up at least half of the screen on mobile devices in portrait mode. We can compromise by making profile-pics really small and indent only half-way for each new entry, though. 


And, naturally, there's always the good old flat view. 



 ...which looks nice and simple, but makes it difficult to create and track conversations that stem from comments. Flat view can help to keep people focused on the main post, though. 



Next, if we allow replies to comments, we need to figure out how do we show the conversation groups. Should they be open or closed by default? Keeping them open helps with on-page search and SEO. Replies may also attract attention of people that would otherwise leave replies threads closed. On the other hand showing too many replies may create a problem where all top comments sans the first one are pushed down too far. General compromise is to show a few comments and hide the rest. What's your take? And is it better to show the oldest replies or the newest replies first? 




And yet another question is where to show them. Surely, Dolphin can allow you to position blocks as you wish, and comments can sit in the side block, underneath, or on a separate page. That's great, but now we also have this new trend of "inline" comments. It's when you leave a comment to a specific paragraph or a text selection and your comment sits somewhere close to it. 



And on top of that we have all those questions about how the should refresh if new comments are posted while you're reading; where to show the inline reply field; where to show the just posted reply; how to display threads opened from permalink; etc, etc.  Some answers are obvious and clear, some... not so much. 


Comments, comments... they are interesting to work on. They do make a difference in how the site is perceived. They also permeate so many modules. They can also present in a form of reposts. They may be substituted by external comment plugins. They can be plain text or rich text. They may allow attachments. They may have privacy settings, #tags, @tags, auto-links, no-follow links, etc, etc. 


Now tell us what you think a perfect social software commenting system should be like? Share your favourite solutions and most importantly - talk about what works best on mobile devices. We are listening. 


Recommended by
Please login to post a comment.
Nathan Paton
Nested comments are the only way to have easy-to-follow discussions. You could do what reddit does and add a link to continue reading them on a new page, which gets rid of the space issue. Or do what Disqus does and stop nesting them after the third or fourth reply, but this makes it harder to follow the conversation.

For a large comment thread (e.g., users B, C, D, E, F, and G reply to user A), show the first three or four, and then add a "view more" link to expand the rest. For large see more replies, do the same. You can sort comments by the highest rated or any other algorithm, but don't mess with the replies. As always, these should be configurable options either for the reader or site admin.
this is good idea..nested comments are easy to follow..
but when someone open in mobile devcie it should limit nesting to third or fourth..but not limit on big screen or monitor device..

also more thumbs up comments should move on top automatically with their replies...i think this is better then show oldest or newest comment on top..

i never saw inline comment ..but that sounds interesting...wondering if its possible to allow them on album pics...or post..
i think this inline comment should see more be available for website admin to decide..
i think i will like this inline comment..any chance u can add in trident..
Andrew Boon
You can try inline comments at or quip. They are good for some things - like feedback on particular aspects of an article. They don't seem to stem active discussions, though. A mix is possible, though. Quip, for example, does inline comments and a sidebar with both inline and direct comments mixed into one feed.
quip is awesome...we can use inline comment to show on nested comment to continue the conversation..

and in one feature that leave note on pic ..for author or to other ppl with @ option..that is also good..

we should have this feature..with nested comment..if trident post module..
i think it will get more popular in future..
use colors and shading to denote nesting and groups.
Andrew Boon
Please, elaborate. Maybe some examples?
Similar to a texting screen, where each user has a different color. Blue or white background. Of course you'd have to use a different system. I don't think you could give each user their own color, but you might be able to have a color for each nested level. Rather than an indentation, some kind of shading. Original post in white bkgnd(1), then light blue(2) for first reply, then green(3), yellow(4), purple(5), orange(6), then start over at white. No indents at all. People will learn the color for see more the corresponding nested level. You might number a nest when the colors start over.

For that matter, you might even just forget the color, and number or symbolize the tier. Comment, reply a, b, c, c1, c2, d. Etc. Those numbers could get confusing, and my guess as not an advanced coder is the colors would be easier. However, if numbering or lettering the tiers is possible, that would probably use less memory? So you might use popular ascii symbols to denote the nested level rather than numbers.

I feel like regardless of the solution you decide on, there really needs to be one indentation. Any replies, or reply replies can be the same indentation, with the original post non-indented. Then shading or ascii symbols or something after the original post.
I was going to suggest the same thing. Whenever someone thinks "nested comments", they have been conditioned to tie nesting level to the amount of indentation. Perhaps a combination of both color changes and much less indentation would work.

Primary comments would be black text on a white background, and as the nesting level increases, the background moves toward black, and text brightness is adjusted for best readability. I've never seen this done, but it might be worth experimenting see more with.
I believe it would be better to keep it gray scale rather than color changes, where accessibility issues might arise.
i thought of this..
what i thought was like first comment backgroup area will be in light blue .second reply in light green , fourth reply on magenta like this

but have to use nesting anyway..colour will only make it look good won't change the concept..

with only colour ..without nesting..user have to understand the concept of colour..which colour represent second or third reply..i dont think they will..

its better to use nesting with colour...
Yep, lovely ideas. Colors may bring a lot of nice, but gradually increasing transparency for black text, coupled with diminishing font size for every new "level", all with only slight indentation might work, actually.
First Nesting comments format like here in boonex with 2 colour system,
1. Comments with one colour( light green etc)
2. All replies to the comment with one colour ( light blue etc)
Show only top rated 3 comments and hide rest of them along with the replies to the comments.
Allow photo posting option both for comments and replies.
Allow @ and # function in comments and replies.
Comments should only refresh when you move up or down so new or new top rated can refresh.
Plz also add rating -ve or +ve for comments...thumbsup and thumbsdown.
And don't allow sub reply for replies.
I prefer 'grouped', maybe showing first 3 replies open by default, click + to show more.
Nice and easy.

I like the colour / grey scale idea though which would work well in grouped comments also.
Continuos nesting, with replies to replies moving ever sideways will be a problem if a site is built to focus on comments... especially as you pointed out on mobile sites which are ever increasing in use.
I prefer 'grouped', maybe showing first 3 replies open by default, click + to show more.
Nice and easy.

I like the colour / grey scale idea though which would work well in grouped comments also.
Continuos nesting, with replies to replies moving ever sideways will be a problem if a site is built to focus on comments... especially as you pointed out on mobile sites which are ever increasing in use.
What would be an interesting alternative, not mentioned so far - would be the option to have a forum page for each item os site content.

For example, articles, news, other content - much l events and groups do currently.
(although I use Modzzz premium for both of these so not 100% sure if group/event forum is default?)

For each article created a forum page would also be created, auto added to the main forum module. Latest posts showed on the view article page...

Comments are great, but see more by separating them from forums, then we 'divide' our user interaction. If that was all handled by forums, it might focus it better and encourage finding new content also?
This idea also struck my mind but later i realized that if we add comments to the forum, what will be the difference between blogs and forum ;) so if you want forum with comments simply rename blogs to forum from language.
Yep, like I said above - depends on the kind of content module. Also, main poster would have to explicitly "invite" people to post in forum and set out the rules. I little tedious and not very flow-ey. :)
This post and comments/sub comments are a good example of what not to do. It's not visually apparent what sub comments belong to what upper level comment
Yeah, this is one of the solutions to the age long problem when comments are being used as discussion board. We have similar here at Boonex Market - products have "reviews" and a separate "support forum". I guess depending on the kind of original content this may be the best way. If, however, it's a blog post that invites discussion in comments (like this one :) ), then forums may be confusing.
The best solution to address comments is to make everything you described as an option so that every site owner can pick & choose how they want their comments to work for their site(s). Endless possibilities is what would make dolphin/TRIDENT superior than majority of the other platforms, thats what you're striving for right?

I've been begging the last few years for real time comments
Again, I would like for you guys see more to to make it so that when a user leaves a new comment, you DONT have to refresh the page to see it, instead, the new comment populates at the bottom & appears in real time (like FB). I prefer oldest first, therefore new comments will not distract from reading, or make the page jump around.

Speaking of comments, Im just now noticing that we have an option to choose how we wish comments to display here, newest first vs oldest first vs top first, then flat vs threaded. Now all you have to do is just give us site owners the option to choose whatever as default, and it wouldn't hurt anything for our users to have the option to change the default to whatever they prefer, PROBLEM SOLVED!

Of course, user preference should be saved
Make the comments real time. Make it like Twitter and Vine.
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.