We’ve deployed a restyled post/reply composer on Meta. If you notice anything strange or buggy, please report it here.
New
Old
25 Likes
Some internal design rationales for this change:
- less “sea of grey” for a lighter, airier, simpler look
- no need to take the full width of the browser
- stronger emphasis on the primary input area (left) vs. the preview (right)
- less borders, easier to theme
- better arrangement of tag field, more integrated
Be sure to compare “New Topic” with “New Reply” as they are different scenarios. Plus mobile, of course.
20 Likes
Wrapping has gone all squirrelly:
Under the old composer the two panes maintain their width, on the new one the left pane will get periodically wider without explanation.
7 Likes
The grey background on the preview section makes quotes get lost
Compare:
To:
I think we got to keep the preview area white so it matches the colors that it will have in the stream
9 Likes
Agreed – whilst I like the fact that it’s a more subtle way of differentiating the areas, it should match what’s in the stream as closely as possible.
Also, the “hide” button looks as though it’s part of the presence indicator: in the new design, I assumed that clicking it would show more details about the people replying, but it hides the composer.
3 Likes
Yeah, I ran into that myself too.
The blue text for Create a New Topic looked like a link to me at first as well, so I had clicked on it to see what would happen (nothing does).
4 Likes
Is this title even required? I’d say that it’s fairly obvious from context that you’re creating a new topic; the placeholder text for the title can be tweaked to make this clearer, perhaps. Maybe it could read “Type a title or paste a link for your new topic here”
2 Likes
A few tweaks I recommend:
Changes I made:
-
I added spacing at the top. The top is WAY too tight as is… when looking at it, I feel like I am wearing a t-shirt that is one size too small. Yes fine I should lose some weight but my point stands. More breathing room is needed at the top for sure.
-
Having a grey background for preview is a bit problematic, as it buries quotes and is just more “stuff”. I think it’s fine to have it be clear / transparent and float. The “hide preview” text is right under it, so there’s no possible confusion as to what that area is. And it looks good to me, floating, no border needed?
-
I made “hide preview” grey to de-emphasize it. There is a fair bit more blue now with the blue bar, so we risk burying the blue reply button which is the primary action … there’s no way “hide preview” needs to be full blue drawing all that attention to itself, as we’ve definitely used up our blue ink attention budget.
(looking at this a bit more I am not sure the topic title should be in blue, either… and definitely not “Create new topic” text)
Overall I am a HUGE HUGE fan of this change, I think it looks so much better, and it’s long overdue!! 
15 Likes
Looking at this again, I do feel we should bury the blue both in the top (make “create new topic” or “reply to {blah}” grey), and at the bottom right (make “hide preview” grey). Mockup:
This is nice because now only the exact right two things we want to pop, actually pop:
-
the bar “hey pay attention the editor is up man! and you can resize me yay!”
-
the action buttons “hey, do you want to post this? or not?”
That looks really good to me @awesomerobot … dare I say super sweet
11 Likes
Thanks for the feedback so far everyone; I made a first round of updates based on some of the above
13 Likes
Nice! It looks classy 
The old grey slab felt a bit nineties PC
Also, the absolute positioning of the old composer was a bit tricky to work with. Nested flexboxes are an improvement.
8 Likes
One thing I am noticing is that the “expansion” effect is not super smooth, I see a fair bit of flashing and moving around when I move from collapsed composer to expanded. Is there any way to make it smoother?
The changes you made definitely improved this quite a lot!
4 Likes
This video was captured on chrome desktop at 60fps, where are you seeing scroll bar flashes?
1 Like
This happens only when composer is empty due to overflow-x: hidden. Ideally if we can start off with overflow: hidden on the text area and then remove it once expanded it will look much better.
1 Like
One thing I would like improved is giving composing and preview more space on desktop.
We are not using entire browser width for preview like we used to do, even when the area used for composer is less wide than the post we are going to end up posting.
This all ends up feeling needlessly cramped.
I get to “full width” at 1800px width, previously we were there at 1460px, so this is forcing me to have much wider windows to avoid:
1 Like