DEV Community

Ben Halpern for The DEV Team

Posted on

Changelog: Adjusted position of post buttons for wide screens

This is a change to help readability on desktop. It only applies to screens greater than 1530 pixels wide.

Since making the reactions fixed position, there have been mixed feelings about how this has affected readability of posts on laptops/desktops.

One such not-so-mixed feeling is described here:

The sticky footer is useful because people don't use the web in a purely linear way, and at any point you may like to toss a ❤️, or bookmark a post. Skipping to the discussion is also valuable.

We will continue to fiddle with design concepts to get this element of the site just right. We have plans to keep improving the usefulness of bookmarks and reactions in general. Hopefully the reading experience is just a bit better now.

Happy coding ❤️

Top comments (17)

ben profile image
Ben Halpern

Everyone is welcome to bikeshed about where we go from here.

Thanks a lot to @flaque for egging this on. This wasn't exactly the solution you described, but those ideas are still in the ether, and we could get there. shouldn't be some random internet website. It's got the potential to be a great resource, to generate interesting articles, and to inspire a whole generation of programmers.

Reading this a few weeks ago really touched me and we really want to keep working to live up to this potential.

bennypowers profile image
Benny Powers 🇮🇱🇨🇦

more contrast between page bg and button bg, because wcag

also, more cowbell

link2twenty profile image
Andrew Bone

Or a border around the button would work too

.container .article-actions button:not(.user-activated), .container .article-actions a:not(.user-activated) {
  border: 2px solid #ccc;
flaque profile image

This is pretty exciting to see. Would love to see the sticky header go on all widths.

rhymes profile image
rhymes • Edited

I agree with @mattdevio that it should be more contrasted because the buttons are grey on grey by default.

I'm okay with the position. The initial reaction, out of habit, is usually "IT WAS BETTER BEFORE, WHAT HAVE YOU DONE", then a week passes and nobody even remembers how it was before. It happens all the time on social media when they rework any feature.

280 chars long statuses were supposed to be the end of Twitter. Nobody even cares now.

flaque profile image
Evan • Edited

From both an aesthetic and functional aspect, dev might want to consider standardizing the outlines and look of most inputs.

For example, on this page, I've got 1, 2, 3, 4, 5, 6, 7, 8 different things that are clickable but have different outline behaviors.


An overview

1 - this text input

border: 1px solid rgb(232, 229, 229);
border-radius: 3px;

2 - the ghost buttons

border: none;

3 - the filled buttons

border-radius: 3px;

4 - The really rounded buttons

border-radius: 100px;
border: 2px solid #090909 !important; 😱

5 - Those clickable posts

These mix a no-blur box-shadow and a border, but conceptually they're the same.

border: 1px solid #080808 !important;
box-shadow: 3px 4px 0px #080808 !important;

6 - the lighter clickable posts

border: 1px solid #d6d6d6;
box-shadow: 3px 3px 0px #bababa;

7 - The new rounded buttons

Admittedly I'm cheating on my metaphors here. I'm gonna say these are different because the gray background is light enough to be an accent, not really the button. You're clicking on the heart emoji, the gray is just there to show you where the clickable-area is.

border-radius: 100px !important;
border: 0px !important;

8 - Circle images

border-radius: 100px;

dev could use some consistency

If we had to pick a theme, I would go for the old-school no-opacity drop shadows. It's got a serious modern-retro feeling, like what Glitch has.

It's not the most pressing concern (personally I have it out for that fixed search bar), but I'm guessing it would do a lot to address the concerns of weirdness.

also ignore all opinions after you change something

Your brain is hardwired to feel physiological spooktitude when something changes. Literally anything anyone can say after you've unveiled something new is biased.

Don't be Microsoft keeping the windows button at the bottom left because every grandma and their dog wouldn't be able to use a computer if they changed. Change often; don't get stuck.

I think @Anton said it best somewhere below:

At first when I saw the bar down there I thought "What the hell!". I got used to it.

rhymes profile image

From both an aesthetic and functional aspect, dev might want to consider standardizing the outlines and look of most inputs.

Wow, good catch, I feel like you should open a new GitHub issue :-)

mikewheaton profile image
Mike Wheaton

Term of the day goes to: "physiological spooktitude" 😂

antonrich profile image

At first when I saw the bar down there I thought "What the hell!". I got used to it.

yaser profile image
Yaser Al-Najjar

I actually don't like changing the reactions place for two reasons:

  1. We are already used to it... to find it down there.
  2. All other websites like Facebook or Twitter are putting reactions down there, thus you should expect users to know how your website works like other "famous" websites.

This great video tells many many important stuff about UI/UX:

itsasine profile image
ItsASine (Kayla)

I like it! Mainly because I don't like things floating on top of other things and I'm always on desktop/Chromebook.

While it doesn't have the known process of Facebook and news sites (always on the bottom) the similarity to Medium is a valid enough UX case to me.

Once people get used to it, I'm sure it'll become a fav feature of the site :)

wolfhoundjesse profile image
Jesse M. Holmes

I love this change. We are so far away from two or three standards these days, and it's something I spend a lot of time thinking about. It's been a few years since I've had a narrow display outside of my phone.

allanjeremy profile image
Allan N Jeremy

This is neat! Perhaps the sticky rooter could be activated on scroll up? I don't mind it, but people using phones that don't have hard option buttons probably already instinctively know how this works.

Basically, the footer is hidden as you scroll down and displayed when you try scrolling up.

Currently like how it is on mobile though but it took some getting used to.

antonrich profile image

Here's an idea. What if you had on option to move it to the left or to the bottom. Then you'll have an actual data how much people prefer what.

sleepyfran profile image
Fran González

I feel like the position is much better since screens usually lack vertical space, so having this little extra space for text helps. However I feel like the buttons should have a black border like the cards in the right since they feel like they're not clickable this way.

scottishross profile image
Ross Henderson

Maybe the case, but I prefer having the option.

kspeakman profile image
Kasey Speakman

I love the placement for desktop screens. <3