Hacker News Reader

Comment by timw4mail | Hacker News Reader

The real problem is that designing for different screen sizes, especially with responsive design, is very difficult.

For my personal projects, screen size is the factor used to determine layout. Mobile/tablet/laptop/desktop is irrelevant. My goal with smaller viewports is to make the layout as similar as possible, without the user having to scroll horizontally. Because I don't want to change the layout too much, I do not use hidden navigation menus.

Hamburger menus are terrible - I see them as a design copout.

View on HN

The real real problem is that so many sites overcomplicate their design.

HN works beautifully on any window / screen size.

It’s not that hard to display a few paragraphs. It’s hard to display complex pieces of information while also making them look good to the client (which, we should remember, pays our bills)

HN is a pretty minimal site though - it is just a message board.

A message board like HN is more difficult than you think to get right across a wide range of screen sizes, just because comments can nest many levels deep. HN arguably has problems of its own in that regard.

Almost all websites are pretty minimal in terms of their features, but they're built as if they were an in-browser image editor.

Reddit is barely more than HN with pictures and a LOT of bloat inbetween. It could be as minimal as 4chan-style imageboards if you add voting and a slightly different comment view.

Youtube is just a tiled list of thumbnails or an embedded video player followed by a list of thumbnails. It could work 100% without JS outside of the video controls. Instead it's a huge, slow mess. It's also inconsistent; in my case it scales the list of videos from subscriptions to about 50% of the browser window's width, leaving a chunk of empty space on the sides. The startpage with basically the same layout always uses the full width.

100% agree. The kneejerk reaction of "well HN is so simple, of course it has a simple design" has the causation backwards. You only realize how simple HN is because they stick to a simple design!

99% of websites are (could be) just static text and images. Facebook, Reddit, CNN etc could look like HN. Amazon could look like craigs list. The amount of sites that actually need and are enhanced by JS bloat is very low.

It works beautifully for it's indented audience.

I think many people, my parents included, would have trouble navigating HN on a phone. Especially upvote/downvote.

I generally agree. But thumbs up/down is difficult on mobile with my fat fingers, even worse since I've had nervr damage.

Pinch zooming works on HN, which helps me hit the buttons. I might prefer slide-to-action like narwhal's Reddit interface, but I'm OK with HN not being quite that fancy.

Lolno. I have to make Firefox take only half the screen, otherwise HN will render wiiide lines with text. I cannot read lines with >200 characters, then I miss the mark when jumping to the next line when it's multiple lines in a paragraph. HN is also the only site I have zoomed in on desktop, as the font is unreadably small on high dpi devices.

And on mobile I find it impossible to hit the upvote arrow.

I can read long lines just fine, and I like that the full width of the viewport is used.

Because HN is designed so simply, you can trivially get the layout you want (half width lines) and I can also get the layout I want.

If HN instead tried to artificially limit the viewport in code (which is something lots of web developers do), they would break all sorts of other use cases for no reason. That's what I mean when I say websites tend to overcomplicate their design.

> Because HN is designed so simply, you can trivially get the layout you want (half width lines) and I can also get the layout I want.

Except you're ignoring mobile devices.

No, the say that HN does it works regardless of screen width. If the site were to assign a fixed width, it would conflict with mobile devices.

This is why CSS has "max-width".

I read HN on mobile all the time, what is the problem with it? The only issue i've noticed is being a bit harder to tap the show/hide branch icon but it is a minor issue.

That's why i like to keep an 19" TFT screen as a third display on my desk, most websites render perfectly on it and i can always have a browser in the foreground.

I prefer that way, way more than going to, for example, Github and doing a code review and the website refusing to give me more columns to look at in side-by-side view, because they think that the number of lines they've enabled is perfect and want to have the sides of the screen be full of whitespace that you have to modify the layout of the website to get rid of.

Or random blog sites that become a narrow column of text and a *huge* amount of whitespace on either side.

Browsers should have more say. In a perfect world, the web developer should not even need to know the browser's width or height, whether it's a phone or computer, or what kind of input devices are available. The developer should simply provide some kind of semantically tagged content (text and images), a list of suggested colors and fonts, and let the browser make the final call, based on what's best for the particular platform and screen size.

Somehow we've gotten to this world where the web designer expects almost-pixel-perfect control over the layout of every little thing on the page, user's preference be damned. You're not laying out a magazine page in a desktop publishing application!

Sure. Now let's say you're shopping for a brand new rug for your living room. Are you going to buy it from a site the looks like HackerNews? If so, I'd venture to say you're in the minority. A used rug from Craigslist, perhaps, but a brand new rug costing hundreds, you're going to want a site that looks VERY professional.

So you’re saying “professional == follows modern design fads” as a proxy for how legitimate a site is. And maybe you’re right that is a somewhat useful (if unreliable) proxy for legitimateness, but it’s not an argument that it’s good design.

For a site that sells rugs, good design is design that accommodates all users and sells as many rugs as possible.

So an accessible site that follows modern design fads is probably the best thing to have (if that sells rugs).

If one of the goals of design is to serve as a signal for how trustworthy your business is, then it is absolutely an argument that it’s good design.

I would definetly pick the store with the hacker newsish website!

Amazon is a design garbage bin, but it doesn't seem to be reducing their sales.

Actually I've bought rugs and computers from websites not much more complex than HN. Both sets of transactions went smoothly and quickly with no issues. I wish I could say the same for some very flashy websites I've used. On some I can't even get a delivery estimate until I've submitted credit card etc.

And yet quotes don't wrap to any specific size, so you end up with an awful horizontal scroll bar.

There is no way to format your text, even stuff that's available since MS Word 1.0, such as bold or italic. Even science papers have formatting so I don't buy the "overuse of styles" BS.

There is no way to have avatars or some other ways to distinguish users (or mods!) to make this place feel more like a community in real life. I've gotten used to it but it still sucks.

The contrast is super low.

HN is an MVP for a super minimalist forum that wouldn't fly for any other kind of community except for the intersection between hackers and wannabe entrepreneurs.

If you weren't aware https://news.ycombinator.com/formatdoc may be helpful. There are some basic options for text formatting on HN, including italics and bold.

There is no bold.

𝗔𝗿𝗲 𝘆𝗼𝘂 𝘀𝘂𝗿𝗲?

Stop tricking people. Yes you can use unicode for all kinds of fun stuff, but that's not formatting, it's a hack.

I’m sorry, it was not my intention to mislead anyone. Yes, it’s all trickery with copy-and-pasted Unicode bold characters.

You would have gotten away with it too, if it weren't for those meddling kids!

> There is no way to format your text, even stuff that's available since MS Word 1.0, such as bold or italic

Are you entirely sure about that?

Ok, now do bold ;-)

You mean 𝗹𝗶𝗸𝗲 𝘁𝗵𝗶𝘀?

ʇxǝʇ uʍop ǝpᴉsdn sʇɹoddns uǝʌǝ NH 'uɐǝɯ I

There is no formatting support for it, it seems you can use Unicode bold formats or something. Doesn't seem approachable or trivial...

Yes, I know people do things like that (mostly on Twitter, it seems), but I wouldn't recommend it; it'll interfere with searchability, copy/paste, etc., and generally make the text less interoperable. The mathematical alphabets in Unicode are intended for specific technical uses where the typeface is an inherent part of the symbol's identity, not for styling normal text.

Now try a screen reader (on a mac, Edit > Speech > Start Speaking will do nicely).

Spoiler: You mean mathematical sans-serif bold small l, mathematical sans-serif bold small i, mathematical sans-serif bold small k, mathematical sans-serif bold small e, mathematical sans-serif bold small t, mathematical sans-serif bold small h, mathematical sans-serif bold small i, mathematical sans-serif bold small s?

If screen readers do that, why? That seems useless even when those characters are used for their intended purpose.

They're just reading the character name. I don't know of any screen reader that actually makes an attempt to read math reasonably.

Why don’t people point out how terrible screen readers are then, instead of criticizing people posting online who cannot be reasonably expected to stay up to date with Unicode and screen reader functionality?

>And yet quotes don't wrap to any specific size, so you end up with an awful horizontal scroll bar.

HN doesn't have a "quotes" feature. Some users here have the unfortunate habit of abusing the code formatting feature for quotes.

>There is no way to have avatars or some other ways to distinguish users

Thank god. There's a lot I miss about forums, but avatars and huge signature blocks are better left in the trashbin of history.

Yes, because avatars and signature blocks (which are useless, I agree), couldn't possibly be designed to be tasteful and fast to load. Especially avatars. A 30x30 image of any kind would be enough to convey more info about the speaker.

I’m much happier that it isn’t a “proper” community with avatars & such, fwiw. Much like I’m not fond of small talk, I’m also not fond of the obligations that come with social media.

What? I can’t count how often I accidentally downvoted a post because I can’t hit the correct arrow on mobile!

But it doesn't break your ability to zoom, so you at least have the option to (quickly) fix it.

I can't downvote (I think?) and I don't miss it. I use an android client (Materialistic) that doesn't even provide me with an option to do so, and I haven't looked for a way to do so. If I disagree with a post or comment and don't want to add a response, I just move on. If I'm in the browser, I'm probably not even signed in unless I want to upvote or save something.

HN is almost useless on mobile. Tiny UI elements that are hard to hit, people using code blocks for quotes that cut off after the first few characters, etc

At least it allows for pinch zooming, which is (IMO, of course) an acceptable compromise. Maintain readability for the text while still making it possible to hit the UI elements.

Any site allows pinch zooming if you use Firefox and toggle a setting.

That isn't an acceptable compromise, you end up doing a lot of horizontal scaling to read block quotes and zooming to touch UI elements.

It's not the worst, but it is trivial to do better.

> you end up doing a lot of horizontal scaling to read block quotes

what block quotes?

Exactly. Most of the time, recoverable flaws are better than immutable bad design.

It does clamp text at some max width. If you have a couple 1440p monitors try stretching the browser window across screens.

Its actually one of those cases where the old news print model of multiple columns would work well, but that is much harder than it should be with CSS, so pretty much no one does newsprint style scrolling where you read all the columns and then scroll to the next set.

I'm curious what your menu solution is. I agree hamburger menus besmirch the good name of the hamburger, but for longer menus they feel like at least an acceptable solution.

I like gear icons, sometimes they don't map to exactly the semantics of what is in a menu, but if there are no other possible menu elements than I know to go to the gear icon.

I've become used to the hamburger menu, but it still doesn't catch my eye (Chrome's now three dot option is even worse at this), gear looks noticeably different than the rest of the UI and so I can easily spot it for options.

> Hamburger menus are terrible - I see them as a design copout.

I am genuinely interested in why. The only reason I can think of, is that they may me unintuitive, but I think this is becoming less and less of a problem.

Hamburger menus are an accepted and pervasive design element. That does not means it’s good design, but it means that users are familiar with the concept. Familiarity goes a long way to ensuring good UX.

There's a lot of "literature" about the shortcomings of hamburger menus and "junk drawer navigation" that come up when i google the topic.

Just use the word "menu". The hamburger menu (and its cousin, the three vertical dots) have no analogy to the real world.

Sure, it has become more common, but for anyone not already familiar with it, it is utterly useless. You have to be willing to click random things to discover what it does.

From personal experience, I had to train both my wife and mother to look for them, neither of whom had the patience otherwise to figure out these cute designs. They may be common at the sites you look at, but that doesnt help people who have only used sites without them, or only used portions of sites accessible without clicking on them.

I consider that to be an utter failure.

Reply on news.ycombinator.com