One of my readers to the rescue! A British reader named Timothy, in fact, who recently decided to send me a US$150 donation via American Express giftcard (that is, it's a gift certificate that works just like a credit card), simply to thank me for all the work I've been doing recently on the journal. Well, thank you, Timothy! This is good news for all of you as well, because I was able to buy a ten-hour pass at my local internet cafe using some of the giftcard money, and will be able to continue posting the updates to the new journal design that I am so busily crafting here at home. (For the few of you who don't already know, I cannot afford an internet connection for my home computer, and of course don't have a day job where I can do this stuff at the office while the boss isn't looking. Of course, I do have a palmOne Treo with internet access, which is why I'm working so hard right now on getting the new MovableType-powered journal templates finished - once they're done, I'll be able to post new entries straight from my Treo, and won't have to worry anymore about going to an internet cafe and paying money every time I want to update my blog. If this is all new to you, you probably also haven't seen the two other entries I've now posted concerning this new design scheme and how it's being put together - you can click here and here to read them now.)

I have so many updates to report, in fact, that I'm not sure where to even start. Well, I guess it's best to start with this explanation: that I am creating a series of "versions" of my website, all of them delivering the same journal pages but each optimized for a different type of device. There is a version for viewing on your desktop or laptop, for example, one for loading on your mobile device, one for sending to a laserprinter, a summary-only version that you can have delivered via email or SMS, even a version for subscribing to in your RSS reader. (There's also a version for displaying archived information, which will eventually look like the desktop template but I know looks like crap now - sorry, it will be fixed soon.) Each of these versions, then, have not only the index page with that day's entry, but a series of supplemental pages as well; the desktop and mobile versions, for example, have second pages where you subscribe and unsubscribe from the email/SMS list, and the print version has a second page of CSS specifications, and there's even a supplemental page to the RSS version where you can subscribe to the entire 2,000-word entry if you want. When I declare one or more of these pages "frozen," then, it means that it's looking perfect, has been successfully tested on the device in question, and requires no more changes. When each page of each version, then, has finally been declared frozen, it'll be time to move all 30 templates or whatever from the "blog" folder where they currently reside, to the main root of my entire website (jasonpettus.com/index.html, that is), at which point it will be declared "official" and my Geocities site finally shut down. So, maybe it'd be easiest to just go through one version at a time and give you the updated status on each:

RSS version: Frozen. There are two RSS feeds now emanating from this site: the default one (linked to at the beginning of this sentence; this is also the one designated through auto-detection), which sends a 25-word summary of that day's entry, and a second one that delivers the entire 2,000-word entry, for anyone who would rather read the journal that way. For those who are curious, the summaries are not simply the first 25 words of the entry, but rather an actual summary of that entry that I manually write in addition to the entry itself; the program I use to post entries from my Treo (U*Blog, that is) lets me send this summary at the same time I send in my entry, as well as my keywords and categories. Pretty nice. By the way, when the RSS feeds move to their new address later this summer, it won't affect your subscription in any way, so feel free to go ahead and sign up now and get it out of the way. In fact, I highly encourage those readers who have not yet done so to start getting into the habit of using an RSS reader, so that these damn websites will start doing a little of the work for you, and inform you when they're updated instead of you maddeningly stopping by the site four times a day yourself, frantically asking, "Did Pettus update his damn journal yet? Did Pettus update his damn journal yet?" The one I use is free and web-based, and is called Bloglines; it's got an intuitive structure, is quite customizable, generates a public page so you can share your feed list, has a truly killer mobile version, and did I mention that it's free?

Print version: Frozen. That's understandable; with it being black and white, and with no sidebar items at all, it was a breeze to program this template. The secret is in your CSS specification at the top of your page; instead of it saying something like:

...in this case you add a "media" attribute as well:

Most browsers, then, will automatically add certain optimizations to that page for you, knowing beforehand that it's specifically for sending to a printer. Then it's just mostly a matter of coming up with a smart design for the template itself. Does someone reading your blog on a paper page need active links to your archives, or other sections of your site, or for adding their email address to your mailing list? Of course not - they can poke that link with their finger as much as they want, but that piece of paper ain't changing into another page anytime soon. All a print version really needs is the date stamp, title, entry, a copyright notice, your contact info, and a notice of what website that printout comes from, all laid out neatly on the page so that it gets sent to a printer with a minimum of fuss. Anyway, print out a couple of pages of that template when your boss isn't looking, and you'll see what I mean.

Email/SMS version: The pages where you sign up are now working; one for those on desktops (linked to at the beginning of this sentence), and one for people on mobile devices. And I can manually sign people up to the list at this moment, from my MovableType control panel, and when I send out a notification it gets delivered elegantly. (I can also confirm that the SMS runaround for sending to your cellphone works as well.) But you can't actually sign up for the list yet, because I need to get into my "cgi-bin/mt/mt.cgi" file and manually reset some configuration figures, and I'm having some problems getting into my "mt" folder right now. (Jimi, any news on my password problem yet?) Everything else but this configuration tweak is working now, though, and will soon be ready to be frozen.

Desktop version: Lots of changes. In the main site menu (the black bar at the top of the page), I flushed out the padding of the hyperlinked background colors, so that it looks like full tabs now when you hover over them. This is in preparation for adding dropdown menus to these options, which will be a nice little perk for desktop users; hovering over "books," for example, will instantly generate a little side menu onscreen with options like "travel," "poetry," "erotica" and others, and clicking on them will take you to that specific section of the GAD pages (once the GAD pages are revamped, that is - but one project at a time, I suppose). Don't worry, mobile-device owners! Because the entire thing's being accomplished in CSS, those browsers who can't generate dynamic elements will still get the main menu you currently see, and you'll still eventually be able to get to the different subcategories the old-fashioned way (one page click at a time). Lest you need reminding, I'm one of those religiously fervant usability nutjobs, and emphatically believe that a clean, basic version of your website should be your top priority, with bells and whistles only being added after your site can first successfully load in every device out there. So, no dropdowns for desktops unless it doesn't affect the ability of other devices to navigate the site as well.

More cosmetic changes: Pushed the line spacing a little closer, for personal preference; subtly adjusted the padding and other cosmetic details of many of the classes; adjusted the way the sidebar and entry areas interact in CSS, so that their top margins align more closely; renamed my subcategories to better reflect that they're subcategories, and tweaked the display code for the category list as well; added direct link buttons for my RSS feed, for such popular services as MyYahoo, MyMSN, del.icio.us and others. (NOTE that these buttons will not be live until the "official" release.)

Also, I finally have worked out the correct way to define my CSS in order to get my main entry to have an indented right side on desktops, while displaying no indent when loaded up on a mobile device. Remember, this is a big concern all of a sudden for me, because I found out that mobile users are going to be sent to the desktop version whenever they call up an older entry; right now it's almost looking perfect, but keeps including the giant right-hand indent you desktop viewers are seeing as well, which on a phone's screen leads to 100, 150 pages you have to scroll through to read it all.

The secret, I think, is to define your entry's borders not with the { margin: } attribute, which mobile browsers also pick up on, but rather the { padding: } attribute, which most mobile browsers ignore when displaying web pages. That way the desktop user is still seeing what they saw before, which is a main entry with closely-defined left and right margins; but when a mobile reader opens the page, their browser ignores the "padding" attribute and simply displays the text from the extreme left edge of the phone's screen to the extreme right edge. And this cuts the pageviews down to 30 or 40, a much more managable number. I had gotten all this right yesterday as well, but missed a crucial detail: the padding needs to be set in the actual layout portion of your specification (I use all IDs, for example, to define my layout areas), not in the content portion like I had done (where I had set the padding in my "blogbody" class, which defines the black medium-sized text you're reading right this second). Now that my layout ID has a right-side padding of 10 percent, and not merely the text within that ID, I think the effect I'm striving for is finally going to work. We'll see, anyway.