etherfarm

All this fuss over some measly boxes

Later

10:00 on Thursday, March 17, 2005 • 10 responses

Earlier

Before I publish the followup to my last entry, I think it’s a good time to divulge some of the motivations and machinations behind this design, both for posterity’s sake and for the benefit of all the fine folk coming from Stylegala. There’s no way I’ll be able to do this in one article, so I’ll take a stab at regularly publishing etherfarm production and ExpressionEngine information on Thursdays. This kind of weekly series will allow me to consolidate EE-related punditry and code geekery to one day a week, so the non-technical readers don’t feel alienated. This week I’ll tackle layout.

Update 3/29/05: I’ve been ridiculously swamped with work for the last week and a half. Be back soon.

Soaked

There are good reasons why many web designers have moved away from liquid layouts—they’re much less straightforward to pull off with CSS than they are with tables, and tables are so 2003. Cross-browser issues (synonymous with “IE sucks ass issues”) plague liquid layouts and the hacks required to get things in order accumulate pretty quickly. On top of the technical issues, many designers simply don’t like liquid layouts.

I’m the opposite—I don’t particularly care for fixed-width layouts, despite the fact that when I saw my first web page in NCSA Mosaic back in 1995 or 1996, it scared the hell out of me. I cut my design teeth in print, and compared to the typographic and positional control a print designer had, designing for early browsers and HTML specs was basically a rather futile exercise in corralling entropy (and most people, myself included, unfortunately tried to get around this by designing entire pages as graphics).

I’ve since grown to love liquid layouts, thinking them the best use of text on the web. Fixed-width designs certainly have their place, but quite frankly if I wanted to work in a fixed-width medium, I’d move back to print. I don’t have the readability issues with line length which many designers seem to use as arguments against flexible-width designs (remember, I’ve more or less been a professional bookworm for more than 5 years now). I think the “readability” issues are at heart just “scanability” issues, and I guess I’m old-school in that I actually read.

etherfarm v4 is the “most” liquid etherfarm has ever been, in that all column widths are determined by percentages. The site forces scrollbars at less than 780px wide using min-width for most browsers and a hidden, fixed-width <hr> hack to assist IE into the 21st century. Furthermore, etherfarm more or less holds together with browser text-zoom one or two sizes in either direction from the default, and that’s good enough for me.

I developed v4.0 using a combination of Safari, Firefox, and OmniWeb. I really wasn’t looking forward to seeing how badly IE6 would mess up the site, and more or less committed to ignoring IE altogether if too much work was involved in massaging the CSS to be IE-friendly. Much to my surprise, there were almost no positioning errors in IE6 (though there were a bunch of style errors). I attribute e4’s almost-instant IE compatibility to a decision I made early on to try and avoid floats as much as possible (whenever I have to hack CSS for IE, it almost always has to do with strange float-related bugs).

The biggest challenge regarding v4.0’s liquid layout was getting the center column to expand when registered viewers opt to see larger images on Oculus archive pages. There are three image widths for Oculus images—400px (what everyone sees and what’s displayed on the Oculus index page), 520px, and 640px; the larger image sizes are available to those who register, mostly so that I don’t throw bandwidth out the window to people just breezing by. Getting the center column to grow with the member profile setting solved with some PHP and some EE finessing—something I’ll detail in a future article.

Ionic, Doric, Corinthian

One thing I really wanted to do with this design was make the columns more useful. Due to the way that most columnar sites structure their code, auxiliary columns almost always have all their content at the top of the page. I wanted to make the columns useful throughout the vertical length of the page, and ultimately came up with styles which fake column positioning by using absolute positioning and a negative percentage. Observe:

.rightsupport

{
position: absolute;
right: -30%;
width: 27%;
margin-top: 2px;
background-color: transparent;
}

There are some drawbacks to this technique; content contained in these support divs will overlap “regular” column content if the center column, in which this support block is located, doesn’t have enough content to space things appropriately, though I don’t see that happening (I don’t tend to write short articles). Also, those with keen eyes will notice 1 or 2 pixel vertical-positioning differences between browsers. Those with less keen eyes will probably realize that IE messes up the ‘percentaged’ width.

I originally had all sorts of things appearing in columns—comment indexes for entries with more than 10 comments, descriptions of page sections, but cut back significantly just before the beta, wanting instead for content which appears.

Internet Exploder

IE users get a special message at the top of the rightmost column of etherfarm’s section entry pages (thanks, Khoi). As you may have surmised by now, I’m not a huge fan of IE. It’s a shame that one piece of software forces web designers to choose between the design they want and the design that will work, and that until very recently, MS was completely content with this fact. I was willing to make some compromises in regards to IE compatibility, but basically decided that IE would not corner me into making any compromises to the design as a whole. I would never do this for a client site unless specifically asked, of course, but think it perfectly acceptable spec for etherfarm.

As a result, I only use (half of) one hack, and it’s used only a dozen times in the stylesheet. Everything else which doesn’t work in IE just doesn’t work, and I’m not going to waste any more of my life trying to get it to work.

A few of the known issues (which haven’t already been mentioned):

• Due to IE’s lack of support for 32-bit PNGs, it doesn’t show translucent backgrounds for the masthead description icon or the masthead description
• IE respects the column minimum widths due the aforementioned hacky use of <hr>, but last I checked, it insists on applying the browser window percentage to content within columns. Obviously, I could put a fixed-width element within each block to prevent IE from doing this, but um….no.
• IE for some reason refuses to display the upper border on the info line for posts and responses. I can get it to display by drawing a 4px border for IE then scaling it back to 1px for other browsers via the hack, but screw it.
  

  IE issues: block width, opaque background, no top border on info line

• IE messed up the previous entry and next entry buttons on archive pages, so I just removed them for IE. Instead, IE users see previous entry and next entry links as text in the rightmost column.

IE previous and next substitute

I’m sure there a bunch of other problems IE poses for etherfarm, but that’s just it—they’re problems with IE. IE users constitute only 25% of etherfarm visitors at this point (FF at 33%, Safari at 17.5%), and I’m guessing most of them come from Google doing searches on keyword sets such as “eunuch genitals pictures”. They deserve what they get.

That’s all the meta I have in me for this week. In my next “meta” article I’ll share some thoughts on and experiences with integrating the design with ExpressionEngine. Several people have already sent me EE-related questions they’d like me to cover; if there’s anything specific in which you’re interested, let me know.