This is just a collection of miscellaneous site-building trivia and technical information about working on this site if you're a curious sort about useless information like I am.
The long and short of it was that I've built this site to be enjoyable on browsers both old and new. I've tried to keep things simple and very legacy so your old computers with your old versions of Internet Explorer or Firefox will see things just the same as a new browser—perhaps more comfortably, because of the smaller screen!
The other goal of the site was to illustrate as much of it as I can. I'm quite enjoying drawing my stupid little animal people, and I feel like they do a lot to offset the very technical edge of some of the pages I make. Same way going outside is comfortable after a long session playing with computer hardware (try it sometime, nerd).
Markup and editors
This site's markup is valid HTML 4.01 Strict. The CSS is almost CSS Level 1 compliant, with the exception of a few width and border declarations that require CSS Level 2. All the images are GIFs to ensure maximum compatibility, as full PNG support was flaky in mostly Internet Explorer for a time. Also, crunchy, one-bit transparency is a good vibe.
All of my sites are built in Notepad++. cammy_v1 was built largely in Mozilla Composer (with the rest in FrontPage Express), but I hated the markup both of them churned out and I thought the pages came out pretty formless, so I stopped doing that and now handwrite everything. I always enjoy toying with WYSIWYG site editors, but they're really not for anything I intend to maintain.
I target a browser called RetroZilla for all my sites. RetroZilla is an update of the Mozilla Application Suite (you might better know it as its offshoot SeaMonkey) that patches in a newer Gecko rendering engine (Firefox 2.0-ish), making for comfier, slightly more up-to-date browsing on older computers. It runs on just about any version of 32-bit Windows, from Windows 95 on up. I consider it a good compromise between newer standards and older hardware.
That said, this site works perfectly on Internet Explorer 6 or anything newer. It mostly works in IE5, though with some rendering errors. Anything earlier and you'll probably be able to read the text, but things won't look quite right. I'd love to see how it looks on other browsers! Send me screenshots!
Ideal viewing size
I target 800x600. Anything bigger is probably comfier, but I have a specific era in mind with this site and 800x600 is just right for it.
HTTP vs. HTTPS
cammy.somnol is available exclusively over clearnet. The tradeoff in old browser support is not worth whatever peace of mind the especially paranoid might get that someone won't know they're looking at a site starring an anthropomorphic puppy.
This isn't exclusive to cammy.somnol, but I always link to the http:// version of a site, not the https:// version. As someone who explicitly only uses http:// unless login details are being handled (my frustrations with HTTPS being long-documented and also just as someone who likes using old browsers to look at pages), there's two big reasons for this:
- I've had issues with certain old-computer HTTPS proxy services (I seem to recall WebOne) and HTTPS links, mostly because of the old browser's own anxiety. If you link to the http:// version, it all redirects fine and you see your page. If you link to the https:// version, the browser doesn't recognize itself as being capable of handling the link and you go nowhere.
- Even on new browsers, the HTTP version can easily be upgraded to HTTPS, but there's no way to downgrade HTTPS to HTTP. If the HTTPS version exists and is being enforced, great, it redirects fine. If the HTTPS version doesn't exist, you'll see a "site not found" error from DreamHost. I understand this is for security reasons, but Christ it's annoying. Thus, I just link to http:// always and let God sort the end destination on your end out.
You probably didn't even notice until I told you. Also, you're breathing manually now.
As I said, I use GIFs partially to get that really crunchy, sharp transparent border around my art. My workflow for site assets goes as follows:
- Sketch, line, and color in FireAlpaca
- If it's a banner image, I do it at 2x resolution. My maximum dimensions for a header image are 1400x700, thereabouts, so it shrinks to around 700x350 max. Not too tall but not too small for the aforementioned 800x600 viewport. The height is more important than the width.
- If it's a floated illustration, just a Setter or whoever standing around on the side, I usually just line it at whatever size I sketch it at. (I sketch pretty damn small.)
- I use the Pencil (Canvas) brush for all my cammy.somnol asset lining and the normal Pen brush for coloring and shading.
- Export a transparent version as PNG
- Export a non-transparent version, also as PNG, with the background color of whatever site section it's intended to fit into
- This is necessary because GIFs with their one-bit transparency will often have extra pixels along the edges. If the pixels are the same shade as the background color, you won't notice them, but they'll stick out and look really awful and grainy if they aren't.
- Scale the non-transparent version down by half and save it in Paint as a GIF for maximum dither
- The dithering effect on everything is a neat trick I picked up while working on minerteaux. If you save a 24-bit image as a GIF in MS Paint (at least the XP version, which I keep around for this reason), Paint will get confused and dither the hell out of the image regardless of the amount of colors in the image. I'm sure someone thinks it looks hideous, but I love the texture.
- Turn the transparent version into an alpha mask (solid black background, solid white drawing) in Paint.NET
- I use this plugin. It says it might have issues with newer versions of Paint.NET, but I've had no trouble at all.
- Use the alpha mask to carve the image out of the non-transparent version
Or, more visually:
(These are all in PNG, so be mindful of that, old browser nerds)
(Also you might want to click to view some of these full-sized)
Transparent version, lined and exported
Non-transparent version, shrunk but pre-crunched
Non-transparent version, crunched (but not made transparent yet obviously)
Transparent version, made into an alpha mask
Final web graphic
Of course, I can export transparent straight from FireAlpaca, so none of these steps are really necessary. The reason I go through it is because I use Paint to dither all the graphics, and Paint can't save transparency. Therefore, I have to rebuild the transparency after it's been dithered.
The single color aesthetic was half-intentional, half-me being lazy. I've always thought those The Ant and the Aardvark cartoons had a neat look to them, and given that I already have to do a color fill on the drawing, it seemed only fitting to make that fill a pretty matching color and have it be part of the look. I do separate out the islands and the clouds though, since having them be the same color as the lads is kinda weird.