Responsive Web Design Without Specific Media Queries

2023-07-04 17:52:22Z

Here I go about talking about how I design my website again!

My philosophy when it comes to designing my website is to keep it minimal. Everything else doesn't matter because it's the body texts that matter more.

If you look at my website CSS, you can see that it's about 5.68 kB in size (according to LibreWolf). Well, at least that's the numbers when I'm writing my blog post and using `hugo serve` to look at a preview of my website.

In production, the files are served with gzip compression and does not include development related CSS stuff (which is also tiny but changes nothing in normal cases). This makes the CSS stuff even smaller over the network, requiring less resources to be used which can be quite helpful on slow networks and low data caps.

Most things in the CSS file are either to make things a little more visible (e.g. borders on things like table of contents, inline code and code blocks) to make things a little more sane (e.g. images are limited in width to fit. for printed pages, most elements are hidden to reduce waste), or just changes to default stylesheets.

However, it lacks one thing: Media queries that respond to all kinds of screen sizes. Because that's just flawed:

It cannot possibly account for every screen size (have you tried your website on Apple Watches?)

You can't tell one device apart from another (it's practically impossible anyways so just *don't hyperfocus on one device and use more than 3 of them*)

Designing very specifically for devices/screen sizes/properties of a device excludes everyone else implicitly (again, what about an Apple Watch? What about that game console that has a web browser? What about a Smart TV with a web browser that is very old?).

(Yes, Apple Watches have web browsers. It's not easily accessible (you'd probably need Siri), but it is there nonetheless.)

There are many reasons why, including the motherfucking website, and why I don't have media queries specifically for every single device out there.

Motherfucking website

Resize this page. You'll see the text also resizes. And open the HTML version of my website on an Apple Watch. I dare you.

public inbox (comments and discussions)

public inbox archives

(mailing list etiquette for public inbox)