Hacker News Reader

Comment by zeveb | Hacker News Reader

> Do you remember ever enjoying using/reading a website with more than two columns? I don’t.

Another one of the things I really miss about the pre-JavaScript, pre-CSS, document-oriented (as opposed to the current experience-oriented) web is being able to make my browser window half or a third of my screen, and having documents be eminently readable. That was really, really nice. Try it now, though, and nothing really works correctly. Which is weird, because a third-width window on a laptop or desktop has roughly the same proportions as a phone in vertical layout.

View on HN

Man what I remember was doing multiple columns using Tables in HTML which never worked in anything under a 700px resolution.

Case in point this beast: https://web.archive.org/web/20010503213654/http://www.techtv...

Yeah but you could scroll your window horizontally to only keep the useful column visible.

Now it's "HEY I SEE YOUR SCREEN ISN'T WIDE ENOUGH TO FIT TWO COLUMNS OF ADVERTISING ON THE SIDES. HAVE THE CELL PHONE LAYOUT WITH FULLSCREEN POPUPS INSTEAD!"

Not to mention if you're actually on a cell phone it's "HEY YOU JUST CLICKED ON A LINK, BUT SINCE YOUR PHONE IS SO SLOW AND MY SITE IS SO BLOATED, BY THE TIME YOUR CLICK WAS REGISTERED SOME OTHER CONTENT LOADED IN THAT LOCATION. YOU ACTUALLY MEANT TO CLICK ON THIS AD, AMIRITE?"

This is a UI sin that should trigger public shame of developers.

It really should be handled at the OS level for apps, or at the browser level for web sites: If I click anything on the screen, it should react as if I clicked on what was there 300ms ago, maybe 400 or 500ms or longer.

The fastest (typical) human reaction is around 300ms. If I'm clicking on something that appeared less than 300ms ago, then I'm NOT intending to click on it. Maybe the delay should be configurable, or maybe it learns the behavior for a particular user? An elderly person surfing the web might have a 1000ms propagation delay between deciding to click and clicking on a button or link. But my reflexes are closer to the 300ms point if not better on a good day.

No matter how fast a human is, if a button is covered by an ad 100-200ms before they click, there's no way to not click on it. And that's bad UI.

Even my (our?) favorite search engine, Duck Duck Go, is guilty of this: I will frequently accidentally click on the "WikiPedia summary" popup which has just replaced the actual top link that I wanted to be clicking on. Bad web duck!

Heh. I've never thought of solving that via a delay before but it's a brilliant idea. I can't think of the site at the moment (but it was a popular well respected one) but yesterday I got caught 3 times in a row by this issue. I just kept thinking to myself "how could you have so little respect for your users?"

The fastest (typical) human reaction is around 300ms

From what I've read it's more like 200-250ms, but hardware lag does bring the end-to-end closer to 300ms.

A quick Google finds numbers from 250-280, with record reflexes as low as 110ms. I've done less than 180ms on a "hit the button after the light goes on" game at a science museum (hardware designed for it, so no built-in latency).

300ms is a good lower limit, though, if you take into account complex video processing and standard brain activity when browsing; when hitting a button when you're browsing, your brain isn't wound up and ready to react as quickly as possible. Getting that extra fast reaction really requires short circuiting some of the mental processing you'd normally do. I'm pretty sure I'm remembering 300ms from the cognitive science/UI classes I took in college.

And don't forget the hardware lag in your own body. ;) The signal to click the button takes ~10ms to get from your brain to your fingers. When you think about things like sports where the accuracy of, say, releasing a ball when throwing it, needs to be in the 0.1ms range to hit your target, but your brain is actually giving the command 10ms before the ideal release time... Makes my brain hurt just contemplating how it works.

Pro tip: Don't think about this while trying to throw a ball accurately.

+1. My pet hate at the moment is the RunKeeper app. Every morning I fire it up to start my exercise. The interface loads up, and the 'Start my Walk/Run' button pops up at the bottom of the screen. The button waits there for around one or two seconds, then slides up about a centimetre and another button saying 'Sign up for our Pro paid edition' appears in its place.

I swear the the delay between appearing and sliding up is always timed and changed each day to cunningly coincide with my finger tapping on the area where the 'start' button used to be so that I almost always tap the 'pay us $$$' button instead !!!

I wouldn't be surprised if it feels random because it is loaded after a network request with variable timing checks to see if you have the pro version or not.

This happens so often, on so many different sites, that I can't just chalk it up to unfortunate coincidence. I used to think it was conspiracy-theory territory to call it deliberate, but on reflection - could blind A/B testing in the unthinking pursuit of "click-through rates" and "conversions" actually push developers towards this behaviour, even inadvertently?

I think it's intentional - just like the placement of display ads next to autoplay videos. People spend time mousing over and 'looking' at the ad as they're hunting for the mute button. Increases interaction metrics and makes the ad slot look more valuable to prospective ad buyers.

EDIT: While we're at it, there's a publishing group that displays all news articles as popovers over the main page. People accidentally click out of the articles and get dumped on the home page, containing expensive "site takeover" advertisements.

Can't remember the name of the company - they have a bunch of US-based local news sites.

It doesn't even have to be clicking a link, it can even be scrolling. And you don't even need a slow phone to experience this behavior on a daily basis.

Most of the web was more usable on mobile before mobile sites started pandering to low IQ people who couldn't figure out how to pinch zoom and scroll. Now it's only the largest sites that can afford the developer know-how to make their mobile site actually usable. (And not all of them bother.)

If you are a small operation that still makes your mobile web site usable, then power to you.

Really? Websites I built up until like 2004 were optimized for display at 800x600 -- still roughly 50% of users at the time. This meant most of my content was somewhere around 640-700px width.

It wasn't until 2008 when 800x600 was below 10% of users and I finally started using a 900 grid.

That techTV site launched in 2001 and it was decided to go to around 800px. Up from the old ZDTV site which was pinned at 612px.

https://web.archive.org/web/20000603192652/http://www3.zdnet...?

Ah techtv, you bring back lots of memories.

I started designing web pages in 1995. While they weren't works of art, I really miss the simplicity and utility of the internet back then. Also, most content seemed to be really enthusiastic and less economically motivated. I wish we could get back to that.

I just miss http://csszengarden.com/ time.

Oh man, that's beautiful. And it works with a two-inch-wide window as well as a full-screen window!

If only there were some way to force every site to use those techniques. Electric shock, perhaps?

Anything is easy if your content is just text.

Stick a menu, some photos, a table, a form and item layout in there and you start hitting the pain points of web design.

Of course this is no excuse to not be able to make a perfectly responsive site with those hard parts as well - just people are lazy.

Agreed, very impressive layout!

Strange. I stopped doing web development roughly 5 years ago so I still remember that site as something that is hyped.

Here's an actually useful CSS Zen Garden revival: http://websitesfortrello.github.io/classless/

Interestingly, most the themes I tried didn't render well on my screen. Elements clipping or rendering on top of each other in funny ways, stuff like that - all the typical stuff that happens when the designer didn't consider how the page might render on a smaller screen than the one they have.

I'm rocking a 13" MacBook with the browser in full screen mode, so I suspect my screen's dimensions are well within the range of typical users. The fact that I encounter sites like this on a daily basis is an eternal source of wonder.

Theme selection doesn't work properly on this site, any other site to browse classless themes?

GitHub has screenshots: https://github.com/websitesfortrello/classless

I really don't think it ever went away. It's just not popular for whatever reason.

I think because CSS layout without the aid of a CSS grid is so @$@% obtuse.

Or at least, try as I might, I've yet to find a clear and comprehensive explanation of how to do it properly. So, despite thinking CSS Zen Garden is a work of beauty, for my own part I just throw bootstrap at it and get on with my life, and I'm not ashamed about it.

If your content won't flow/flex into a grid well, then those parts should have custom CSS @media queries to begin with.. it's a matter of learning that.

Alternatively, you can use something like react with event triggering on window resize, and use the actual window size as part of your rendering... for example, I'll put the event to trigger my redux store so that state.window.size.height/width are set, I'll sometimes also do the window.scrollTop in the events as well.. this way I can use that in code for my components...

    render(props) {
      if (props.window.size.width < 600) return null;
      if (props.window.size.width < 1024) return <div>...</div>;
      ...
    }

Or similar changes in rendering... assuming something like redux with react-redux's connect. It's actually a pretty slick way to handle this. In this example, [1] I'm using the value to also adjust visual configuration from inputted configuration.

[1] https://github.com/tracker1/md-datepicker/blob/master/_src/D...

Use the grid to get a prototype up fast.

Then you do the real work and convert it to media queries that fit your design.

The problem there is, I have no incentive to continue to part 2. Every time I've tried, it's been a frustrating mess that ends in failure.

I suppose it's easy for me to punt because I'm not a front end developer. To be honest, though, CSS is such a bizarre layout system that I don't think I can blame the pros for doing it, either. Part of being a professional is finding the most profitable use for your time, and I doubt that most people will notice the difference.

+1, howewer I do recall countless "works best with minimum 800x600 resolution and Internet Explorer" disclaimers.

Yesterday I needed to look some stuff up while on an RPi with just Ubuntu server. Using Lynx on Google and Wikipedia brought that back a little bit. It was nice.

I have two screens, one of which is vertical. It's the one I usually use for web browsing, because reading is just nicer if the columns aren't too wide and lots of stuff fits vertically (I can see an entire page of Google search results, really nice!).

Tons of sites assume a width of something that is obviously greater than 1080 pixels and break in awful ways.

Oh, god yes. If you need a special, mobile only site, you're doing it wrong. HN is living proof.

> HN is living proof.

of what? that you don't need a separate mobile site (or js) to show a most basic wall of text?

open up amazon.com or walmart.com and see how your justification holds up. certainly, there are simple layouts with sparse content that can be made responsive easily (blogs, image portfolios, etc) but this is a far cry from proof that a broad statement is at all applicable.

>of what? that you don't need a separate mobile site (or js) to show a most basic wall of text?

Most sites only need to show just that. And fail miserably at it.

>open up amazon.com or walmart.com and see how your justification holds up.

90% of sites are content based, not Amazon or Walmart. And even then could do with a much simpler layout.

Those are a pretty important 10%.

Fair enough. But how many sites on the internet that have special mobile sites are, at the end of the day, just showing walls of text?

I find this funny now because HN used to be awful on mobile, due to an inflexible tables-for-layout design. One that couldn't easily be changed, either, because everyone's clients relied on the exact structure of the markup for screen scraping.

I know it's a solved problem now, but:

> One that couldn't easily be changed, either, because everyone's clients relied on the exact structure of the markup for screen scraping.

This doesn't seem like that hard a problem. Presumably the robots all sent their own distinct UA strings (as scrapers only get written to imitate browser UA strings if you ban non-browser UA strings.) So why not just filter your logs to find all the known scrapers, serve anything with those exact UA strings "legacy" table-based responses, and serve everyone else the new layout?

Then you have to maintain two layouts in perpetuity.

Thankfully, this has been fixed.

There are plenty of ecommerce sites doing the mobile/desktop split generally well (and making millions of sales in the process). HN is literally text-only.

HN is terrible on mobile. Their column sizes are just slightly too big for my screen (not adaptive), so I have to scroll to read the last word of every line. And on desktop, it just expands to the whole page width, even through everyone knows you should never have a line of text that's longer than 600px.

Hackers they may be, web developers they are not.

HN has a mobile-only site, it was updated quite recently. It's been quite subtly done, but it's made upvoting and accessing comments a lot easier.

No, HN has a responsive layout - it works well on any screen size. (Well, hitting the correct arrow on mobile is still hard, but at least there's an undo button now).

Well it doesn't work very well on my phone. By the time I zoom enough to be able to read the text, its usually going way past the right hand side.

Use a browser that reflows text then and complain to the creators of your current browser that they don't support the integral feature for small screen web enjoyment.

HN is terrible on my iPhone 5S. Everything is way too small, it's extremely hard to tap on names, arrows or anything else except headlines.

For me it looks like this (on an S5 with Firefox for Android):

http://i.imgur.com/K6ov1pv.png

What does it look like for you? You might want to let hn@ycombinator.com know.

It looks vaguely like that. Notice how all the menu links are clumped together? The same is true for all the action links anywhere eon the site. I may be old (38) and fat fingered, but I often will tap the wrong thing because they're just too close together and the targets are too small (plus they are text links, and not buttons.)

Actually reading text is not the worst part (though if I want to zoom at all then stuff scrolls off the page, since it won't reflow on iOS when you zoom, and browsing becomes miserable then.) The worst part is trying to interact with the site on mobile. I basically just don't do it.

Try zooming in to make the text larger for 40-year-old eyes. Doesn't work so great.

It is great on my Samsung Galaxy S. If I zoom in, long lines simply reflow to fit the screen. It means that I can dynamically adjust the font size to suit any accessibility needs or situation.

That's a pretty nice feature. Is there a browser on iOS which supports that? Safari and Chrome do not seem to reflow.

As far as I know Apple forbids people from using their own rendering engines so all you can get on ios are UI/UX differences.

Apple have an image to maintain. They don't want old people using iphones for web browsing.

Same for me on on iPhone 6 - comment text is tiny and I have to zoom in and to be sure of hitting controls accurately. Text does not reflow on zoom. :(

I use Firefox but it is the same with Safari.

Ik dont think responsive layouts is what he meant by mobile site.

That's correct for many websites, but others such as Facebook have such a complicated but still correct UI on a desktop that it's appropriate to have two different websites.

> correct UI on a desktop

Nope. That was true about a year ago, but not anymore. Facebook UI on a desktop is horrible. Try using it with 1024px wide screen - most apps/games aren't fully visible because they give 760px to the canvas and the rest of their UI is not responsive - so either the ad space on the right or the content (app/game) has to suffer.

It certainly needs more love - another problematic part is when you have messages open but you want to see stuff on the column to the right of the newsfeed. Its design leaves some to be desired.

I just discovered another problem today. You cannot paste text into chat (using latest Firefox stable on Mac OSX).

I run my monitors in portrait orientation, so I see everything in 1080x1920. Almost everything works fine.

I do occasionally run across a site which uses fixed width divs and either won't squish down past 1280px, or gets all messed up because they plainly didn't test on narrow windows, but they're in the minority.

I am from the same period and I don't see what you're talking about. You're just old and you like old stuff. Old people like old stuff.

On HN you can do that and the text even gets larger.

Reply on news.ycombinator.com