codidact
On mobile user profile page, show avatar and usercard info earlier
https://meta.codidact.com/posts/287864
In the desktop view, the user profile has a main column and a right-column sidebar. The latter contains the avatar, "usercard info" (like rep, edits, etc), abilities, and "stats" (numbers of posts, votes, flags). Meanwhile, over on the main part of the page, we show the "about" text and the list of posts.
On mobile, we show the main part first followed by the sidebar. That's consistent with how mobile works everywhere, but it means that there's a lot of scrolling to get to even the picture, let alone the other stuff there.
I don't want to create two separate versions of that page, but can we do something to make the mobile experience better? Two ideas (do either, both, or something else that's better):
- On all views, show the avatar and moderator/staff label (if applicable) next to the name, not in the right column. This would mean making the avatar a lot smaller. It could still be flush right, so that the name text remains the first thing on the line (probably better for screenreaders).
- Make the list of posts collapsible, and make its initial state be collapsed on narrow views and expanded on wide ones. "Narrow" or "wide" here means: depends on whether the right column will be below or next to the main content.
If doing the first for mobile only is not hard, we should consider that, so that larger displays can still show the larger image. But if creating that exception would make the code much more complex, it's probably not worth it.
Are there better ways than these ideas to address this problem?
I already like 1 and 2, but as another option for consideration:
- Move the posts section to the bottom, so the items that are in the right panel on desktop appear before the posts section on mobile.
I don't know if people rely on a user's posts being near the top of their user page. I suspect not, but we could mitigate this by including a "Posts" section along with the other tab style links along the top edge of the user page ("Profile", "Activity", "Vote Summary").
As for screenreaders, I don't have experience but my impression is that they read the HTML, not the CSS, so it's possible to put the HTML in the order that makes sense for someone using a screenreader, and then style with CSS in a way that won't necessarily be in the same order (so we can do what's best for everyone rather than having to compromise).
A "posts" tab sounds like a good idea if we're going to move other stuff up in a single-column view.
I don't know how much people care about abilities and stats as compared to posts, but I think they do care about the avatar and any special status (mod/staff). Can we "break up" the right column differently on mobile and desktop (without pain)?
If we want things to show in a specific order on mobile, is there a reason to have them not in that order in the right panel on desktop? Or are you suggesting the same order on both, but putting the posts list below some of them and above others (like chopping the right panel in half and putting the first half above the posts and the second half below the posts)?
Yeah, that's what I meant -- on a phone, it feels like the top part of the "right column" is more important than the posts, but the bottom part is less important.
Hopefully we can make the right panel 2 separate elements with no visible join between them, then there shouldn't be too much pain involved in rearranging them for mobile. There is no border around the right panel so it shouldn't look any different in 2 div elements rather than the current 1 div element.
I can't think offhand how to do the rearranging, but I suspect it will be possible.