June 06, 2005

Welcome to the new Lair!

It's finally here: the redesigned Lair. Faster. Stronger. Better.

Go ahead, take a look around. The first thing you'll notice is that there's no longer any border around everything; there's an image at the top to let you know where you are (among other things; more on that later), the standard sidebar navigation on the left, and everything in the middle.

The next thing you might notice is the right column. Yes, ads have managed to sneak their way onto evula.com. It sucks, I know, but I'd like to eventually start making less negative money on the site. Right now, I'm going to stick with plain text ads, as they are the least obtrusive, and there's no chance for obnoxious Flash or animated banners. Keep in mind that, no matter what, I will *NOT* have pop-up or pop-under ads; not today, not tomorrow, not ever. Hates them we do.

Something that *is* cool about the Google ads, though, is the fact that they are pseudo-intelligent when it comes to their size; lengthy pages have more ads on them than short pages. I also had to cheat a bit to make the ads "fit" on each page when it comes to the color scheme; it's not perfect, but I don't have a lot of control over it. Trust me, it's much better than the options they had.

The Reviews are the section that have the most dramatic change. Each Review (as well as the Rants and gaming articles) has a Review Information table off to the right of the content. This has everything you could need about the Review itself; the author, the date posted, the rating, purchasing information, etc. I'm pleased as punch about how it's turned out, and I'm planning on using that table for other features down the road; anything else on that will have to be summed up with a .

In addition to the visual change, there's a lot going on under the hood that you might not even notice. For example, it is now a lot easier to get around evula.com, using a nifty little feature called accesskey values. Each of the content headings (Games, Humor, Opinions) is numbered, starting with 1 for Games (if you hover over the link, you'll see what number it is pop up). In Safari, you can activate these by hitting control and the number (ie: Games is control-1). To get to the top of whatever section you're at, you can always hit control-9. Hit control-0 to get to the Lair's front page.

Also filed in the "happening under the hood" folder is the fact that the Lair now uses 100% valid XHTML and CSS. If you have serious trust issues, there are links at the bottom of the left navigation area that will validate wherever you are. The nice thing about the valid code is that it lets me shrink the markup significantly, letting pages download faster. I also structured the Lair a lot better so that search engines can get what they need quickly and easily.

The Contact Info page also got a major overhaul; now everything is run off of a single PHP include. When I mean everything, I also mean the Rants and Reviews; if I change a person's information in that one file, it changes everywhere. This is quite an improvement over the old system, and more importantly, it makes life easier for me. :)

From here on out, I'm going to start getting a lot better about date-stamping everything that goes up on the Lair. As a result, all of the Rants and Reviews have a "date added" value in their Information tables. This will be true for the jokes, as well.

I sort of went hog wild with adding meta and link tags; a quick peek at the source code will show what I mean. Some of the stuff may not even matter, but at the same time, the vast majority of it is generated automatically by whatever page you access, so it doesn't matter! :)

Some of the stuff that is new today is just your average, run-of-the-mill new content. For starters, there are three new Reviews (Hitchhiker's Guide, Republic Commando, and UT2k4) and one new Rant (George Lucas Rant). The bulk of the new content, however, is in the Quote Archive; it went from 288 quotes to 600, more than doubling the content there. Hot damn. :)

Now, it isn't perfect. For starters, I couldn't get the damn random text script that powers the Store Spotlight section to work in the two minutes I had, so right now it's just showcasing a single product (what pisses me off about that is I went ahead with all the trouble of recreating the fifty images that are swapped out). Same with the Random Quote feature that I used to have on the front page, although that is also a style sheet issue as well.

One of the things I had hoped to have finished was a varying ICRA rating meta tag that changed depending on what page you are on. It doesn't matter very much for most pages, but it would have come into play on stuff like the Rants (which is why there is a rating for each) and, later down the road, the jokes in the Joke Archive. Oh well, one of the things I learned from my failure with getting it working will come in handy when I redo it; I just didn't have time to take care of it for today.

Something else that people may notice: there are plenty of references to the Forums, in the form of links to the Update Log (on the front page) and prominent "discuss this whatever" links for Rants and Reviews, even though the Forums have been dead for half a year. They are still there because, eventually, the Forums will be recreated and I didn't want to disassemble parts of the layout just to put it back together down the road.

I'll have another update in a couple of weeks, where I'll be fixing some of the smaller, nagging issues, as well as adding any more new content that comes my way. I'll also be updating sections as I convert them.

If you see any issues (broken links, funky formatting, whatever), be sure to let me know (either reply here, or email me, or catch me on iChat) so that I can get it taken care of. Likewise, If you have any suggestions, run it by me; I might like it, or I might already have something in mind, but it never hurts to try.

Posted by Eric at June 6, 2005 11:47 PM
Comments

And now the "Classic" layout's sidebar has the same features as the rest of the site (meaning that control 1-7 works, as does control-0; control-9 does not, since it's controlled in the header).

Posted by: EVula at June 7, 2005 12:40 AM

It looksa very niiice.
Awesome job, dude.

Posted by: Kelly at June 7, 2005 01:33 AM

Hawt damn, you rock Eric! Wooooo!

Posted by: Moo at June 7, 2005 02:13 PM

Aahhh that's awesome (especially the valid mark-up). It looks like you've still got some tinkering to do, though; there are a few bugs with the page under IE.

And as a sidenote, in Firefox and IE (and probably more), accesskeys are reached through ALT + the number. You know... in case you care. :P

Posted by: Josh at June 7, 2005 03:11 PM

Yeah, I know that the layout is wonky in IE; I never got around to caring enough to use the box model hack for my CSS. The Store Spotlight box also goes to the left in IE; I'm not entirely sure why (well, other than the fact that I told it to), but I didn't bother trying to fix it because I'm going to, more than likely, redo it so that the Rants & Reviews are horizontal instead of vertical.

Any other IE bugs? I might as well squish 'em all.

That is good to know about the accesskeys, though. Thanks.

Posted by: EVula at June 7, 2005 03:36 PM

Um, I can't get to das Quotearchive from the side nav bar

Posted by: Moo at June 7, 2005 04:51 PM

I get your 404 error page when I try.

Posted by: Moo at June 7, 2005 04:52 PM

@EVula: Ironically, the store spotlight box looks fine to me in IE. Other bits and pieces, however, are positioned and spaced rather oddly. Here's a screenshot of what I mean (it's sort of hazy, but it gets the idea across): http://evula.org/theasylum/screenshot.jpg

Additionally, the transparency on the banners all crap out and result in a giant white block where the transparent parts should be (refer to the screenshot above to see what I mean). Here's an article that I'm too lazy to read but looks like it should solve your problem: http://alistapart.com/articles/pngopacity/

Hope all that helped.

Posted by: Josh at June 7, 2005 06:48 PM

... By the way, it seems you broke something, Eric. The stylesheet no longer validates (although it does get really close).

Posted by: Josh at June 7, 2005 06:53 PM

O_o Holy Shi-ite... this looks awesome... but i get the update column when the page loads... and it all looks fine (see 2 posts up by josh) but wow... i have exploring to do :-)

Posted by: edg2000 at June 7, 2005 09:01 PM

Well, I guess I'll be the first to say that I preferred the old style and layout to the new one. I know how much work you put into it, and I think you did a very good job, but the old site was just a little more my thing.

Posted by: Steelix at June 8, 2005 02:55 AM

Neat. :-D

Posted by: Luke at June 8, 2005 09:04 AM

Moo: Shit, apparently the /quotes/ directory didn't get uploaded. I had to delete the old directories to upload the new content, and I obviously missed that one... thankfully I had a copy online in my dev subdomain. Try it now. :)

Josh (re: spacing): Well, there's a ton of text that is missing there... I had a small (though correctly closed) invisible tag that was up there, and I just removed it. Try it now. No idea what the problem on the sidebar is, though... *sigh*

Josh (re: PNGs): Grrr, that sucks. I think I'll just make them JPGs, since none of the examples on the ALA (which rocks) will work for me; all of the header images are determined by a single file: http://www.evula.com/includes/lair_article_types.inc (you'll have to view the source to see it properly)

Josh (re: CSS): Thanks, it was just the style sheet on that one page, and it was just a missing ";". Fixed.

edg2000: update column? Eh?

Steelix: Hmm, well, I guess I can't please everyone. :) However, one of the benefits to the redesign is that, through the wonders of CSS, I can change the layout at the drop of a hat (check out CSSZenGarden.com). One of the things I hope to do in a year or so is have multiple layouts for people to choose from; the Classic layout (though slightly tweaked) may make an appearance on evula.com again. :)

--

Thank you to everyone who has posted problems and feedback. I'm gonna gather up a list of things that I want to do in the next few years with the site, just to maybe give you a few sneak peeks at what is coming around the corner... (though not everything, of course!)

If you want, here's the actual layout for evula.com: http://www.evula.com/includes/layout.inc (again, view the source to actually see it)

Posted by: EVula at June 8, 2005 01:33 PM

the bar on the top of the homepage with site update information... (see josh's first picture link)

Posted by: edg2000 at June 8, 2005 04:53 PM

edg2000: okay, I think I fixed that problem. Is it still there?

Posted by: EVula at June 9, 2005 04:24 PM

shows up fine

Posted by: edg2000 at June 10, 2005 01:35 PM

I look forward to possibly seeing a classic layout at some point :)

Posted by: Steelix at June 11, 2005 11:15 PM

Sweet! Awesome job EVula. It looks like all your hard work is much appreciated. :P

Posted by: Hamster at June 12, 2005 01:55 AM

Steelix: Keep in mind that it isn't a very high priority (converting everything over to the new layout is), but once everything is converted, I'll be able to implement additional layouts fairly quickly and easily. Oddly enough, it goes hand-in-hand with another über-cool feature that I've got in mind for the Lair (that will blow everyone away, without a doubt).

Hamster: yeah, the warm reception goes a long way towards validating all the hours I've spent on the site so far. :)

In a completely unrelated note, I can honestly say that the best is yet to come. Oh yes, it is going to get so much better... mwuhahah.

Posted by: EVula at June 12, 2005 10:16 AM

It looks quite nice, but it doesnt seem quite as snappy as I remember it being...

Posted by: GFono at June 14, 2005 02:38 PM

What do you mean by "snappy"?

Posted by: EVula at June 15, 2005 11:08 AM