Hacker News Reader

Comment by CamouflagedKiwi | Hacker News Reader

For a CSS design site, this looks fairly bad to my eye. I'm not any kind of UX expert, it just looks clunky:

- Lots of text seems slightly offset. It's not all centered within buttons etc.

- The text also doesn't seem to quite line up with the icon on said buttons (it feels relatively a little too high)

- Similarly the text within the little notification popups ("New") isn't centered and hits the top of the outline

- The colours have poor contrast. I don't have any vision impairment but the peach colour doesn't feel distinct enough from the purple/lavender to me. (It's better in light mode when the peach turns to a stronger red).

- On that note, maybe yellow was not the best background for the beer badge when most of the glass is yellow with a bit of white.

I don't know if there's something that makes this render any differently for me than anyone else. I'm using Chrome though so I wouldn't have thought it'd be especially unusual.

View on HN

That's what I love about iPhone13 mini with Safari. You spot badly designed sites immediately.

(This site's buttons are too wide and it bumps from left to right when scrolling sideways.)

It's still a free CSS kit, but now I know there's no care behind it.

I remember how IE5 used to be the bottom rung to test a design against.

(The site renders perfectly for me in Firefox on Linux. I never owned an iPhone. I suppose whatever AI model was working on it also used a single desktop browser.)

They didn’t mean that Safari had a problem on rendering, but that their phone is so narrow, it often highlights pages that weren’t tested properly for mobile.

It seems the 13 mini is 375px wide, which isn’t even that narrow. The smallest I normally tested against was the width of the iPhone SE with 320px.

I only see a blank white page.

I'd expect that people who are specifically trying to show me an interesting CSS library could make at least something show up on the page without JavaScript.

As a matter of policy, I don't whitelist sites that give me neither a clear reason nor initial content.

Right, so it's some JS SPA thing as well (of course).

Out of interest, do you not often find this a problem these days? I feel like there'd be a lot of sites out there that are non-functional or literally do nothing without JS.

Maybe it's triggering ad blockers? I have JS enabled and I see a few elements but it's obviously broken here too.

In any case it's not a great look if they want to encourage adoption of their tools!

It does still happen not infrequently on a certain sort of site which I’ll simplify to “marketing homepage”, but it’s not happening anywhere near as often as it did three years ago. I haven’t tried to assess if this is because more-sensible frameworks have gained popularity, or if the stupid frameworks support server-side rendering better now.

Gotta say, though, that I don’t think one actually misses much in such cases.

Of sites that require JS to not be blank and don’t fit into this main category, my vague feeling is that the rate hasn’t changed much.

I agree with the sibling comment that it's been worse in the past.

But it also tends to correlate with types of sites that I'm not especially interested in anyway.

Well, except the image hosts. Webmasters who claim that their site's primary purpose is to display static images, who cannot or will not just use a normal <img> tag, are beneath contempt.

> For a CSS design site, this looks fairly bad to my eye. I'm not any kind of UX expert, it just looks clunky:

Front page says "Build material design in record time", so it's on par with actual Material Design which is all that, and more. Here's a small thread I collected some time back: https://threadreaderapp.com/thread/1643607965935476737.html

everything here looks fine to me. what should I be looking for?

At how things are actually aligned with respect to each other.

E.,g. in forms all icons are aligned to the top of the input fields they are related to. In titles almost nothing is visually aligned with the center of the title text: the hamburger and the arrows are lower. In menus triangles/arrows are below the visual center of the text. Headers for some reason offset from the left etc.

The results is a disjointed collection of elements that are just crudely assembled together with no rhyme or reason.

100% agree i wish i could upvote this comment twice

I agree. In Chrome, vertical and horizontal padding aren't even; some text is a pixel or two offset.

Reply on news.ycombinator.com