3 - 5. Reinventing the Design

Main Points

• Moving the Clock Making space on the canvas for something more interesting.
• Site ID Creation Reinventing the design - Looking to the future.
• Header Gallery Adding "banner" imagery.

OK. Well, it's time to review. A key issue here is that we really haven't met our goals. When we first started, there were two key themes we wanted to capture. "We want to speak trust to our visitors. We want to speak tradition. We want to speak history and convey a human connection to the past. At the same time, we also want to be forward looking. This is not a site for raw nostalgia or old-time sepia photography. We believe that we are part of the future and the colors should convey that." Our design needs to create a link to the past, and it's doing that very admirably. However, it's sepia-toned, and there's no forward looking elements in the color palette, in the fonts, in the images, anywhere. That isn't what Earth Chronicle is about. We haven't been able to implement the forward-looking themes that we wanted because of setbacks in poor font support across the internet and a preferred color palette that clashed with "green" tones. This isn't anyone's fault, but neither is it really acceptable. We've come full circle and we still haven't answered the question of how to combine the themes of eco-friendliness and the future with our more overtly historical themes.

Original Medieval Scroll design sketches

Also, while not explicitly discussed to this point, a key reason that this was necessary has become glaringly apparent. The design as it stands looks historical - as in looking backward. There's no sense of history as a continuum, as something that extends from the past to the future. As something that connects us with those who've come before and those who'll follow after. This design is history as a thing dead and gone, not as past, present, and future. It's a lie. And if this is going to work, we need to find a design that tells the truth about who we are and what we do. Not to belittle all we've accomplished. Graphically, we're in excellent shape. Despite the technical obstacles to putting together the image border and adjusting the imagery, we've enjoyed huge success taming those challenges and conveying the historical aspects of the site. We've changed a number of details: the top curl now goes behind instead of in front of the reading surface, the clock has been moved out of the header, and the logo has been changed from Flash to a rollover image and shifted to the left. Otherwise, the current design is highly recognizable in the original sketch.

Moving the Clock

The design as it stands doesn't capture the identity of Earth Chronicle as we've deduced from our site review. Therefore, revisions will be necessary, and I believe I need to do something a little more daring. Once, I talked to a designer who was adamant about starting every design using a monotone color scheme. If that didn't work, he went to monochrome, then analogous, etc.; his philosophy was pretty straightforward. He was single-mindedly dedicated to keeping everything as simple as possible. However, if it didn't work, he went bigger. Obviously, that's not the design technique I used, but that idea rings with me right now. I've worked through all the steps, done everything I'm supposed to do. It's not doing what I want it to do, so it's time to go bigger; try some things I hadn't considered before. It's time to revise and experiment. A couple of ideas have collided, and in order to work with them, I need space in the layout above the fold. Preferably not anymore than the navbar could eat up, in order to save maximum space for content. There's a lot of whitespace above the fold, probably too much. So I'll eat some of that up, but it's distributed throughout the layout so I can't just eliminate it and replace it with "X". Therefore, I'm actually going to clear out some space by moving the clock out of the header.

The clock is doing exactly what I need done functionally. It's a forward looking element, it's a reminder that history is right now, and it scales beautifully, sacrificing itself to keep the h1 title visible despite any text or zoom settings that users may adjust. Moving it means, I won't have that same ultimate scalability, but thematically the clock is too subtle, especially by itself. I can still achieve substantial user friendliness to accommodate user font sizing, without shredding my message. It won't be flawless usability support, but I need a better balance. I didn't want to throw the clock out of the layout, it's part of the forward-looking message, so I've kept it. However, I moved it to a less prominent but important position as the visual terminator of the Main Points boxout. This turned all the text italic, but a font-style: normal; declaration fixed that. It also made it necessary to move the left border (and its margin and padding) from the mainPointsBoxout div to the unordered list inside it. I'd been considering that anyway, so as far as the Main Points are concerned, this is a better design already. Except that now things were a bit too cramped; the links served to create a visual separation between the list items, but with the revised border I found it better to add a margin-bottom: 0.5em; declaration to give the list items breathing room.

Site ID Creation

Many designers I've worked with dislike usability design because they feel it's restrictive. Obviously, my design process thrives, even requires limitations of this sort to give shape and substance to my work. Usability guides and similar resources are not only resources I read for professional development, they're part of the resources I go back to when I'm in trouble and need help. Now is definitely a time when I went back to basic resources to help me find "out of the box" solutions and challenge assumptions. When considering usability best practices a major revision jumps out at you. I need to get the logo up there; a site id is a critical navigation and location tool. Typically, the id for the website goes above the navbar, but in those cases, the navbar simply drops menus over content; as soon as the mouse goes away you can reveal the content at will. However, in the case of my collapsing navbar, that may or may not be the reason the page title is hidden, so I'm placing the site ID below the navbar. The logo won't scale so like the clockbox, so if you turn the font size up sufficiently and the browser window is narrow enough, it causes problems. However, 90% of users needing magnification that extreme will need to fully maximize the browser. Most of these users do not browse unassisted in the first place; they normally use a screen magnifier, a screen reader, or a non-monitor alternative like a braille display. This solution works well in all three of those cases, so I'm well covered. The XHTML is quite typical.

When I first considered this, I was unsure how to proceed. The clock was centered so a site ID on the left would throw things off balance. However, with the clock gone, I have a clear field. To preserve as much of the space as possible and follow tradition, I placed the Site ID on the far left side of the page. I also adjusted the positioning of the navbar. First from top: 3em; to 37px since I don't want the navbar to move over the header gallery if at all possible; this comfortably but closely attaches the navbar to the apparent top of the scroll whatever people's resolution and text sizing. Second, I changed the positioning from left: 3em; to 7em. The extra space not only clears the page border, but keeps the navbar from hiding the "Go Home" text, at all user font sizes. This caused the navbar to fall on two lines in the default display for a 1024 pixel wide monitor. While, I'm building the navbar to withstand narrow screen widths, that's not exactly Plan A, and 1024 isn't exactly narrow. Therefore, I decreased some of the default navbar button widths to 8 or 9 em so that everything fits on one line for 1024. Before we go any further, let's take a look at the site ID.

Here's what I've created for the logo. I've explicitly written "Go Home" to identify that it's a link and included a hover effect to make the words red when someone moves over it; this is an effect that many websites use to indicate a link. Given that this is an image, I don't want people believing that it's decorative, so I'm employing all the standard link cues plus the specific link cues of my design to scream "link". Also, you also won't see the words here because they're not on the image. As you can see from the code snippet above, I've adopted the more SEO-friendly and accessible method of writing "Go Home" as text. This also automatically maps my CSS for links to the "Go Home" text automatically, and any changes I make to links will automatically update the appearance of "Go Home" as well. Since the image is applied as a background image, no browser ever knows this is anything other than a normal link. Bonus.

Graphically, this is fun stuff. I wanted to put the EC logo on a background with stars. Here is finally something colorful that I can play with. While my monochrome color scheme looks awful with large applications of flat blues and greens, the colors are similar enough to white that gradients and photographs come across nicely. So I used my SRTM globe showing the Americas wrapped in an Earth Chronicle C, and matched the C's color with a green in the image. I tried adding a drop shadow to give it more of a 3D feel, but the global direction of light on the page conflicts with that in the image (shadows on the page fall down and right, while the globe is shaded only on the left). The drop shadow accented this discrepancy, so I just attempted a more muted approach. A quick attempt to flip the image to match the light direction naturally flipped the continents backwards... no help there. I experimented with layer effects and went with a more subtle inner shadow; once the black background was added, this effect did the best job of creating a touch of depth without calling overt attention to itself.

Now all, I needed was a public domain image of stars. NASA, right? US government, everything is public domain, right? Just grab something from the Hubble Space Telescope or something?? Right? Four Hours. I was combing through various NASA websites for four hours looking for something public domain before finding a gallery that had some images I could use. The problem was that NASA shares its missions with so many other agencies that virtually nothing is public domain. The images taken for international missions don't qualify. The European Space Agency (ESA) demands that all images taken with it's involvement be published under the Creative Commons; any Hubble pictures taken at the request of university scientists are copyrighted by the universities in question. This image I used is a companion image to a press release exclusively authored by the Hubble team - a group of three agencies which each link to a statement saying the images are public domain as far as they are concerned. The winner was a dynamic but washed out picture of the most active starburst region in our local area of the universe, the Hodge 301 cluster in the Tarantula Nebula. With a little image editing, viola! The nebular gas provides an extra splash of color and the sparkling, orange star at the edge of the cluster was perfect. It created just the right feel to put my logo indisputably in space. Now I just needed to put everything together with CSS...

A naked link in the header div didn't seem appropriate, and a display: block; declaration has some insidious inconsistencies compared to an actual block level element. A carefully positioned, high visibility element like the site ID was not someplace I was willing to sacrifice robustness so I wrapped a div with id=”siteId” around the link. My CSS commands all reference this id for targeting the specific elements I want without affecting the rest of the page. For the link, I'm specifying a height and width (to match the image dimensions) and applying the site ID as a background image. Note there's no backup color, since I'd like the text to rest on the paper surface if the image fails. I didn't want "Home" running across the logo and stars, and it also looked weird to have all that space with "Go Home" stuck in a corner. So I allowed "Go" to naturally take the top left corner, and applied a span to "Home" so I could play with it. I tried using absolute positioning to place it in each corner, and the bottom right turned out to be the most attractive and bulletproof. I added a little margin to adjust it nicely. Since, the span had be positioned relative to the image, I needed the link (which applies the image) to act as the positioning context for the span element; that's what forced the position property for the link.

Here, I'm applying the rollover image on :hover, and switching the color of the "Go Home" text to red - another widely used visual cue for links. I played quite a bit with the rollover state, and gave a lot of thought to not having one at all. The first tests rolled over to the logo on a square starry background. It was too drastic a shift, not very sophisticated. I kept it in only to see if it grew on me, or something else presented itself. With the rest of the header block being occupied by a visual rectangle, I didn't like having the corners in the rollover too. So before abolishing the rollover entirely, I tried axing the corners. I like rolling over to the rounded corner square. It looks more elegant and preserves the contrast between the curvy look of the site ID vs. the rectangular look of the gallery. The combination of geometric shapes provoke a more modern look than the rest of the scroll design, which is one of the things I'm gunning for in this phase. While there's still an argument to be made for simplicity, for eliminating the rollover image, I like being able to show off more of the beautiful image. The rollover also emphasizes the site ID as digital ink; if my normal links take a flat color, it makes sense that my primary site ID would take that concept and amp it up a notch.

Header Gallery

So that still left a big rectangle next to the site ID, and I needed to fill it. Enter revision number two; this is the main reason I jettisoned the clock from the header because I wanted to get this up there instead. Awhile back, I'd been looking at business cards; some of the nature concepts were pretty attractive. I wished that I could incorporate something like that into my website, and then realized why not. So I'd written up a list of "fake" banner ads that would showcase beautiful natural images. Since I'm not impressed with 99% of banner advertising, I haven't really studied the craft. I therefore decided to postpone working on this until I had other items finished and could take some time to learn the ropes of executing banners. These ideas came back to me as I was considering what to do with the design. I was desperately lacking those "green" and nature-based themes in the website so it probably comes as no surprise that a header gallery came to mind when I started thinking about going bigger. So maybe I wasn't "done", but I "needed" it. After brainstorming some other possibilities, the gallery not only seemed desirable, but the most feasible possibility I had to create results in a reasonable amount of time. The technical requirements were daunting, but the programming turned out to be mostly fine tuning; I like that the best method looks so simple now that it's complete. In my experience, that kind of simplicity and elegance almost always indicates a robust solution and testing has certainly backed me up. Here's the XHTML.

You can't get much more straightforward than that. Note that like the "Go Home" text for the site ID, I'm indicating the title of the image in plain old text and applying CSS. The gallery div sets the left margin so that the image never overlaps the site ID, as you can see in the CSS below. Since I'm applying virtually no content, except the word "Pondscape", I need to apply a height to force the div open so the image can be seen. Finally, the image needs to be positioned relative to the gallery div, so I need to apply a position property to the gallery div itself.

I was impressed that this advanced piece came together so quickly in a layout that was neither designed with it in mind nor prepared for it. While CSS has it's flaws, it is tremendously flexible, and my skill with it has definitely improved. The gallery's flexible and does what I need it to do. The image is a background image applied to my galleryImage div; it's absolutely positioned at the top right of the gallery div. As the width of the browser window changes, the gallery div holds the left edge beyond the site ID while the galleryImage div slides cleanly as far to the right as the right margin of the page will allow. The width: 100%; is a key part of this puzzle, and like the gallery div, galleryImage needs a height: 150px; declaration or the div dimensions collapse to the size of the Pondscape text. I'm also using a max-width of 2000px for high resolution monitors, this allows the image to slide to the right away from the site ID when the image is fully revealed. Pretty slick.

The title "Pondscape" is written in real text so that it stays in the top left corner producing a rectangles within rectangles effect, just like the site ID has circles within circles. I'm using the padding to give it some breathing room, and then to keep the CSS object oriented, I added this selector, #galleryImage cite, to the style rule which applies the paper texture background images. That way whatever background is applied to the page is also applied here. Because the image moves underneath the image title, I needed to apply it as text and position it absolutely. It's also preferred for accessibility, usability, maintenance, and SEO. That covers all the bases, but to make all those amazing things come together, I had pretty strict design requirements. I needed to find an image that fits a... you'll love this... 150px high by 2000px wide space. Granted most monitors will never stretch the design wide enough to show the entire image, but I need a width:height ratio of more than 10 to 1. Ouch!

I spent quite awhile searching the web for public domain images. It's hard to locate images of the necessary type, so I quickly developed a system or this would have taken weeks. I targeted landscapes and nature photography. I looked for anything that seemed to have a strong line across the entire picture, ie images that would provide an attractive 10:1 crop for my header. Then I just started saving everything I could find that looked promising; I didn't worry about time-consuming analysis, I just saved saved saved, quantity over quality and limited myself to one afternoon. Then I added the image dimensions column to Windows Explorer and sorted my 50+ images on that column. I found that roughly a dozen images were 2000px wide or larger and might produce the kind of crop I needed. One by one I evaluated this group to see if I could get a good-looking, dynamic slice. I ultimately chose Paolo Neo's, ponk.jpg, taking a crop from the middle of the image following the waterline where the forest meets the pond. There were several good alternatives, and I would like to include a number of other selections from these photos. I'll randomize having the server load different ones on each page load... but I'm not doing that now.

I really like the way this came out. The design review highlighted some important misses in our design, but the site ID and the gallery meet those needs nicely and make a nice contrast to one another. The site ID's circles juxtaposed next to the gallery's rectangles are both effective, and they create drama together. The nature image in the gallery also contrasts with the more futuristic / sci-fi starry background of the site ID. Yet, both are undeniably forward looking revisions which - in their very different ways - help to convey key themes and emotions that were missing. Previously, the Medieval feeling of the scroll imagery and color palette were combined with the subtle modern feeling of the links and "digital ink". Now, I've strengthened that combination by adding the forward-looking "green" / nature gallery, and the futuristic site ID. The site now much more effectively conveys the idea that history is all around us: past, present, and future.

Subjects:

• Core,
• Core