'00s japanese visual novel site design

this is OG html, likely coded by hand, not a scrap of CSS to be found, design embellishments are only what's possible with html tag attributes like text color, size, a single tiling background color or image. images do graphical heavy-lifting but they're floating in space, not deeply integrated with their surroundings on the page. content is all in a line down the middle of the page separated with <hr> and <br>, everything is kept mostly on a single page. tables make an appearance, but they're still used as actual tables, with visible borders.

web designers yearned to place elements around the page on a grid instead of in a line of blocks down the page... the somewhat hacky way they figured out how was by using invisible tables to divide up the page (now we've got stuff like "css grid" for that instead). but for precision formatting work you end up having to nest tables within tables within tables, which becomes a real headache to deal with. the burden was lessened by increasing usage of web development programs like macromedia dreamweaver or something called "IBM WebSphere Studio Homepage Builder". they achieved some impressive results just with tables though, the site to the left and many of similar complexity were all built on tables, i think this is when site design really started coming into its own, smoothly integrating pre-made graphics with html styles and layouts that make better use of the full breadth of the page.

this is more-or-less the era we're still in, at least if you judge solely based on the raw html composition of most sites. during the transitional period between this era and the last, it's basically impossible to tell apart the table-based sites from the div-based sites only by exterior appearance. there are also many japanese sites today that still look pretty similar to this one...

here we've got a nice simple character page with a cute hover effect over the chibis, using an iframe to swap in pages with graphics containing the character bios set as the background. it's pretty common on these sorts of pages to put the text right into the graphic instead of in the html, you see the same thing on vn site "story" pages too. this site as a whole is pretty barebones because it's not advertising a full game, only a "fan disc" accompanying one. fan discs contained bonus follow-up content pushed out to capitalize on a hit game, sort of an original physical form of "DLC".

character relationship charts are a common character page feature, but they're usually static images. this one puts an impressive twist on the concept by only displaying a character's connections when you hover over their icon.

many sites offered "support banners" you could put on your personal site or blog, which functioned as a sort of cheap grassroots advertising. often there would be a promotional "campaign" where if you put up a banner for a game and let the studio know, they'd enter you into a raffle for prizes like autographs from the vocal cast, or everyone who put up a banner would get an email with exclusive content on release. banners were usually provided in several aspect ratios like horizontal, vertical, or square... there didn't seem to be a standard size for each type, except that the smallest ones were always 200x40, essentially the japanese equivalent to 88x31 buttons. hotlinking was encouraged, i guess if you're providing free advertising the least they could do was take care of the bandwidth and storage space for the graphics in an era where it was more of a concern.

every site has a "downloads" page with free demos and extras like opening songs/movies or wallpapers available. large file sizes like the demos or videos were almost universally hosted on 8-10 mirror sites specifically for hosting visual novel paraphernalia, nearly all of them (understandably) offline now. i looked into them on the web archive and it appears they were each run by solo hobbyists (some used distributed computing) as a public service, most were members of a mailing list/collective called "KEL" (didn't manage to figure out what that means) that even specified in its guidelines that member sites should be non-commercial and run by individuals.

here's an example of a site that's basically unusable without flash support, the menu and many pages are all based on it. this particular studio was fond of flash-based sites in its early years.

here we've got a relatively modern frameset layout with the left-side menu, the pages themselves feature some fairly elaborate flash as well. the "background" page even uses flash to embed a whole vn-style segment introducing the setting.

probably the most difficult part of web development is figuring out how to actually implement in html the page layout and design you've come up with. but what if there was a way that your site concept art and mockups could just be the website, all work finished once the graphic designer hits publish in their illustration program? this site figured out a way to do it: every page is actually just a single image, using image maps to insert links in the appropriate places. a pretty slick design solution if you don't mind poor load times and accessibility, though the site does feel a little flat in a way.

ok, so this site is significantly newer than every other one here and isn't even from the noughties, but just get a load of the insanely complex polygon image maps over each of the girls on this page to make them light up when hovered over, in additional to being clickable links. the effect can lag at times, though.

what an inspired design, one of my favorites... centering it on the huge graphic of the main heroine, split by the logo coming through the center... the scattered menu "drops" with a speech bubble explanation when hovered over, each individual page with a unique design too. how did they get those thin banners at the top and bottom? turns out this is actually a stealth frameset layout! incidentally, this is the only site featured on this page for a vn i've actually played.

here's another one from unison shift: blossom, they might have my favorite overall site design sensibility. check out that sideways checkerboard menu... though you can tell it's actually built using a table, since the interactible area goes beyond the rhomboid graphical boundaries, forming a square. i also featured the character relationship chart from this site in an earlier section.

here's a tasteful, minimal, single page design... images and graphics that work well with the white background, love me the fuzzy border effect. シンプル・イズ・ベスト, as they say.

an impressively dense and cohesive graphical showing for how early this site was.

let's slip in something a little more sci-fi along with all the moe-moeslop. something about this design to me just has a nice crisp zing to it.

and now how about one with some over-the-top oriental floral flair. check out the way the characters pop out from behind the bars on the character introduction page...

look at this wild grid layout introducing an extensive cast of characters. all based on a table behind the scenes, of course.

i'd heard of this one before, it's the origin of a well-known denpa song by mosaic.wav (if you watch the video, take a guess at which part youtube says is the most-rewatched). but what is this mythical game no one really played actually about? i read some of the material on the webpage, and turns out it's about... cumming on figurines, one section even ends with "LET'S BUKKAKE!". in retrospect, that's what the song is implied to be about too, with lines like "cover me with your magic~"...