Alright, I know my site doesn't exactly look like it's anything from the 2020's, but that's because it's my own site, and I can do whatever I want with it.

Well, when I first started my site, just like anyone else's personal site it was a plain html list of 8 links for every page on the whole site, but as the years go on, and the site grew in size, I had to organize and lay things out properly.

I took inspiration for the layout from many other sites, including many on NeoCities and such, but the thing about NeoCities, not only is it SSL, so you can't even view sites on an old browser on an old PC, is that a whole lot of them are designed in a way with CSS and such that even if you could view them on an old browser, it would turn into a jumbled mess.

Now this is what my idea of accessibility is all about, not only should it be fairly easy to navigate and be fully functional, but it also has to be viewable on whatever device someone might be using (Except phones. We hate phones around these parts. Use your iPad or whatever, just piss off with your toy cellphones.)

---

I've always been a supporter of the AnyBrowser Campaign, that anyone should be able to view your site on any browser, on any OS. Now, that plain HTML site with 8 links will obviously load on basically anything, as long as the HTTP version of your server is supported. But of course, as my site grew larger, that plain HTML list was outgrown pretty fast, and I ended up using tables to organize and put things where I wanted ‘em to be.

Now, tables are a pretty old school, and antiquated site design technique, but we're gonna be using all the antiquated HTML tags here. If you're following, and unfamiliar with old school HTML, you can learn how to write in ye olde HTML with the Razorback HTML guide.

Tables and stuff puts the site around HTML2/3 or so, so the oldest of the old browsers have trouble displaying the site properly, but almost every browser has no problem with it.

I also have a centered "container" table which is always set to 600px wide. This helps with 2 things, first of all, it keeps everything inside an area that will fit nicely in the standard VGA resolution, 640x480. Lots of old computers, and old monitors run at this resolution, so this table ensures that everything will fit nicely in a small resolution.

It also helps for the weirdos who maximize their browser on their 9000 inch 4k monitor, where entire sentences won't even span the length of the screen. Also the text will be tiny on those displays, but who even has a 4k display, literally pointless, I don't care about anyone who has one, and anyone who has one probably isn't the kind of person to look at my site.

Alright, now that we got all these tables, we start to style things up a little. You can set page backgrounds, font colours, link colours, fonts, table cell colours and cell backgrounds all in old HTML. With all that, you'll get an idea of how the page will look on a browser that doesn't support CSS. Now, it might not look great, but at least it's better than a jumbled mess that anyone would see on an old browser if you used all modern HTML tags.

Now for everyone on modern browsers, which is going to be most people, you can spruce things up a little with the magic of CSS. All those old HTML tags that you set will be overridden if you set a CSS rule.

For example, if you have <font size="2" face="Trebuchet MS">, you can change that to <font id="text" size="2" face="Trebuchet MS">, and set a css rule for #text. All that will be ignored by old browsers with no CSS, and will just show the regular old HTML, but on new browsers, the CSS rules will override the HTML rules, and show a page that you can make look a little nicer.

#text{
font-size: 24px;
font-face: Trebuchet MS;
color: rainbow or sum shit
}

And you can even style up an old looking table with some CSS. Just add in another CSS id, and add in border radius, shadows, and all that good stuff. You can pretty much add in an "id" to anything you want and take full advantage of CSS, while still keeping your site looking decent on an old non-CSS browser.

You can take things a lil further with CSS viewport. I haven't really taken advantage of this really, but you can use CSS viewport to run different CSS rules in different browser sizes, so for example, the old HTML table container will be hard set to 600px, but you can use CSS viewport to use the CSS min-width and max-width rules, font sizes, and positions of certain elements to make things look a little nicer on large displays.

Try something out, go to the main page of dvd3000, use the inspect element of your browser, and delete the CSS rules. Now you can see what the site would look like on a browser with no CSS support. Certainly not as nice looking, but everything's still in the same place, nothing's jumbled up and broken, and it still looks alright.

I haven't really seen anyone else do HTML styling this way, obviously with the combination of modern CSS and ancient HTML, all this makes the W3C validator want to put you on its list of people to kill, but you can be sure that your site is viewable on almost anything, while still looking halfway decent in 2022… as long as you're not on NeoCities. (Or one of those assholes who enables SSL on a static website)

So all this is nothing special, but just something to take into consideration if you think compatibility is important (and it is, there is no reason I shouldn't be able to read a blog on a 486), but you still enjoy some of the treats of CSS.

Also, if you care that much about your W3C vaidator score, say goodbye to it if you're gonna design like this.
Fuck the W3C validator anyways.

07/11/22