Web Process: Part IV
August 16, 2004
Ok, I gave you the rest of last week to digest the quick hitting Part I, Part II and Part III of the Web Design Process series. Now we get into geekier territory, as we ditch table-based design and lay out a clean, semantic XHTML document. Why? I'm glad you asked.
Back in the golden age of web design (the late 90's), everyone wanted a web site. The demand for sites was much greater than the pool of designers, and thus anyone with a copy of Frontpage or Dreamweaver or some other what you see is what you get (WYSIWYG) editor could throw together a web site with little or no knowledge of HTML, the programming language of the web. The result: Sites with bloated code and little cross browser or platform capability. The pages took longer to download, were not easily updated, and search engines choked on the extra code.
Around the turn of the century, web developers struck back. A fella named Jeffrey Zeldman wrote a book entitled Designing with Web Standards and began a movement among serious developers to create semantic documents where presentation was separated into it's own file called a Cascading Style Sheet, and the HTML document contained only the content. This created sites which were much more accessible to screen readers, different browsers, cell phones, etc and also instantly made a site more friendly to search engines such as Google and Yahoo!.
For more info, look at the myriad of sites in my blogroll out at the main page. Let's move on to taking our web comp from the last article and breaking it up into a nice, clean web document.
First things first, we need a DOCTYPE. This is a piece of code that let's the browser know how to render the page. We will be going with the XHTML 1.0 Transitional DOCTYPE. For a complete list of doctypes, check out this link from the W3C.
So we open up our favorite text or HTML editor and get to work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
(Note the line numbers are not a part of the code, we will use them for reference.)
Next we need to add the head elements to the page. These are not a part of the content of the page, but support the page with information about it, external files associated with it and we will also title the page in this section as well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>:: bradleyboy productions ::</title><link rel="stylesheet" type="text/css" href="" /><script type="text/javascript" src="mondial.js"></script></head>
Line by line, here is an explanation: In line 1, you find the DOCTYPE declaration from before. Line 2 begins the html of the page and provides the browser with a namespace for the html being used. In line 3, we start the head section with a head tag. We will close this tag when we are done (line 8). Line 4 specifies content type and character set within a meta tag. Line 5 gives the page a title. This is what will be displayed at the top of the browser window when you navigate to the page. Lines 6-7 bring in external files the page will use for presentation and behavior. The CSS file and the JavaScript file. Linking to external files allows you to change the file once, and since each page links to that file you only have to change the external file instead of changing the code in every page. For our purposes here, we will leave the CSS href blank so that we get an unstyled page. Finally in Line 8, we close the head tag.
Now if you are feeling a little light headed after that one, it's ok. You can simply use mine and change the title and file names and you'll be fine. Much more can and will be added here, such as meta tags for keywords to help identify the page to search engines, even though many search engines are ignoring them now (but that's for another article).
Now onto the meat of the page, the body element. We'll start like this, directly after the head section we just finished:
<body><div id="container">
Line 1 is simply opening the body element, we will close it later just as we did with the head tag. Line 2 is the first of several divisions we will use to seperate the content of the page. This div will contain the rest of the page to a specified width and center it no matter how wide the window. More on that once we get into the CSS. For now, we are just putting it here knowing that we will need it later. We will close this after the content we want it to contain ends.
Now let's take a look at the comp from last time. We will divide it into three main sections:
First the header will be contained in an h1 element using some CSS trickery. Remember, now we are just trying to write a nice, semantic document that will be legible and usable when the styles are disabled. This is why the h1 is a good fit here. It will title the document in an unstyled version, and when we add CSS it will pull in our header graphic. The nav and main section will utilize div's.
<body><div id="container"><h1><a href="#">bradleyboy productions: the unstyled version</a></h1><div id="nav"></div><div id="main"></div></div><div id="footer"></div>
Starting in line 3, we set our h1 element into motion. This will be the overall heading for the page. Only those with CSS disabled will see the text, such as people with screen readers or those using cell phones to access the page. In the full version, we will hide this text with CSS. Line 4 shows the nav div which will house, you guessed it, the navigation for the page. The main div will house content for the page and is shown in line 5. Line 6 closes the container from line 2. Finally, line 7 will be a footer element that we do not want to be constrained by the container, so it is placed after the container is closed. Now for a little filler:
<body><div id="container"><h1><a href="#">bradleyboy productions: the unstyled version</a></h1><div id="nav"><ul><li><a href="#">About Us</a></li><li><a href="#">Services</a></li><li><a href="#">Portfolio</a></li><li><a href="#">Contact Us</a></li></ul></div><div id="main"><div id="#content">Main Content Goes Here.</div><div id="#sidebar">Sidebar Content Goes Here</div></div></div><div id="footer"> © 2001-2004 Brad Daily & bradleyboy productions </div></body></html>
Here we have added a few last touches with our end product in mind. First, within the nav div, we place an unordered list (ul) which will act as our navigation to the four separate pages. Next time, we will style this list into the navigation you see in the web comp. Notice it all falls within the nav div, the closing tag in line 11 close the nav div. Then, inside the main div, we place two div's that will contain the main content and the sidebar content. This helps us separate different content regions and will also help us when we start the CSS process to style the page. The last two lines close the body section and close the html as a whole.
Now we have set a good foundation for our design. A semantic document allows for a page to gracefully degrade as the limitations of a device kick in. This way, when someone uses a cell phone or PDA or another limited device, they can still access content in a controlled, organized environment. Check it out at this link, nicely setup and divided into content sections.
Next time, we will kick into the design most people will see by firing up some CSS to give the site some style.
Filed under Design, Technology
Comments
Be the first to leave a comment for this entry...
Comments are closed for this entry