Another thing that has changed quite a bit over the last ten years has been the little nuances in web design. Back in the day, because sites were basically designed on a per-pixel basis, or at least web browsers interpret HTML code in pixels, I could just place site elements in a certain way and I’d never need to worry about how it’ll look when the page is resized. And that’s IF anyone needs to resize the webpage; if I did my job right as a web designer, the page should look fine on any computer, whether Mac OR Windows (lol linux).

But now webdesign is almost like document design, where web browsers can render elements smaller than one pixel, as if it treats webpages as if they are rendered at 400 dpi or something. This is further complicated by the different ways various devices can render a webpage, whether viewing it on a mobile device, or a computer with a Retina Display (ie 1 regular pixel = 4 “retina” pixels), or if they simply want to view the webpage at some percentage which subsequently resizes graphics to an freaky size (32 pixels * 133% = 42.56 pixels).

Basically I need to worry about how my page will look. A perfect example is how the “corners” of the main text area were rendered. This is what they’re supposed to look like (and have looked like back in the day):

But this is how modern web browsers rendered them:

What’s happening is that, since the 30 x 32px corner elements are being tiled in the 30 x 32px area I’ve allotted to them… but at larger scales web browers are resizing both of those 30 x 32px elements to something like 49.8 x 53.12 pixels, and so the web browser is throwing in 0.8 pixels x 0.12 pixels worth of the tiled copies of the graphics.

Basically it’s a needlessly complex situation that never would’ve happened in the past. So my solution was to basically not only turn off the tiling, but also expand the corner graphics a few extra pixels, such that if the web browser feels the need to include an additional 0.8 pixels x 0.12 pixels of the graphic, it’ll throw in the extra bits that I planned for it to see such.

To put it in simpler terms, with the original corner graphic on the left and the updated graphic on the right:

Hopefully this makes sense.

Sorry if this was long a boring… but hey, I gotta populate this site with SOMETHING! (I know, I know, I’ll work on some more comics soon!)

This entry was posted on Sunday, September 1st, 2019 at 19:03 and is filed under Bjournal Post. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.