Note: today's entry applies to the site home page (not this blog entry page).
Notice anything different? The old/previous design was based on pre-XHTML standards mark-up .. which I had *converted* to XHTML-valid (using Dreamweaver). But the guts still contained a table-based layout (kludge).
The layout of this page however, is not based on tables (rather » on CSS). My new CSS page (if you're interested) is aqui » radified_xhtml2.css.
Been meaning to start over from scratch and layout this page based on CSS .. ever since I started upgrading my web design skills.
Now that the site is busy enough to require a VPS, I figure we probably oughta have a homepage laid-out with CSS. (Modern.)
So I finally just put my head down and went for it. Spur-of-the-moment decision. More involved than I expected. A million little details required attention .. in order to massage current content (you see here) into the new layout. And once I start a project like this, I don't like to stop until it's done. (Worked 'til 1AM.)
This CSS-based layout will let me tweak the design more easily as my CSS skills (continue to) develop.
I chose that bluish-green color (sidebars) cuz I was searching for a link-color that doesn't distract from reading this normal gray text.
The old light-blue links I was using before were so bright (on a black background) they jumped out .. which I found distracting, since I tend to use copious linkage. (Design should complement content .. not overpower it, right?) But sometimes we don't notice things, until we're looking for them. My design-aim was/is to present a content-focused website.
••• today's entry continues below •••
Once I determined the link-color, I used it to fill in the sidebars .. where it would "play-off" and highlight the links. Doubt you'll find many sites using this color scheme. (Rad original.) I like its simplicity » black, white & blue, with a splash of yellow for the tri-blade radiation symbols that begin each post.
But this change is more about layout (converting to CSS-based) than design. As you can see, I endeavored to keep the page design basically the same, so the change wouldn't be too shocking. I read a marketing study that claimed people tend to reject things that change more than 10% .. even when that change represents an improvement. In other words, incremental changes are tolerated best.
This redesign is a big deal. It's the first time I've redesigned the homepage since .. well, I can't remember the last time. It was shortly after I switched over and started using Dreamweaver (after abandoning Frontpage). I prefer designs that are understated .. and dark (easy on the eyes).
If you are reading this entry in the blog (you are, now), which is weird, cuz this entry is talking about another page, I should note that styling the blog is more complicated than styling a regualr webpage, which is why this blog is NOT dark. But I will eventually learn.
The buttons in both sidebars were created using pure CSS mojo. Nice, subtle roll-over effect. Looks like a light comes on.
I also added the dotted-underline (bottom-border) to the links in the center section .. since lack of an underline is considered bad for accessibility (colorblind people can't distinguish non-underlined links). I like the way these links aren't so jarring. (Subtle, yet clearly links.)
Hopefully, the new design doesn't make you wanna heave. The coloring is admittedly unconventional. I'll probably continue to refine things (like adding rounded corners) as my skills develop. The foundation mark-up/code for this page actually came from the new VPS guide I've been working on. (Notice the similarities?)
Confidence in my ability to wield CSS has grown considerably. I'm no wizard, but comfortable working the mojo. No longer does it seem like a black art. Sometimes I'm surprised when it actually works. =)
Been waiting for the right time to do this. And now seemed like the right time. (Kinda surprised myself when I went for it so late in the day.) I have a vague feel for the design I want .. but nothing concete. Ideas come incrementally .. based on each change I make .. so everything tends to work together.
It's actually easier for me to see what doesn't work .. like the color of that rollover link in the center section. Okay, I changed it. That works better .. slightly brighter on rollover .. same color .. similar effect as he sidebar buttons. I also removed the underline upon rollover. (That was bugging me.)
Overall, I'm pleased with it. And I especially like that it doesn't look like any other site. If nothing else, I've always strove to provide unique content. Design should be no different. In the future, I'd like to move toward a "cleaner" homepage design.
For more along these lines, here's a Google search preconfigured for the query » tableless css layout xhtml standards
