The DEV Team

Changelog: Adjusted position of post buttons for wide screens

・1 min read

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 ❤️

Did you find this post useful? Show some love!
DISCUSSION (19)
The team behind this very platform. 😄
 

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.

Dev.to 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.

 

more contrast between page bg and button bg, because wcag

also, more cowbell

 

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;
}
 

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

 

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.

 

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.

screenshot

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.

 

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

 

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 :-)

 

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

 

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: youtube.com/watch?v=C_3ZEJ50N2k

 

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 :)

 

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.

 

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.

 

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.

 

99% of users never change the defaults even if they are ugly.

 

Maybe the case, but I prefer having the option.

 

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.

 

Hmmm... Contrast is really low. It still seems out of place over there on the left. More iterations :)

 

I love the placement for desktop screens. <3

Classic DEV Post from Jan 2

If you've recently switched code editors— How's it going so far?

...

The DEV Team
The hardworking team behind dev.to ❤️

Want to contribute to open source and help make the DEV community stronger?

All the dev.to code is freely available on GitHub.

You're welcome to jump in!

Join dev.to

Better understand your code.