Jason Knight
5 min readAug 23, 2021

Honestly, you sound like a lot of educators I've talked to the past ten years who have been packed full of nonsense by an industry filled with people running their mouths about things they don't understand. Sorry if that sounds harsh, but it's the truth of it. Your statements are riddled with half-understandings, bad practices, and a lot of just plain nonsense.

But that's why you're asking questions. And that's good. That's what smart people do!

For example you mention Figma. When it comes to web development Figma is no more of a design tool than Photoshop; which is to say that it's not a design tool at all and only artists under the DELUSION they know what design is think otherwise.

Design is engineering that incorporates art as one of its many facets. It also has to answer to accessibility, specifications, guidelines, and a whole slew of engineering concepts. If it's missing those things, it's not design. No matter how "pretty" it is.

An example of this is the misconception of fixed relationships between metrics. First off you say 1px always equals 1pt, which is utter nonsense. It reminds me of the 0.625% mistruth that fails to account that not everyone uses a 16px default.

Way back in the day we had the lie that computers at 16px fonts were 96dpi devices. Since a point is 1/72th of an inch, that gives you a 96:72 ratio -- 4:3. Thus 1pt by default on a "normal" machine is 1.33333~px. For a "large font" machine where 20px is the norm (inherited from the IBM 8514 settings for Windows 3.x) that goes to 5:3, so 1pt is then 1.666666~ px. We take my media center set for 32px, where now 1pt is 2.666666~ px. There is no fixed relationship and if you're thinking there is, you're not grasping why we even have different measurements.

Though side note, that’s why the original black and white macs were all 72 pixels per inch, to make working in points easier. THEN it would be 1:1. Sadly that hasn’t been true on any new computer since 1989. Though to be truly accurate, it wasn’t exactly 72 ppi on the vertical axis, running closer to 68, but it was close enough when the horizontal was correct.

Really though since PT is a physical unit, just like PX one really has no business using it for screen media layout where the PPI could be ANYTHING.

That's where the "but the viewport stays the same size" idiocy goes bits-up face-down. Do you really think that your 1024px media query applies when the fonts you declared as 1REM are now 32px instead of 16? Of course not! That's why EVERY garbage layout that uses PX media queries with EM/REM fonts is utterly and totally banjaxed on every machine I own!

But of course these garbage frameworks are built on "well tested components". "Well tested" being more meaning market-speak doubletalk than fact!

The same can be said of this grid nonsense. It reeks of the same mental failings as the early 2000's "800px friendly fixed width layouts" in that you end up making more breakpoints than needed for something width, min-width, max-width, and natural HTML wrapping behaviors (or flow-wrap) can handle WITHOUT queries!

I see it time and time again where people have a dozen media queries coming to two or more dozen k of code, for what could be done with two media queries not even totaling 1k of code.

With the insane amount of resolutions, window sizes, and font metrics we need to support, thinking in multiples of twelve is just silly, particularly for content columns which should be FLUID. Declaring 18 different fixed widths is not the answer! The same can be said of percentage width columns which have the same tendency to be ugly, broken, and unreliable.

Though you actually mentioned the problem without realizing it. "the physical screen size of the device"

If you're thinking specific devices and at specific resolutions, you're not thinking. We have no idea what future devices will be size-wise. Hell crApple changes device resolution and size every time the wind blows! Just involving the word "device" is wrong. Do NOT think specific devices or sizes, think about the needs of the content for ALL sizes in a fluid width manner! BOOM! Instant accessibility, future-proofing, and less work developing it!

It's why the design technique I advocate is to make a semi-fluid (max-width) elastic (entirely built with EM) desktop layout in HTML and CSS. Narrow it until it breaks, there's your first media query. Lather, rinse, repeat.

It's also why I advocate thinking about MORE than just the visual layout as part of the design. It's not all about perfectly sighted users sitting at screens. It's amazing how many common "design models" we see tell users with accessibility needs to go **** themselves.

Pre-determined "grids" are as much the enemy of accessibility as any other bit of bad practices that are -- again -- hot and trendy amongst artists who THINK they're designers, but are so devoid of the most basic of the underlying engineering concepts they're qualified to design but two things.

... and Jack left town.

Foundation realized this when they made their predefined queries in EM. It's a mistake on their part to even MENTION PX on the page you linked to, but that's probably web-rot they've not fixed yet.

Unfortunately their shit-show of presentational markup is why their entire system is as broken, flawed, and outright dumbass as Bootstrap or Tailwind, and needs to be kicked to the curb. Classes like "grid-x" or "medium-8" are just as presentational as all those tags and attributes HTML 4 deprecated, and it's why such nonsensical rubbish suckers people into deploying ten times the markup needed to do the job, piss away caching opportunities, and makes everything harder to maintain.

No matter how much the carny barkers yelling propaganda, or the mob of mindless head-bobbers who can't think for themselves claim otherwise.

As evidenced by going to Zurb's homepage, and seeing that they've got 36k of markup to deliver 2.32k of plaintext, a half dozen content images, and six form elements, not even 8k of HTML's flipping job! Going hand in hand with their incompetent 235k of CSS when few if any websites have ANY reason to have more than 48k of CSS, and I'd ballpark theirs closer to 32k... or the manure really slamming into the impeller with the 748k of scripting on a site that likely barely warrants the presence of scirpting apart from some stupid annoying user distracting animated bling that would probably be 1/20th the code if done competently!

Don't even get me started about their gibberish markup totally devoid of the most basic of semantics and logical document structure! I mean this alone:

Should be reason enough to say that the folks working at Zurb and therefore foundation itself is CREATED by people unqualified to even build a website in the first place. Much less have the unmitigated GALL to build systems other people will use to do it. We're supposed to trust the framework rubbish they promote, much less any other subject in web development? BULLCOOKIES!

When there's this much disinformation, incomplete information, assumptions if not outright lies parroted as fact, is it any wonder major companies are being hit left and right with accessibility lawsuits, and most web startups fail in their first year?

But as I said in a recent article, this is sadly the new normal... and it's not right.

Jason Knight

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse