|
|
|
|
|
"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 03:08 PM | Comments (0)
|
|
|
|
|
It was a little less than a year ago that Chad Michael Ward officially abdicated OPi8.com to me. Bills had been paid, DNS records redirected, a half dozen email addresses broken. I had adopted a dying site and my first task was to veneer it so that the desolate landscape it was presenting appeared populated again. I needed to make the site look alive, even when it wasn't, even when the site's content explored the dark, desolate side of human nature, including death.
I made an effort emailing everyone I could think of to let them know that the site was now "under new management." A good amount of those emails bounced, their intended recipients no longer using the addresses I had. Most of the apparently delivered messages were never replied to. Only a handful of individuals got back to me in regards to their previous roles on the site and whether they wanted to continue in them.
I am very grateful to those few. What's the point of a site without an audience anyway? I didn't want to turn OPi8.com into a fringe vanity site, especially since it held a good amount of prestige in a certain sector of art and comics culture. OPi8.com is a promotion site, geared toward making artist's work known to a wider audience. Of course that means that the site better be good to its users, many of which are the artists the site promotes.
After a couple months of playing with the design the previous web mistress, Josie Nutter, left as her legacy at the site, I realized I'd have more fun rebuilding the site from scratch. The site looked nice enough, but the output code (the HTML) was inefficient and "quirky." There were lots and lots of tables and lots and lots of images, all of which slowed down load time even though their purpose was obviously to present a static design across most current-generation browsers. The PHP code and MySQL database wasn't bad, and going through Josie's PHP I filled in a lot of gaps in my knowledge of that particular scripting language.
So I resolved to make a "standards-based," accessible, and usable design built using the same basic backend that Mrs. Nutter had originally built.
I ran a preliminary design across Chad Michael Ward, in the intention of keeping his voice active in the site, even if just far behind the scenes. It is after all, his creation. The first design was intended as a complete departure from the previous look of the site. Unfortunately it fell pretty flat. Chad was excited that I was actually working on the site instead of letting it fester, but it was plain that he wasn't entirely impressed with my presentation, yet. I wasn't too impressed either, but he was helpful in letting me know what was working for my design. So I embraced that and moved on. The current navigation on the site is based on that early design. All for progress.
I was inspired to create what I'm calling the "Arcane" theme for the site while researching a piece of fiction and enjoying the etchings and sigils in The Lesser Key of Solomon. This also grew organically out of that preliminary design as well as Josie Nutter's design.
Finally, my favorite element of the design, the masthead, came to me while falling asleep. A sensation I'm sure most creatives are familiar with. The site's primary function is to showcase and promote artists and their work. Why not make the front page a specific outlet of that. Dave Senecal's VISION submissions worked perfectly as a source for the first masthead of the new OPi8.com, which also brought me to the new version of "Featured" content. A monthly look at a new contributor, whose work or illustration of their work (for WORD creators) would find a place on the masthead, bringing back OPi8.com's original periodical approach (to a point).
In the next column I'll outline more of the specific challenges and happy accidents that went into the implementation of the "Arcane" theme and the site's new markup.
Posted by Anderson at 04:36 PM
| Comments (2)