« Conjuring Up OPi8.com | Main
|
|
|
|
|
Arcane Implementation
"Arcane" is a layout using images and content to define positioning. I started with the VISION section as a base for what content I need to fit. I had a 100px sq. artist portrait and at least a dozen 28px sq. thumbnails that I needed to include with the headings, interview/bio, and links to other VISION artists.
From there I figured it would be nice to have a list of outside sites belonging to the artists. We're promoting the artists, we might as well offer a quick exit to their sites.
I also had the navigation which I had already set up for the front page, under the masthead. I considered side scrolling briefly, but I already had a horizontal navigation and I wanted to keep the navigation consistent. Users are first acquainted with the front page. It is there that they get the feel for the navigation. They spent their time figuring it out on the front page already, why give them another task on each subsequent page. The navigation became the first bridge between the sections and it's something I mean to maintain over all the pages.
So I have navigation (settled with being horizonal, only fits on top), portrait and thumbnails, content, past features, and creator links. Matthew Pasteris helped me with some ideas and usability testing to make it all fit on the page tightly, but not before I put together the background that became a template for the rest of the section pages on the site.
As was said in the previous article I had gotten some inspiration from The Lesser Key of Solomon while doing some research. The sigil in the background of VISION, and the etching in SEQUENCE is of Seere:
The Seventieth Spirit is Seere, Sear, or Seir. He is a Mighty Prince, and Powerful, under AMAYMON, King of the East. He appeareth in the Form of a Beautiful Man, riding upon a Winged Horse. His Office is to go and come; and to bring abundance of things to pass on a sudden, and to carry or recarry anything whither thou wouldest have it to go, or whence thou wouldest have it from. He can pass over the whole Earth in the twinkling of an Eye. He giveth a True relation of all sorts of Theft, and of Treasure hid, and of many other things. He is of an indifferent Good Nature, and is willing to do anything which the Exorcist desireth. He governeth 26 Legions of Spirits. And this his Seal is to be worn, etc.
From there I continued the theme and included occult sigils and etchings in the other pages. Sigils from Dee's Heptarchia are in TRANSMIT. A circle from the Necronomicon in WORD. The magical triangle of Solomon for LISTEN. And various etchings for secondary pages.
Now to the part we've all been waiting for: implementation.
I wanted a "standards-compliant," lean, validated, bandwidth-light, cross-platform, easy-to-use, pretty-to-look at website. So I decided to try this by ditching the <table>'s and using background images and CSS positioning.
The content is organized into <div>'s such as "header," "content," "closing," etc. Those 3 main content areas are styled with CSS to have their own background images behind them.
The above image is intended to be an example of how the content is layered over the background image (I was going to say that the content "floats," but that's a reserved term which I'll address in a future article). This avoids "spacer" images which are common to table-based layouts. I've found that spacer images--which are the same blank images repeated over and over in a layout--cause undue load on the server, even though their bandwidth usage is negligible. Every time the spacer is found in the code, a request is made back to the server for that image. Your average fixed-layout table can have dozens of spacers set all over to make sure the table sticks to it's necessary proportions. The current layout for OPi8.com contains no spacers, the background images aren't cut up, and the content is easy to read even if CSS and images don't render. The layout for the average section front-page only uses 3 images: the navigation/header, the content background, and the footer bar. There are other images on the pages, yes, but those are content and I can't do much with them but show them. I want the content to win out, which is why I took a sparse approach to the SEQUENCE, WORD, and TRANSMIT pages.
The "inner content" pages are pages like the individual comic pages, the fiction pages, and the TRANSMIT articles. Those pages only have the header navigation to keep them consistent from the rest of the site, the identifying information, and a "frame" to constrain the content itself. This gives the content the focus. It doesn't let the site design overpower the comic/story/article, and lets the artist in question get their message through without too much noise mixed in.
I'm not completely succeeding in all the areas I want to succeed in, but my plan is to stay on this course until the run is complete and then come back and improve again. I will iterate this process indefinitely.
Next article I will go into the specific code of the navigation, which is probably the signature element of the entire site right now.
Posted by Anderson at September 30, 2004 03:08 PM