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

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!"

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!

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

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.

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

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.

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

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

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

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

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.

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.

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.

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

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

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

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.

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

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.

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.

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

Hackers they may be, web developers they are not.

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

What does it look like for you? You might want to let [email protected] know.

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.

I use Firefox but it is the same with Safari.

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.

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.