First Post!
posted in blog, css, faux-columns, script, wordpress by Richard Glover on Thu Jan 26, 06:05 AMI’ve always wanted to say that; but I’ve never been fast enough on Slashdot to do so (not even one that ends up being tenth post). Furthermore, I’m a latecomer in the blog phenomenon. Little did I know, I could fill a hole in my soul and repertoir by simply creating this page.
Wherefore To Blog?
Several days ago, my business partner and I decided that any self respecting web design company needs a blog. We respect ourselves very much, so here it is. The intent is to provide a space for us to discuss our business, expose failures, share solutions, promote peers, and maybe somewhere along the way prove that we are worth your time whether you are a friend, designer, or client.
So, I will attempt in this first post to do all of the above. I am nothing if not ambitious (when it comes to web design). The exposure of failures (and subsequent solutions) will feature prominently. I’ll try to work some business sense in around the end.
Design By Dummies
The original design for this blog was relatively simple. In fact, the drop-shadow was the only thing all that ambitious…and drop shadows are so last century. I was bored with the proliferation of huge monotone headers that the popularity of Kubrick for Wordpress has brought about. I’m extremely happy for those that at least customize that header, but I wanted something totally different. I fell back on a small navigation bar and the old, faithful drop shadow. Clearly, there is a large swath of header back there, but that is primarily to fully incorporate the business site’s colors.
When the time came to translate it into code, two problems arose:
1. we’ve used Textpattern only for its intended purpose (content management), not for blogging;
2. high on what I thought was a good design, I forgot to strategize.
Being the good partner that I am, I left it to Eric to take care of the first issue (which he may post about soon). The second issue was all my own.
Faux Pas
Implementation issues are not a big deal in (roughly) standards compliant browsers. You tinker with some CSS and your done. At the end of the day, it is all perfectly logical, so it is just a matter of thinking about it. Unfortunately, our entire industry is held hostage by the tyrranical rule of Internet Explorer. Before I code any page, I mentally prepare myself to see the ways that IE will mangle my well formed pages. This time, I quickly found in all browsers I was going to have trouble both centering and making divs fill their containing space. Specifically, I needed the drop shadows on the left and right to tile vertically to cover sides of the variable-height content.
The best solution to this problem would be something like the optical illusion that is faux columns. The unfortunate downfall to this approach, readily apparent in my original attempt at the blog, was that the design wouldn’t allow clean implementation of the technique. The background for the content (gradient and foot) was not designed to span the entire height of the page, but the shadows on its sides were. To achieve this design, there would be a background image of the shadows with a white center and the gradient-and-foot image would be laid over that. The shadow background would be centered via the background-position property, but the content (and its background) would have to be centered via margins. This led to a 1 pixel jog (particularly in IE) when the browser decides what “center” actually means for those different contexts on an odd pixel-width page. The problem is documented over at Position is Everything (a great resource).
Mind you, this wasn’t anything addressable via liquid faux columns (to which several tutorials have been devoted). because I wasn’t willing to make the background image several thousand pixels high (and so several more kilobytes large). This was still a static faux-column problem. The 750px faux-column background (shadows) would sometimes be 1 pixel off from the 700px content and image (gradient and foot). It primarily showed up in IE, and it was nothing spectacularly wrong; but it wasn’t good enough for me.
So I ditched the faux columns, thinking I could fix it with an IE specific stylesheet. I was doing one anyway for other design elements, so why not just extend its scope? Notice there was no use of the word hack (except in the title of the added stylesheet). I’ve read and taken to heart the call to action and have abandoned the hacks. Conditional comments here we come. There is no style to fix the centering jog, so I’d have to seperate the left and right shadows and tile them seperately. Except now the shadows (50px high) weren’t tall enough to cover the sides of the content.
Scripted Response
In the end, I had to settle for a hack of a different kind: javascripting. All that needed to be done was to read the height of the content (after the page rendered) and set the height of the shadows to match. The Standardistas would tell you that (X)HTML is for markup, CSS is for presentation, and Javascript is for behavior (and they would be right). This script would be used for presentation, which is just plain evil/wrong/lazy. Still, sometimes it is better to do some unobtrusive scripting than to redesign from the ground up.
Of course, lying in wait in this can of worms was my lack of experience. I thought I understood getElementById (hint: don’t capitalize the “D”), offsetHeight (hint, it returns a raw number), and element.style.height (hint, add a ” + ‘px’” to your new setting). I was clearly wrong. I butchered the page adding all kinds of alerts to read and returning sizes of various elements and value attributes. But after an hour of tinkering, scratching my head, pulling my hair, and excessive use of expletives, you have what you are looking at now: a thing of beauty to be beheld in any modern browser (we hope).
On Being a Simpleton
The business tip I promised for the end? As my partner keeps telling me “simplicity is the essence of design”. The drop shadow wasn’t that important. The gradient and foot weren’t that important. With a slight redesign, I could have saved hours of coding.
I love it when he’s right, but only when it isn’t at my expense.
link, 
Blink, 
digg, 
tag, 
tag, 
Spurl, 
Furl, 
redd, 
vine, or check the
Cosmos!
5 Comments for “First Post!” add yours!
Beautiful work young skywalker. Maybe you should move the test comments to one of the lipsum posts.
Editors Note: True. It is more likely that I should update First Post to include all the hacking done to make the comments work or make a new post...and maybe I will. It is the opinion of this half of the staff that Eric should probably focus on the things he still has to do...including make some posts to this blog.
This is what an odd post looks like.