Re-Coding Arachne's Web Main Page (A Code-off Of Sorts)

Back in this message (good grief, how ironic is it that it was a year ago tomorrow??), I suggested a code-off and then life got, um ... complicated.

Now that we have a new logo, we need a new look. I haven't discussed this particular suggestion with any of the other Weavers, but I'd like to suggest something similar to what I did a year ago ... sorta ...

We've got six weeks to come up with a design that incorporates the new logo AND (and this is a personal opinion) complies with current standards, as well as makes it easier for future Weavers to modify the design. As I suggested in my first message, doing so is really in two distinct steps. If you've been following along with Sank's *excellent* tutorials and the other tutorials around regarding XHTML ... it's the "next generation" of HTML, and I'd like to see us code our main page with that in mind. I'd suggest the "transitional" version, as "Strict" really IS, and is totally unforgiving - presuming we want our code to validate with the W3C. It's obviously an optional step, but I'd love to see us "lead the way," as it were.

A little bit about why "compliant code":

One of the major premises behind XHTML and the styling of web pages using stylesheets, rather than in-line styles or formatting tags, is accessibility. There are a fair number of people using Text-Readers, for instance. It's something that literally scans the code and converts it to an audible translation. Another reason is to keep the code "light" ... to improve load time, decrease the chances of badly interpreted code, and enhance chances of being picked up by search engines. Yeah. Search engines. They've gotten savvy. Google, in particular, isn't very forgiving about badly coded (or non-compliant code) pages and will lower a page's ranking for non-compliance.

Besides ... it makes it easier to find the stuff that's broken. :)

Here's my Suggestion

STEP 1 - Those of us who are interested can develop (read: strip) the central column's contents down to XHTML Transitional code and mark it up according to some fairly basic standards:

• The "content flow" should be rational from top to bottom
• The stand-alone code (just the central column stuff, without the rest of the group's main page content) should validate using this DTD:
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Avoid the use of tables
  • Each grouping is contained within
    or (or
  • Each paragraph is contained within
    elements
  • No formatting or in-line CSS
  • Comment-out each of the sections for easy readability

STEP 2 - I see this actually happening in two separate steps (this is pretty advanced stuff ... so it's a great learning tool):

• Step A -
  • Figure out *which* classes and IDs on the entire page can and should be styled
  • Consolidate and develop the basic stylesheet, without regard to the actual values of the elements
• Step B -
  • Assign the values to the classes and IDs and design the page
  • Tweak the XHTML if necessary and desired

An Example

I've been playing around with this method over at Ciclipéid Éire na gCeilteach. Here's how my code breaks down:

Content: