March 5th, 2007
Too Much Information
So, I’ve made some changes to the place.
I kept a lot of the basic design that was here before, but the content — which hasn’t been changed much since early 2005 — needed an update. And I just couldn’t resist putting some of the new things I’ve learned about web design to use here.
I thought for my first entry on “version 2.0” of my site, I’d share the technical modifications I made, and describe how I did them.
Wait, don’t leave! I feel I am in an unique position right now, as I am relatively new to this world. It has only been a few months since I “bit the bullet,” took a new job, and made the transition from “print designer who vaguely understands Dreamweaver and Flash” to “someone who isn’t startled (noticeably, at least) when people refer to him as a ‘developer’.” I still feel a strong connection to those of you who are somewhat curious about — but mainly just confused and frightened by — how the web works. If this is you, read on. I think you’ll find my perspective on creating websites to be pretty interesting. Some of the things I report may even be factually correct (though I wouldn’t count on it). So here we go — I’ll be providing translations, 100%-free of geek-language, for everything I type for the rest of this entry….
Geek: Greetings!
My Translation: Hey.
Geek: Captain’s log, Stardate 917837248.
My Translation: It’s a Monday.
Geek: Stupendous, it’s working!
My Translation: Baller.
Geek: The new version of robertwitchger.com uses XHTML for content.
My Translation: Ok, so what this means is the information on each page of this site was created so it could be read in a web browser by coding it out in “Extensible Hypertext Markup Language” (XHTML). XHTML is, as far as basic web designers like me are concerned, the most recent version of HTML.
The information is written out in the code so it will appear in a linear, nearly text-only fashion (sort of like the way you could most clearly order the information if you had to write a term paper of the information on one of these pages) in a browser window.
Geek: CSS is used for the structure.
My Translation: The layout for every page on this site is being controlled by a single, completely separate document. Each XHTML page has a link to this document, which contains a list of rules for all its elements. (Example: h1 {font-family: Verdana, sans-serif; font-size: 18px; color: #336633;}. This means the largest heading on the page should appear in Verdana, at a size of 18px, and be green.) This document is called the “style sheet.” It is composed in a language called “Cascading Style Sheets” (CSS).
The name refers to the fact that generating a design in such an indirect, convoluted manner will make you want to send your computer cascading off a cliff…. Ha-ha! Just kidding! Mostly!
The “cascading” part means that, when those first rules are written for an element, they will automatically be counted into all other sets of rules written for that same element, later on in the document. The rules cascade down the page.
And why would you need to write multiple sets of rules for the same element? Well, it’s sort of hard to explain in words…but I’m going to try. Remember these are the elements of the content, which, remember, looks like a term paper. How many “elements” (“elements” here meaning “general areas that contain information”) does you average term paper have? A heading, paragraphs, a list or two, perhaps sectional dividers, some subheads, and supporting graphics…that’s pretty much it. And these are pretty much the same elements you can use in an XHTML page. And therefore they get used over and over and over again. While this approach results in properly organized information, the outcome is not very interesting to look at. (In fact, click here to see what the “naked” XHTML for this page looks like.) That’s why there’s a need to “style” different occurrences of the same elements in different ways, to create some variety in the design.
The “cascading” thing is a bit of a double-edged sword. Statistically, it will work for your design (with no need to work-around or hack a rule that has cascaded down) exactly 50% of the time. It will work against it 110% of the time.
Geek: This site adheres to the Web Standards created by the W3C.
My Translation: The way I’m using my XHTML and CSS is kosher with some of the guys who invented the World Wide Web…. More on these bastards later.
Geek: Each page is section 508 compliant.
My Translation: This means this site is “accessible.” It will allow people who are visually-impaired or with limited mobility to “turn off” the page’s design (by breaking the link with the style sheet) and receive the information on the page via a screen reader or by simply scrolling straight down the page. Most organizations that receive government funding are required, by law, to create their websites in this manner.
Geek: Text edits and updates can be made quickly and easily.
My Translation: Yes, as anyone who talked to me while I was first trying to learn this implementation process can tell you, it is not the most intuitive or frustration-free way to make a site, but a huge advantage of it is, even after the site is finished and launched, changes to text on the page are still very simple to make. No going-back-to-the-Photoshop-file-what-the-hell-
did-I-do-with-the-Photoshop-file?-is-this-the-final-or-a-working-file-I-just-
opened? needed.
In my experience, dyed-in-the-wool designers (like me), are resistant to join the XHTML/CSS movement. I’m sure we’ll continue to fight it for at least a few more years, but I think, after we truly grasping what we’re doing, we’ll admit to ourselves that, for dispersing information (which is what the web was originally intended for) this technique is the way to go.
As a quick aside/doomsday-prophecy, though, with there now being something of a single, approved “formula” for site creation, and it now being so easy to load one up with tons and tons of information, I often wonder where original and exciting page design will fit into the equation. I’m sure you’ve noticed that, recently, websites are starting to look more and more alike (like this one, for example). A good topic for another day….
Geek: To make site-wide changes to XHTML, all pages are built with Dreamweaver templates.
My Translation: Basically, if you have parts of your site that are supposed to be the same on every page, you can created a file in Dreamweaver containing only those parts, then create as many individual pages as you want, based on this file, and then, when you need to modify something on one of the uniform parts, you need only do it one time, to this Dreamweaver template. Pretty awesome.
Geek: I must admit I’m still working out the bugs in IE.
My Translation: Ah, yes. The main problem with creating a site the way I did is your end product looks a little different in every browser. While it was nice of the W3C to publish their definitive “Web Standards” for the optimal way to write code, they have absolutely no control over the software manufacturers and how they let the browsers everyone uses interpret the code. This makes the almighty “web standards” really more like “web suggestions” or “web advice.”
For this site, the differences are minor enough to not bother me…except if you’re viewing it in Microsoft Internet Eck-friggin’-splorer. There, none of my rollovers work, weird spacing issues pop up all over the place, and my footer is forced way off to the right. Even on version 7. I am still trying like hell to fix this stuff.
This brings us to the last piece of wisdom I’d like to impart in my explanation of web design. If you’re planning to make a site in the near future, start memorizing this phrase: “Hopefully they’ll come around in Version 8.” You’ll be using it quite often.
Tags: Design - No Comments »
