DEV Community

Cover image for This Article is Hard to Read

This Article is Hard to Read

Evan on November 17, 2018

I don't mean to pick on Dev. I like Dev. I'm a lurker and I've only written one post on here before, but trust me, we're best friends. But this ...
Collapse
 
ben profile image
Ben Halpern

This was a really great read. Will take this all into account.

Collapse
 
abbhishek971 profile image
abbhishek971

Like the way how Ben is always the first to comment on the LEGENDARY posts of DEV. :-D

Collapse
 
ben profile image
Ben Halpern

I spend a lot of time here 😋

Collapse
 
ld00d profile image
Brian Lampe

I'd like to be able to collapse comment threads. I keep thinking the little chevron will do that, but it doesn't.

Collapse
 
alephnaught2tog profile image
Max Cerrina

THIS. The chevron is a perfect example of I should know what it does in here by now but I never do and try to collapse with it every. time.

Collapse
 
rdumais profile image
Ryan

I agree - this is a perfect example of a potential UI improvement.

Collapse
 
simoroshka profile image
Anna Simoroshka

Both sticky navbar and the reaction bar make it almost impossible to use spacebar for scrolling. :(

Collapse
 
holywyvern profile image
Ramiro Rojo

The sad part is than is it fixed by using flexbox instead of absolute positioning...

Collapse
 
shreyasminocha profile image
Shreyas Minocha

Shift+space to move in the other direction too.

Thread Thread
 
mikister profile image
Milan Radojević

I knew about the spacebar, but this changes everything. 🤯

Collapse
 
codemouse92 profile image
Jason C. McDonald • Edited

Here's a weird idea...what if we were to make use of a vertical toolbar that forever lived on, say, the left side of the screen on "desktop" resolutions? We have more horizontal real estate than vertical.

I do like some things "following me around", because I don't want to have to scroll up to the top after every article, much less "roughly halfway but not quite almost though" to find the reaction buttons. Yeah, I know we have the Home button, but I'm lazy (we'll call THAT what it is!)

But maybe if all those actually useful things, plus a "back to top" button, lived on a handy left-side vertical toolbar, it'd work better?

yeah, but it's never been done before

Neither had floating toolbars for the first 20-30 years of the internet.

Collapse
 
marthaelax profile image
Angeiͥͥͥͥͥͥͥͥͥͥͥͥͥͥ

Wow, never knew about it before.
Mind blowind

Collapse
 
imthedeveloper profile image
ImTheDeveloper • Edited

Great article and to be honest even my mobile browser ruins my experience. Look how much screen I lose...

thepracticaldev.s3.amazonaws.com/i...

thepracticaldev.s3.amazonaws.com/i...

Collapse
 
simoroshka profile image
Anna Simoroshka

Yes, it's standard browser behavior which has been around for ages :)

Collapse
 
kinghat profile image
kinghat

all three of the items(search, top right info and action bar) should just migrate over to the side when scrolled. though, the action bar would be fine at the very bottom of the articles.

a dark mode is equally important.

Collapse
 
ytjchan profile image
ytjchan

This kind of layout may be good for mobile readers (because their vertical orientation), yet sadly not computer readers. Often times I feel the same for my browsers. I like to access my tabs & address bars easily but I don't want them to block like 10% of my screen height (without fullscreen), which easily gets worse with top/bottom bar websites. I hope someone would reinvent the wheel and make browsers (websites too) with vertical bars.

Collapse
 
jayjeckel profile image
Jay Jeckel

Great article and I'd go farther, almost nothing should stick in place when I scroll the page, it should all scroll together.

The search bar and the buttons with it shouldn't stick to my screen when I scroll, it's basically acting like a piece of tape over my screen hiding content I actually want to see.

Those feed panels on the right side shouldn't stick in place either, as that just forces me to scroll alllllll the way to the bottom of the article, past both the content and the comments, to actually read the "More from Author" list of articles.

While being the only cadidate for good use of absolute positioning, the left side button panel still causes problems. When I click the ... more buttons button, the bottom of the tooltip is lost off the screen. If the panel wasn't absolutely positioned, I'd simply scroll the ... near the top of my screen so the whole tooltip has room. However, the design choice of fancy over practical denies me that option.

By a quirk of sizing and spacing and the amount of text in the footer, if I scroll to the very bottom of the page, past content and comments, the ... moves up just enough that I can see the Report Abuse link. If there was less text in the footer or one more Share to button, there would be no way for me to see the Report Abuse option. While this is obviously a bug with tooltips, it wouldn't actually be a problem if the left panel wasn't stuck in place.

So there we have three examples of absolutely positioned elements and all of them cause problems while not providing any real benefits beyond aesthetics.

I don't know if absolute positioning rises to the level of needing to be Considered Harmful, but it's definitely a foot gun that many webdevs seem to love firing at themselves.

Absolute positioning: just don't do it.

Collapse
 
t4rzsan profile image
Jakob Christensen

I believe the action bar was at the bottom of the article in the early days of dev.to but when they changed it and I honestly couldn't find it for a couple of days even though it was right there in front of me at the bottom of the screen.

Collapse
 
roger01 profile image
roger-01

Good Post, Well done.

And that's the reason I have a square monitor :)

Collapse
 
somedood profile image
Basti Ortiz

Great article!

I especially agree with getting rid of the fixed search bar and pushing the "Write a Post" button to the right side of the screen. I think it greatly adds to the reading experience.

Collapse
 
helenanders26 profile image
Helen Anderson

Great read. Looking forward to your next post. :)

Collapse
 
detunized profile image
Dmitry Yakimenko

Good stuff! Here's my solution: dev.to/detunized/dev-zen-mode-user...
=)

Collapse
 
nicolasdanelon profile image
Nicolás Danelón

great article bro, keep it that way!

Collapse
 
rapasoft profile image
Pavol Rajzak

I am that dude with flipped monitor :)

But I still use phone to browse dev.to

Collapse
 
ferhatavdic profile image
FerhatAvdic

He is right you know.