Responsive Design on Phone - all text?


#1

I’m scoping out Discourse for my forum. I like the responsive design, but it seems at the phone level, it’s just all garbled text, sort of like reddit. I feel like it misses out some opportunities to make it a little more interesting (with user avatars, or visual deprioritization of the replies/views/activity text) to make it better than an excel column of topics. Thoughts? Solutions?


(Jeff Atwood) #2

Can you post some visual mockups of what you mean?


#3

Short of going and mocking something up, I’m thinking along the lines of how Xenforo trims down to the mobile size (this is iPhone 5 size)

A few good things a) User avatar of who started the discussion b) Visual prioritization using font size and font weight to show important titles in bold and less important things like Reply count smaller.

Some things could be improved, but this is the general jist


(Kane York) #4

The avatar is definitely taking up way too much tap target space there, though.


(Jeff Atwood) #5

Yeah not a fan of that design. How do you “tap” on those teeny-tiny page numbers, exactly? Is the avatar of the topic starter (or last poster) so important that it warrants taking up 25% of each line? The weighting seems totally broken to me.


#6

Maybe. I don’t find the tap target for the headline to be too small, it’s 2/3rds the width of the screen. But the fact is the profile page popup is so useless that you might be right. I would probably put tiny thumbnails of contributing users’ avatars below the headline so you know who’s in teh discussion, but all would tap to the topic itself.


#7

Just replied to other post. I agree with you that some of their prioritization is off (no page breaks on discourse too!) but i dont see hardly any prioritization in the discourse topic thread.


(Jeff Atwood) #8

Hmm @leemy we have some other mobile stuff targetted for 1.3 but simply making topic titles bold, maybe?


#9

@codinghorror interesting. i’m really new on discourse so i haven’t gotten used to the visual design and UX (which can be good and bad…)

My gut instinct is yes, bold topics because they’re most important; unbold category name

Some random thoughts I’m mulling but not 100% convinced on

a) Initially I thought the category name should have its color behind it, not just as a stripe to the left. But it seems the stripe is pretty consistent across desktop and mobile so that’s not something to lightly change

b) we show user avatars on desktop but initial user name on mobile. Perhaps we could put the user avatars participating on mobile instead of the name (maybe limit to 4 avatars for width’s sake). Unsure on this, would need to see it

c) I think just as a new user, seeing “3 codinghorror 1h” is not clear to me. What’s 3? Oh it’s replies. I guess I’ll get used to it, but for new users it’s confusing. Depending on how much you want to cater to experienced users who need the raw info versus new users who need some guidance, you could make a change: small symbols next to the reply count showing the reply symbol, or with text, “3 replies 1h ago” (or leave it as is). Food for thought.


(Jeff Atwood) #10

I can see that the replies number is close to the name but should be close to the topic, really. Perhaps this?


(Sam Saffron) #11

if the reply count had a bubble in the bg it may help communicate better what it is … eg:

fa-comment-o: Font Awesome Icons in light grey behind the number, that black feels a bit strong to me but agree that currently what we have is a bit weak.

@awesomerobot ?


(Jeff Atwood) #12

Just having it in a grey circle might be fine, to indicate it’s a count. I find the “conversation bubble” a bit stereotypical at this point.


#13

Bubble might work. Conversation symbol is definitely clearer. Up to you.

Since the topic text is bigger, ask others if they think the bold is necessary. I’m thinking you might get people saying it’s not.

Have you played around with the avatars instead of username?


(Jeff Atwood) #14

Avatars is a bad idea IMHO, sorry. Plus it’d be slower to load on mobile since all topic lists would be encumbered with (n) requests for avatar images.


(Jeff Atwood) #15

I went a different way here – rather than bolding the topic list titles on mobile, which is very strong, I decided to make category text normal weight on mobile instead of bold. Essentially de-emphasizing category a bit. I don’t think this harms category since it already has the color bar by default.

I think this change helps to make the topic title more obviously the focus, without it becoming visually overwhelming.


#16

I had that thought as well, should have posted it :smiley:

I agree with your approach. Doesn’t make everything bold.

Something can be done with the stuff on the right side but i don’t know what, without adding some symbols or something to that garble of text. Or perhaps at least aligned for all topics. idk


(Sebastian) #17

Hi all

I am also looking into Discourse. My test for responsiveness (not the most sophisticated text but a simple one) is to resize my browser window and see what happens. See attachment. I think there is room for improvement for the out of the box look of Discourse on smaller screens. Maybe some info can go on small screens, or the table needs to be set up differently?

What is the status of that, am I misunderstanding something, etc.? Grateful for reactions


(Erlend Sogge Heggen) #18

Simply resizing your browser window is not the best way to test on mobile. Please play around with different settings in Chrome’s mobile screen emulator instead.


(Jeff Atwood) #19

@neil this is a relatively minor change but I think we should make it, this week or next:

Essentially move to a four quadrant layout, with each section in its own quadrant. It makes more sense for the post count to ‘align’ with the topic since that is what it is about. And make it a bit bigger to indicate it’s important.


(Neil Lalonde) #20

This change is live on meta:

Looking good on my iPhone 5s. I hope the vertical alignment works on the bigger phones.