3 - 6. Polishing the UI

Now we're done... almost. All the steps are complete, all the elements of the design have been weighed and considered, and all of our specs for the website have been met. Now it's time look over everything, from XHTML to CSS, from usability to SEO, from function to beauty. It's time to conduct a final review. None of these things are new, we've talked about them all before. But before we launch into the final testing procedures and start building the website, it's time to even out the rough spots, and give everything a spit and polish.

Some development projects will skip this phase. While this design doesn't require anything extensive, a big company can sometimes save as much as a couple weeks by eliminating a "pause for reflection". The project is already a month overdue, we have to freeze development so that the translators can internationalize the online help over the next six weeks. There are many reasons. However, that savings will come at the cost of thousands of lost hours each year as users struggle with inefficient user interfaces, or cost millions of dollars a year in lost sales for eCommerce sites. Take the time. You wouldn't consider inviting customers into an unpainted store with no door to the bathroom. Don't invite everyone into your unfinished website. It's an electronic construction that should be "finished" just as completely as you would a bricks and mortar building.

Polishing the Imagery

The header gallery immediately brought the z-index issues with the Ayer stain image to a head. There was no way around it in the new design. It flew over the gallery image, creating a very unflattering effect we couldn't eliminate directly. Therefore, I reapplied the image as a simple background to the main points section. For awhile, I thought that would do it. However, this failed to consider larger screen resolutions where the 70em limit on content width kicks in, and the stain image no longer attached to the page edge. Therefore, it was moved to the bottom of the page with the page links. With the new image gallery, the top of the design was really too busy for the stain anyway, and it gives a detail to the bottom of the page where details were lacking. It's not overt and is very unified with the design, but gives the bottom of the scroll a little extra texture.

I also did some additional editing to the entire image border, site ID, and "Contact Us!" image. One day someone stole my chair, and being eager to finish something up in Photoshop, I just finished it on my knees. When I went to look at how it integrated with the design, my disappointment was extreme. My LCD monitor turns out to show dark colors crisply at one angle, the angle at which my monitor was set, but light colors are crisp at a slightly lower angle. Therefore, I'd determined that the seams in my background image vanished based on a fuzzy version of those brighter colors. I reangled my screen to better balance the effect, but my page background showed distinct seams. You can see them if you look carefully (or maybe not so carefully) at the background image of the paper on the previous page, 3-5. Reinventing the Design. So I not only had to fix that, but apply the new background to all the images which use it. That involved a lot of work on the image border especially, since I also decided to make a couple adjustments. One, the drop shadow along the right side was much too thick, so I shrank it. By contrast, the scroll curl at the bottom of the page was not very pronounced, and I wanted to give the impression that you're reading with a lamp sitting nearby on the table, not from an overhead light. Ideally, I wish I could have applied a subtle gradient across the width of the page, but that wasn't possible since I'm applying a textured background, and an image border around the page, and using a fluid layout. However, I could easily lengthen the drop shadows along the bottom, and I did.

Also, I was having some problems with white one pixel borders around my "Contact Us!" image. After consulting with a friend whose more expert than I am, she recommended opening the Illustrator work in Photoshop and saving it there. She said the problems I was having are simply endemic to saving jpgs in Illustrator, so just don't do it. It worked like a charm. Then, I had to test a number of possibilities to get it to mesh well with the underlying paper background. There's no way to ensure it lines up with the background underwriting, so all the variations of using underwriting looked glaringly wrong. I've therefore, removed the underwriting from the "Contact Us!" image, and the effect is considerably less obvious. I also took the time to revamp the contact form for this demo so that I can actually see what it will look like.

Layout Adjustments

I need less whitespace at the top of the page, unusually for my designs, there's too much. I have a modest gap between the header and the h1 heading, then a big gap below it. Then there's a gap under the back / forward links caused by a spacer div and it's aggravated by the fact that the drop cap and Main Points heading stick up so far. This means the actual start of the content section is substantially higher than the apparent beginning, creating extra whitespace. I need some breathing room between the h1 and the header, so I've left that, however I sucked up some of the space under the heading, to provide content space in the layout above the fold. Previously, all headings except h1 had a margin-bottom: -0.5em; declaration applied; now I've included it for all headings to provide better attachment between headings and the text they introduce. I also targeted the id of the spacer div under the links and sucked up some space using the identical declaration.

I didn't like the busyness around the site ID. The site ID is quite a busy item and the image gallery was right next to it. Having the gallery title posted, practically in between was overkill. It also meant that the text was the most prominent feature of the gallery since it was positioned in the top left. I found it quite annoying that I couldn't look at the image without getting an eyeful of the title. If this were a sales banner, that would be a good spot, your eyes keeps being led back to that point, but in my layout, it was inappropriate. Therefore, I positioned the text absolutely in the bottom right corner where it says "I'm here if you need me". As the last thing people see when they scan the header, 90% of people probably won't even notice it, and that's just fine.

My new skip links are testing out much better than previously. The sup element was being applied for styling which is inappropriate for XHTML, so now that's gone. Like the site ID, I tried going with a naked link because the skipLinks aren't going to be restyled as extensively as the site ID. However, it didn't provide the flexibility I needed; I don't want any content writer to know or care if their content comes right before a skip link. Previously, if you weren't careful, the skip link could appear alongside an element, and the naked links occasionally did also, despite my best efforts. I could get it to settle into the proper position with a display: block; declaration, however, that threw the background hover all the way across the screen. There was no robust CSS that combined the element sizing automatically to the link text and attaching the link to the left page border below all the content. In order to achieve that I had to split the behaviors. The link is a normal link, nothing special so like all links it automatically sizes to the text. Meanwhile, the div is styled to clear the section content, even floated objects. As you can see below, the div merely needs a clear: both; declaration to achieve this effect. Simple and robust.

Also, we've included a brand new skip link. I'd never worried much about a nav skip link because my content comes first. I "wanted" to include one, but other items were much higher priority. After working up the Section 508 information, however, it's the only sensible requirement that I don't meet. So as long as I was rebuilding the skip links, I inserted <a class="skipLink" href="#pageTitle">Skip to Content</a> immediately inside the "nav" div but before any of the three navigation elements. It worked beautifully. However, the accessible page links come after it, so it was pushing that section further down the page. Setting the navigation skip link to position: absolute; removed it from the flow and eliminated this awkward gap. However, now when the browser becomes too narrow, the page links slide under the skip link (because the skip link isn't in the flow anymore and doesn't move out of the way). Therfore, I used a negative top margin to pull it up into the whitespace between the bottom of the contact form and the top of the page links. pageTitle is the new id I've attached to the h1 element, so this takes you back to the top of the page. Also note that all my links indicate where you're going: "Skip to Content" or "Skip to Main Points". That informs people why you'd want to click on it as opposed to what you sometimes see, "Skip Navigation" (or worse "Skip Nav") which tells you nothing about where you'll wind up.

Polishing the Design

I've made revisions to the coding standards including placing runat="server" attributes first in the tag. This immediately identifies all controls that are potentially server active. While I use some .NET library components that begin with the asp prefix, I use a lot of HTML server controls (a normal HTML tag with a runat="server" attribute) for finer control of the XHTML output. Also, I've replaced a lot of the "preferred" .NET names you see like oMail and lblSent; you see them throughout .NET tutorials and books so I'd picked up the habit by following along. Now that I'm looking not just at .NET examples, but taking a crash course in modern programming fundamentals, I'm taking the opportunity to choose more semantically appropriate names. The revisions are too numerous to mention, but include all ids that match <asp:content> tags with <asp:contentplaceholder>s and all .NET variables (e.g. contactFormMessage replaced lblSent).

I also removed two sets of container divs that I didn't need, because I wasn't using them. I'd forgotten to backup the Windows font "Lucida Sans Unicode" with the Mac font "Lucida Grande"; I've now inserted it as a fallback font before falling back to Arial. The 0.5em left and right padding on links made periods following a link far removed from the sentences they ended. I applied a #mainBody a selector to decrease right padding to just 0.1em, and a #mainBody #mainPointsBoxout a, to set the Main Points links back. I adjusted the widths of the navbar buttons. When the navbar collapses, having inconsistent widths looks sloppy. After experimenting with the fonts, I've determined that between Lucida Sans Unicode (my preferred font) and Arial (as far back as anyone is likely to fallback for the characters that are now on my menus) I can safely use 10em widths to achieve consistent button widths while keeping the navbar on one line for a default 1024 width screen. I rebuilt two divs as definition lists, credits and postingDates. This section was originally built as a set of triple nested divs mimicking a table structure, however that didn't supply good semantics. The definition list much more appropriately conveys the relationship between the titles and their respective information. The only holdover, is the middle div. I still want the visual style to replicate a table, so I needed to wrap a div around each dt / dd element pair so that I could apply a background to the entire row. The near absence of classes which were previously applied to every element testify to the more semantic choice of tags. However, the biggest change to the layout was centering the #mainBody div.

I added margin left and right properties set to auto. Sometimes this has given me trouble but it worked like a charm here. In most monitors you will never even notice this. With a 70em max-width, the text runs from left to right edges constrained only by the #innerContainer padding. However, when the 70em width is reached, the max-width kicks in and in exceptionally large monitors leaves the right half of the screen blank. Now, the content settles more attractively into the middle of the screen while all the text is still appropriately left justified and clean looking. This is another good object oriented component with the matched set of declarations fit neatly together for easy reuse in another stylesheet. In the process I also noticed that the navbars were extending past the edge of the page. Somehow the margin to keep them on the scroll surface bit the dust and needed to be restored. So I inserted a 60px right margin to keep them on the scroll.

I also revised the clock in the javascript. Previously, the clock was written in this form. "Year Month(name) Date, Day(name) AM/PM Hours:Minutes:Seconds" However, this format doesn't alphabetize chronologically. 2009 November comes before 2009 September... Oops. It also didn't cite the number of the month. Therefore, I've rewritten the clock in this new form which does alphabetize chronologically. "Year/Month/Date (Month[name] Date), Day(name) AM/PM Hours:Minutes:Seconds" It also clearly demonstrates our standard chronological format for dates - Year/Month/Date - along with a clear explanation (Month[name] Date) so that there's no confusion no matter where in the world you come from. While internationalization would suggest that the dates be programmed to adjust to the numerous date-time formats used around the world, I want Earth Chronicle to provide a clear sensible international standard that anyone can use around the world, and the chronological standard seems lightyears ahead of any other alternative.

And that's pretty much it. Testing is complete. Final reviews are in place. All the Is have been dotted and all the Ts crossed, so it's time to take it live. We could keep revising the little details forever, and to an extent we will. Modern websites don't launch in the sense that they're out the door and "done". We'll be modifying and upgrading these things forever, but there comes a time when it's time to put away the pencil and turn out the lights. Tomorrow is another day, but tonight it's time to rest. That's why we have a checklist and a specific review process for launching new pages; without one, revisions can go on forever. I hope this has been an informative look at the complete process of web design. I intend to launch this as the new design for Earth Chronicle, however I won't bother to link to it. There's plenty of links around for that, and as sites grow the time will come when even that will be changed. However, this page represents a major step in the development of Earth Chronicle as a website, one that I hope we can be proud of for awhile.

Subjects:

• Core,
• Core