Seth Kinast’s Blog

I was sitting about thinking of ideas for the new blog and website redesign. A few thoughts before I forget them all, forever.

Semantically Reusable Markup

I was installing an early beta of IdioQuote to power my Quote of the Moment script (works great, by the way. Look for it soon!) and I realized that my markup, as written, wasn’t going to play nice. I had something like this:
<div id="qotm">
<div class="blogheadline"><a href="quotemachine.php" title="Quote ID: 41">Quote of the Moment</a></div>
<br />
<div style="padding-left: 10px;">Quote goes here</div><br />
<div class="blogheadline" style="text-align:right;">--Who Said It</div>
</div>
Notice especially:

• The general application of classes, creating redundancy
• Use of “style” for increased specificity
• <br />s present for spacing
• Non-dynamic content, specifically the double dash before Who Said It

Because IdioQuote needs to work in any situation, I used specific IDs for each <div>, allowing me to apply styles to each piece individually. This made my CSS file slightly heavier, but my HTML much more clean:
<div id="idioquote">
<div id="iq_title">Quote of the Moment</div>
<div id="iq_main">
<div id="iq_quote">Quote goes here</div>
<div id="iq_who">Who Said It</div>
</div>
</div>
The stylesheet calls each id to style it, creates margins to substitute for <br />s, and uses the CSS2 :before property to add the dashes… if you’re using a modern browser, that is! Although I’ve disabled this last part until I can work out a bug in IE7.

Similarly, this post uses <h4>s instead of <b>s for each small heading. I can style them in CSS to look the same, but <h4> is a very specific header, whereas <b> gets used everywhere, throughout the site. I could even go a step farther and use <h4 id=”semantic”>, etc.

Whitespace Is Important

Seeing as how the Quote of the Moment is the most structurally sound piece of the blog, let’s examine it. Using slight padding between <div>s allows the eye to focus more cleanly on the content of the box… the quote. This concept extends to an entire site. Rather than stuff as much content into an 800×600 box as I can, and design for the lowest common denominator, I need to take advantage of liquid layout to let you use all that screen space you’ve been blessed with… while degrading gracefully for those with 14-inch monitors. With my 1400×1050 resolution, I find myself having to squint quite a bit on my own blog. Good people, this should not be.

Whitespace is Bad

The first declaration in any CSS file should be

body {
margin: 0;
padding: 0;

‘Nuff said.

Font Originality is a Plus

I’m tired of Times, Arial, and Verdana. Try something a bit fancier… even if you use dynamic text replacement (don’t use Flash text replacement, please!).

Graphics Provide Accentuation

There’s nothing wrong with a fully CSS-based layout. It’s just dull. While dullness might be viewed as a virtue in some lines of work, I hope to keep you awake long enough to actually read some of the writings on my blog, and maybe even poke around the site a bit. CSS lends itself well to blocks, squares, and other hard-cornered, rectangular shapes. With images, I can inject a bit of roundness and softness into my layout.

Nothing Wrong With a Bit of Script-Kiddy Fun

Coding is my strongest point. Given a layout, I can create it quite easily. I enjoy making little PHP scripts to make my blog stand out from every other one out there… scripts such as IdioQuote, IdioPoll, Where’s Seth, Workstation Uptime, etc. Look for all the old favorites to stay, and some more to appear. Stefan is unusually good at this. Even his signature on InvisionFree is dynamic, whether from AudioScrobbler or his WordPress blog. Conversely, conceptualization and design are my weak points. So I look to learn from those who design better than I. I’ve been perusing some of the best-designed weblogs, with a hope to incorporate some of their design into my own. And yes, I promise not to steal any CSS.

—

Maybe someday, this blog might just look a bit cleaner, prettier, and even more inviting. But in the end? It’s just a website… one that not many people care about. So I won’t be killing myself to get it done.

However… I do have to get this bad boy redesigned. In a week. Argggh.