How to make complex layout

[CinPunk]

Hiya guyz :3. It's been more than a year since I touched my website and a lot changend. I want to refresh it to the ground up ( and make it work since is janky lanky af  ) and I wanted to make it maximalist ( I've been thinking of drawing all the single parts and put them togheter for a long time ). I've read that you need the iframe for maintaing the same page but changing the content of a specific part, like having the same layout but the content of the body changes when you click over the sidebar for seein the "gallery", for example. Someone did something similar? I wonder what's the best method to put it up and how to scale the different part so it doesn't break ( making it responsive is going to be something else lol )

[Dan Q]

Iframes: An iframe could work, but has knock-on effects like being slower loading (more HTTP round-trips), much harder to make responsive (suitable for a wider variety of screen widths), and making more work to ensure that links in-iframes open in the right place (whole page, other subframe, or whatever). Personally, I'm not a fan of iframes, but I appreciate that they might be the least-bad solution for some people, some of the time.

Single pages: The gold standard from a user perspective is, of course, to deliver all the HTML the visitor needs in a single request. I've described some of the different ways to do this before, but the essence of it is that you either need big HTML files (and manage copy-pasting shared elements between them yourself) or some kind of process that makes those big HTML files from small pieces (e.g. using a Static Site Generator [SSG], or else something running on the server side like SSI [which is available on Nekoweb!], PHP, or similar). All of these are fantastic options, but not all of them are available to everybody, and some of them aren't suitable for some folks, which collectively might mean they're a no-go for you.

<embed-html> or similar: The limitations of the approaches above are what inspired me to create <embed-html>, which I think is a good middle-ground approach that gets some of the best of both worlds. Bear in mind that I'm biased! It introduces a JavaScript dependency, which is its weakest point, but there are ways by which you can partially-mitigate that. The short of it is that you load a JavaScript file and then add e.g. this code anywhere on a page, and it dynamically loads the "other" HTML snippet and includes it inside this one:

Code

<embed-html src="embedded-content.html" cache></embed-html>

It's simple and fast and I think more people should consider it as an alternative to iframes, where using an SSG or SSI isn't feasible. But again, I'm biased. Anyway: if you want to try it then it's got its own website to explain it or I'm happy to provide a more-concrete example. You can see a toy example of it working at embed-html.neocities.org where the menu bar is shared between all of the pages.