loading...
Cover image for This Article is Hard to Read

This Article is Hard to Read

flaque profile image Evan Conrad ・3 min read

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 article is hard to read. As someone who primarily reads, you can see how this could be a problem for our continuing friendship.

Computers are rectangles we tricked into thinking

When designing articles to be read on the interwebs, we run into a fundamental problem with computers. Our screens are rectangles. Our laptop screens in particular, are rectangles that got turned the wrong way.

We can't all be that dude in the office with a vertical monitor for important code reasons.

Part of designing a website is figuring out which way you want your rectangle to rotate. The easiest way to figure this out is to ask what orientation someone on a phone would use.

If someone really went through the trouble of turning off their rotation lock on their phone so your website could be horizontal, then you probably can get away with a horizontally focused websites.

Youtube gets to be a horizontal site, but Github needs to be vertical. That's because Github's primary purpose is to read.

Dev is in dire need of a Childish Gambino flip-the-phone moment.

Vertical Reading

Did you get all the way down to this?

If you did, it's because your mental model knows that the content on Dev is organized from top to bottom. It's your job as the reader to scroll down and find the rest.

But the orientation of our desktop screens mean we've got wide peripheral vision, but no depth of vision. As designers, we need to make up for that weakness by removing any other blockers on the up-to-down visual highway.

Anything that's in between the bookmarks on my browser and my unused Macbook touch bar that's not ✨the content✨ needs to go.

So that search bar up there?

search bar

Yeah. That needs to stop following you.

.top-bar {
  position: absolute
}

You know how to search. You saw the search bar when you walked in the door! You're not gonna lose it right?

Dev it's okay. They're not gonna lose the search bar.

Okay then where does the top right info go?

That "Write a Post" button and the rest? That's pretty easy.

Move it to above the info boxes

Put it in the .primary-sticky-nav. It can still follow the user around, so you're never more than one click away from posting about date.Now()'s new CSS in JS solution.

And that bottom action bar thingie?

I think you know.

Kill it with fire

At the very least, it shouldn't be in the main reading vertical highway. If we have to have it follow us, put it on the side. Medium does this just fine.

Otherwise, we should put it at the bottom of the article with the rest of the actions and maybe move it up a few rows in the html order.

.article-actions {
  position: absolute;
}

but why 😬

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.

But at the moment, Dev is shunning readers and that makes it hard for us to stay best friends.

Posted on Nov 17 '18 by:

flaque profile

Evan Conrad

@flaque

I'm a generalist software engineer

Discussion

markdown guide
 

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

 

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

 
 

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

 

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.

 

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

 

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

 

Really?! I had no idea you could scroll with the spacebar! Is is rather standard on most web pages?

 

Shift+space to move in the other direction too.

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

 
 

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

 

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

 

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.

 

Great read Evan. The action bar definitely needs help. I couldn't find it during my first month on Dev. You expect it to be at the bottom of the article, but it kinda floats. There are some other css issues, but i can easily look over those because the content is A+. I know DEV is also open to contributions. I would if I could ever find the time. :)

 

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.

 

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

 

Good advice! I still feel disappointed with the overall look-and-feel of Dev.to (brace yourself, the oh-yeah-so-why-don't-you-improve-shit-and-send-a-pull-request gang is coming after me!). If I were to point to a better example, I'd say Hashnode.

After a long time Dev.to finally switched to a serif font for posts, which at least for me was a big relief. I hope things improve with time. 😌

 

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.

 

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.

 

Good Post, Well done.

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

 

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.

 
 

great article bro, keep it that way!

 
 

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

 

I am that dude with flipped monitor :)

But I still use phone to browse dev.to