n.e.o 4.1 Design Notes

Written by: NetworkError, on 17-10-2008 22:50
Last update: 17-10-2008 23:24
Published in: Public, Technical Wootness
Views: 6687

I'm chronicling some of the details of this site's design for two reasons.

1.  I like taking notes so I can refer to them.
2.  In case someone else wants to try some similar site design strategies and needs some reference material.

The Layout:
My goal is to have the site feel more like a Photoshop file than a web page.  I want all the layers to blend with each other smoothly and show through each other.

To achieve this, NetworkError.org 4.1 is based on a layered design using PNGs with alpha blending.  (More on the alpha blending below.)  Rather than have the site's elements on one layer (the body), I've broken the elements into three distinct layers (as much as is possible with HTML and CSS.)

The body:  For this site, the only purpose the body servers is to display a statically positioned background image.  (The logo-on-water image.)
The content div:  All of the site's content (everything that scrolls) is actually in a div with overflow set to scroll.  In essence, I've removed the typical "body" from the equation and placed my own, custom body in it's place.  This gives me more control of the layout.
The top layer divs:  The floating pieces of the site (the logo, navigation, and footer) are all absolute positioned divs z-indexed above the content layer.  In this manner, I was able to achieve the scroll-under look I wanted without all the JavaScript hackery that usually goes with it.

In summary, the interesting thing with this layout is that the body never scrolls.  The entire page is absolute positioned and static.  The portion that moves is actually contained in a div that's glued in place and sized to fill the entire browser window.

I ran into a few challenges with this layout.  Some of them have been overcome, some haven't.

  • The body's scrollbar stayed visible in I.E. making it look like there were 2 scroll bars.  (Fixed.  <body scroll="no">)
  • Element positioning was inconsistent between browsers.  (Fixed by playing with the CSS and ocassionaly using manual, dirty positioning teqniques where necessary, like the 1px gif.)
  • Users couldn't click links or select text under the main header graphic.  The graphic on the top left was originally one piece which meant that its transparent portion extended well into the content area's viewable area. The logo was transparent, but you couldn't click through it.  This made all the content in the top left area inaccessible.  The easiest solution was to cut the graphic in half and remove the dead space from the slices.  Alternatively, I could have written some JavaScript to attach a click event listener to the graphic, grab the mouse coordinates, and pass the click to the appropriate element underneath.  This would have been a bit ugly, though.  And it wouldn't have fixed text selection.  (Clicking and dragging.)
  • When a user presses the back button, the page doesn't scroll to it's original location.  (This is because the page doesn't really scroll at all.  The div scrolls.  I'll need to work up a JavaScript fix for this to fake it.)
  • Focus isn't on the content div to begin with.  Normally, when you enter a page you can scroll with the up/down arrows or page-up/page-down keys.  On this site, you have to click the content area first.  I'm planning to write some JavaScript to place the focus on the content div upon page load.

Alpha Blending:
I went for the layered look because I wanted some cool layering effects.  My initial expiriments with PNGs using alpha blending didn't work under I.E. 6.0.  (They still don't.  The site looks horrible in that browser.)  At the time, this was a major hinderence since that was the latest I.E. available and it had an 80% or greater market share.

The original site (4.0) used many layered transparent gifs with the opacity CSS setting set to achieve most of the shadow effects and some limited alpha blending.  It also used the browser's built-in opacity settings to make the entire content div semi-translucent.  This works under I.E., but it makes the text look washed out.  The shadows don't blend nicely either and there is aliasing on all the graphic edges.  (The first version looked pretty good, but when put side by side with this version, there's no contest.)

A few years later, when I picked the project back up, I.E. 7.0 was out and widely distributed.  It supports Alpha blending perfectly.  I reworked the template from scratch using all new graphics.  NetworkError.org 4.1's look is the result.  Now I have the full range of blending effects I was originally shooting for.

Drop Shadows:
Normally, drop shadows aren't very tricky at all.  I usually stretch the middle portion as a background of a table cell (sliding door style), and place a cell or static image at each end to put the curve on the end.  Using this method, the strechy part of the shadow goes under the end parts.

I couldn't employ that teqnique here because of the transparent graphics.  All the shadow slices are partically transparent.  If the stretchy piece goes behind the end piece, it's very noticeble.  I eventually go the bottom portion of the shadows working consistantly.  I have a solution in the works for the inconsistant rendering of the side shadows.  (I'm going to 'hack' it and use a really tall image.  No streching, just a single cell with a background.)  I'm not too happy about the compromise, but the effect should be really slick, cross-browser compatable, and transparent to the user.

Skining Joomla:
Joomla's templating system is pretty good.  It allows you to skin the overall site, position elements, choose styling containers for elements, etc...  However, the comment system I'm using, mXcomments, doesn't integrate well with the chrome system.  What's worse, articles are displayed inconsistantly.  Sometimes they use mXcomments to render, sometimes they use Joomla's built-in article rendering code.  It all depends on how you get to the article.

I've had to hack a few pieces of this template into Joomla's code and mXcomment's code.  I'm continuing to fix bugs and tighten the integration to make the site's look as seemless as possible.  It's turning into a very custom job.

Read more... Be first to comment this article   |   Print   |   Send to friend