Style Notes: Live

I feel like a broken record stating this, but I still don't consider myself a graphic designer. My creations often come from direct inspiration, from whatever I might see in my day to day passings that strikes me aesthetically. Live was inspired by the cover art for a Judy Garland album recorded live at Carnegie Hall that I discovered while browsing through some CDs at a record store. First, the orange pulled my focus toward it. It was very striking, shouting commands at me consisting of one name. Attention was to be payed to this particular album.

Then upon further inspection, I found something that for all the noise it created was lacking in frills and assorted gags to spruce up the twenty five square inches of real estate. It delivered its message directly, and would wait for the content to do the rest. It grabbed your attention. But it was up to the artist to deliver the promise that the cover had stated so boldly.

I wanted to start off the new and ultimate squarehappy with a similar proclamation. The design is not making a statement of substance. It's more like one of those orange jackets construction workers wear so people can see them better. Except this particular jacket is exceptionally well tailored and has a stylish sensibility that suggests it's suited for work or play. The goal of Live is that of useful novelty. A toy at first, a tool always.

Better Living Through Function Over Form

Let's not wax philosophical on design because I'm not into that sort of thing. I'm into making something that other people can use without having to read my mind and at the same time challenge myself and the modern web browsers in pushing CSS to its sustainable limits. Every layout I create for squarehappy is a learning experience for myself. This is dangerous in that I may add features that aren't necessary but expand my CSS knowledge in some way. There are many considerations such as browser compatibility, accessibility, and bandwidth, but ultimately anything goes as long as it doesn't get in the way.

I wanted to bring the content up as closet to the top of the viewport as possible with this style. The navigation was not to be the focus, but was to exist in direct contrast so they can be easily differentiated. They are more or less inverted variations of eachother. This leads me into color pallette. In my personal opinion I can pick a good three color combination to work with. But going beyond that I'm not so great at. I take those three colors and just build everything from there. Every time I allow another color to mingle with the triumvirate it just feels out of place. I plan to cope with this by planning and if necessary halt all production until an adequate pallette featuring four colors or upwards is produced when beginning the next design, or at least begin with a grayscale design instead of painting myself into a tricolored corner.

But I dealt with the cards... that I dealt... to myself. I overcame my fear of the number four and introduced a second orange, cherry picked to appear to be a semi-transparent version of the solid orange overlaying the dark gray background. But let's break it down, piece by piece, how each element interacts with eachother and why, thanks to a little file called live.css If you want to read on, be weary of these facts three:

• This article will delve into realistic CSS development situations that may be too droll for young children. I will show you how various problems were solved and creative vision was sometimes compromised in creating the stylesheet. I will try to make it a light, entertaining read. Viewer discretion is advised.
• You may want to follow along with the CSS file and maybe even the HTML.
• This could get long.

Live Structure and Style

The div#header image was going to be to the left of div#menubar, and the div#subheader was not needed in this particular style for visual purposes. Rather than float the header and deal with floating every other major content box under and around it, I took its position in the document flow quite literally and just pasted it in the upper left corner, absolutely. I upped the z-index and allowed everything to just flow under it as though it was on another plane of existence.

Next up was the #menubar. An important element of the layout, containing links to each of the major sections, I decided to give it the safety orange treatment. Everything on the site can flow from the #menubar, so if there was any place to draw attention to, that was it. You'll notice the unordered list floated to the right of the #menubar, which caused float-clearing bugs to rear their ugly head. The div refused to clear the list. Me not being one to add presentational markup, I was going to suffer this hiccup with some fixed height on the menu bar. But while writing these notes I recalled a technique I had read in Douglas Bowman's design of the Adaptive Path website, specifically relatively positioning an element so one can absolutely position an element within that element.

I gave #menubar a 1.7em height. #menubar ul is absolutely positioned inside to the right, with top and bottom margins of 0.2em. These numbers don't really matter to me. It was trial and error, and as luck would have it not a lot of error. The point is that you can resize the text to a reasonable degree and the list should stay smack in the middle of the menu bar.

Each list item is displayed inline and padded 5% to the left so that each text link is evenly spaced, rather than allotting each list item a certain amount of space, which creates evenly spaced list items at the expense of even spacing between the links within. There is a host of stuff going on in regards to the style hover menu found on the menu bar, but I suggest that you delve into the CSS as explanations aren't suitable. Warning: the .over class exists only for Javascript to hook into it so Internet Explorer can support the CSS popup. See dropdown.js.

I admit to a complete lack of design on the style menu. I made the mistake of trying to design it as I was initially marking up the site, and eventually I got so frustrated just trying to make the menu work that I exhausted any creative interest I had in that god-forsaken unordered list. Plus I just haven't thought of anything interesting yet. Help me out here.

Now begins the dynamic content, contained in a content-less div known as #outer, an element existing only for the styling possibilities, one such being able to repeat-x a menu background the length of any content which may flow next to it, regardless of the menu's length. That's right, faking a table design. #outer contains two child elements, #sidebar and #main. The navigational sidebar is defined by the element #sidebar. It was naughty to name an element something that indicates its presentation, but this will predominantly be the case. It won't always be the case. I floated it to the left because absolute positioning is for sissies (don't bother pointing out my hypocrisy), and it gave it a 171px top margin to clear the absolutely positioned header image. This clearing seems very inconsistent however, from browser to browser, page to page even. It seems to be a float problem with a dash of some other elements, so occasionally the search input form will be somewhat covered up by the header. I don't think the search form warrants its own header as there isn't much question to as what it is at first glance, so I display:none'd it. Probably always will.

The sidebar headers use the Fette Engschrift font face, the official font face of squarehappy. I didn't create it, I'm just a fan. You will see it frequently in future designs. Each sidebar header has a unique #id, but they're all styled under one declaration to save load time. They require separate declarations only to assign a different background image. The biggest pain, possibly in all of Live's development, was lining up those gosh danged bullet points in each browser. None of them could agree on where to put the lil' 3x3 list-style-images. I'm still battling the horizontal and vertical alignment of the dots and may resort to CSS filters for each browser if it comes to that. For now I'm selfish and using what looks best in Firefox. That's probably against the web designer's oath, if there was one. For the main content area of Live, I focused on colors that provide high contrast and readability. You might say function takes on a much greater degree of importance than form for me compared to your average web designer. That isn't to say you'll never see low contrast for the sake of some artistic vision, but the initial squarehappy design had to be the benchmark of my intrinsic views and goals for web design.

The hierarchy of the content is defined with indentation. I'm a big fan of white space as a user to define barriers between different areas of a content, so I gave the content some hefty gutters on each side. The H1 headers house the permanent link to their respective pages and are indicated as the main header of the page by receiving the smallest left margin. The H3 subheaders are spaced in between the H1 and article content. KISS.

I'm not entirely sold on the design for the H1 headers. I think they're a bit ahead of the time period I'm aiming for, but I still like the appearrance of the header text being cut out the block behind it, revealing the dark gray background. I don't recall having seen that done before. It won't hug the baseline if you increase the text size, something I struggled with for awhile. The solution is to set the H1 container as position: relative; and absolutely position the anchor text at the bottom of the H1 box, but the header would unavoidably interfere with the style menu hover. The other thing bugigng me about the H1 headers is they rely on the text to be a link, but I haven't thought of any reason for it not to be, so the CSS stays.

Jumping all the way to the end, I want to touch on the #footer. It was quite a "Eureka!" moment when I realized I could align the stereo image to the bottom of the sidebar by putting it in the footer. In this instance, I used the image to pad itself into the center of the sidebar. I don't know if this is out of laziness or a compulsion to maintain a browser compatibility that is only a figment of my imagination. While I try to employ some "advanced" CSS that is only visible in certain browsers in each style, I always opt for the simplest solution if i don't have to compromise my "vision", even if that means forgoing the more logical use and minor bandwidth savings of CSS positioning. Note the self-deprecating use of quotation marks if you would be so kind. I don't want to sound any more grandiose than a protozoa.

I could go on about certain pages and the CSS that's unique to them, but I don't consider any of it very interesting and this has run on pretty long already. Much of the design was completed before different pages on the site were even fleshed out to begin with. I was unable and uninterested in returning to the creative flow with this design. There were some decent efforts to the portfolio and comment formatting, but at the end I was more than ready to wrap things up and get the design out the door. I'm more concerned with the CSS at this juncture and design updates can always come later. Apologies for the long read. Hoping you got something useful out of it. If not, you got what you payed for.