...ymakawebpag?

Sometimes, I play with the web. This is a brief chronicle of my HTML/CSS journey.



The Unknown (April 2003):

This was a series of related sites, so I wanted a uniform layout that could have some variation per site. This was the site I learned includes on, although I hadn't yet gotten away from tables for layouts. It was functional enough, but overall I think it was very boring. As evidenced by the redundant and shoddy coding, I was a bit too reliant on Frontpage at this time.

Sample page - Luna version



Front page - Transdecendant Polygon version (April 2003):

This is actually the second version of the ymakadomain frontpage I made. As you can tell, I like white on black. The graphic is actually a relic of my brief stint into 3D work back in high school (some five years prior or so). It has a very crisp look, but it's image-intensive and not so easy to add to. At this point in time, I had also not yet learned the beauty of relative links and oh god the mouseover code is terrifying. None of those sites are still around except for good ol' Ymakawebpag (well, and possibly the junk page, if Homestead hasn't gone out of business).

The page



Front Page - Feline Oddity version (May 2005):

When I started hosting and rearranging my sites, I decided a change was in order. This was pretty much the last thing I did in a table. While it shows up well in both main browsers, I am a little bummed that the faded image didn't show up properly in Firefox. Nowadays I'm comfortable enough in CSS that I could probably recreate this without the table.

The page



Extreme Dodgeball (November 2005):

I made this for "...dodge!", my Japanese-version info site for Extreme Dodgeball (I had intentions of making an English version page as well, but I lost my original notes and was too lazy to translate them all back, and by that time season 3 had come out and ruined all my well-laid plans anyway.) It turned out very clean and was easy enough to read, while still making use of the ED logo. This was also around when I was experimenting with iframes, to varying degrees of success. I think this might have also been my first attempt at CSS layout design.

Sample page



MoRen Hitsu (May 2006):

This was created as a portfolio during the brief period I had of being a Japanese/English translator. The key word was "professional" - I wanted a clean and easy look, but with a bit of uniqueness, and using images I didn't create was absolutely not allowed. The images were all created in Paint (one of my favorite tools) and the CSS took a while to get working just right, but I'm very pleased with the result.

This layout, currently in use



Within 100 Pixes (July 2006):

The images are from an anime series called Shamanic Princess. I can't remember where I picked up the rounded corner trick from, possibly HTMLDog. (It's a combination of images and CSS, if you're wondering). By this time I was fairly comfortable in CSS. This layout I found to be clean with just the right amount of frills, and of course, it had my white on black (sort of).

This layout, currently in use



Concentus (August 2006):

Designed for a roleplay group that never really got off the ground. The background image was one I found floating around my hard drive, and while I think it was free-use, I can't be sure. This layout is pretty simple, but I did like the combination of colors.

Sample page



Rabid Wolverine (September 2006):

I decided the thing that went most with snark was pink and cute. This took a little doing in CSS and even then it wasn't *exactly* the way I had planned. The images are from a series called Saint Tail.

This layout, currently in use



JanNoWriMo - Lilac version (November 2006):

I remember this one like it was...two or three years ago. Since this was not a personal site, I avoided images that I didn't use. The layout is extremely simplistic--this was the first site where I consciously made an effort to design for more than my own browser (with help from the Nano chat, which had access to said other browsers). It's also very purple. The simplicity makes it easy to manipulate, but at the same time I wish it'd had more frill to it.

Sample page



YmakAwebpag? - Kokoro no Yoru version (February 2007):

After the years and years of the old layout (which had been hijacked from Homestead back when it was still free--THAT'S how old it was), I made an attempt to rid myself of tables once and for all. Going back to an iframe idea for Kokoro no Yoru (my old emo poetry site) that hadn't worked, I managed to get it up and running somehow, mostly through the careful trimming of the images involved. This was also when I learned that IE and Firefox had ever so slight differences on aligning said images. While I did get it to work in both browsers, they still don't render the same page in the same way. While I find it very pretty, as a text-based site the red on red is not highly readable, and the iframes make linking to an individual page pretty much an impossibility, so this was the last thing I did using iframes. The images are from a series called Basara, scanned from an artbook I own of it.

Sample page



JanNoWriMo - Forest version (October 2007):

By this time, JanNo had been up for two years and I was thoroughly sick of purple. Having a bit more confidence in my Paint and Photoshop skills, I managed to give the site that touch more of flair that I had wanted for the first site with just a simple background image. The website button was also kept simple. The big hitch I ran into while making this site was that I was now on a laptop with a wide screen, which rendered the right-aligned page significantly different for me than it did for people with normal screen resolutions. Whoops.

This layout, currently in use



YmakAwebpag? - 10th Anniversary version (January 2009):

When I decided to actually update my personal site with new content, I decided that I needed to fix the two problems of the Kokoro no Yoru layout: readability and iframes. While looking for inspiration, I thought a clean image that could wrap around the corner would work very well, as well as a return to black on white coloring. The image is from the same Basara artbook as the Kokoro no Yoru layout, coincidentally. As you can tell, there was over a year in which I didn't do any major HTML/CSS work, so I was a bit rusty in hammering out the basics at first. Thanks to IE's inconsistancies in how it aligns and displays images (the same problem I had with kokoro no yoru), I ended up using four images in the layout, instead of the two or three I had wanted, but thankfully the images were all much smaller than the kokoro no yoru group. Thanks to my previous work in includes, the site was very easy to port over--the longest part was the design and the new content. This is one of only two sites I've had around long enough to port through a new layout like that.

You're currently looking at this layout



Ymakadomain v4.0: White Fukuoka version (October 2009):

I'd been meaning to replace the last of my table horrors for a while, but had no good ideas. I finally hit on something when I stumbled across this picture from my trip to Japan in 2003; it's the interior of Fukuoka Tower. It took about 20 minutes to code and most of that was spent figuring out how to get the box centered (hint: don't specify an absolute position, genius). I wanted something similar in design to the Feline Oddity and YmakAwebpag 10th aniv, so white and simple was the theme of the day. This actually stole the header and link HTML from the previous version. Hm...there used to be more links there. I should find some to add, but on the other hand it was such a pain getting them to fit on one line....

This layout, currently in use