Tips and Strategies - Developing CSS/WebStandards Compliant Websites, Part 1
Tips and Strategies
Developing CSS/WebStandards Compliant Websites, Part 1
Introduction to Series
Over the last few years it has been interesting to see how many NEW websites are not W3C compliant. I have come to believe that the core of this problem is that few companies in the web development community care much about Web Standards.
A simple test will demonstrate this: Open Google and type in "web development" (and add your local city and state to keep the search local). Now view the top 10 hits and test them on the W3C validator (validator.w3.org) . What you will generally find, as of this writting, is that only one or two of these top 10 sites even get close to passing validation, often none of them. Some have been known to throw literally hundreds of errors and warnings.
Why is that? My guess is that a big share of the answer to this question is that most people and companies that develop websites fall in to one or more of the following categories:
- Using old template website engines or code generators that have not been updated to new standards.
- Using the WYSIWYG Editors that often continue to generate non-compliant code.
- Do not see the value of being W3C compliant
- Coding to the standard is just too hard or too much work, and the job needs to be done "YESTERDAY".
I have addressed a number of the ideas in the first two categories in several other articles:
The value of building compliant websites is well documented, but apparently not widely accepted. Basically there is no way you are going to make the investment of developing websites using Web Standards, if you don't see that value. Much has been written on the value of web standards, so I don't feel that I can add much that is new to this discussion. Following are a few sample links for your reading, if you are having problems understanding that value: (Note that he last article provides some "counter point" to the discussion so you can appreciate that it is not a simple issue.)
"It is just too hard or too much work!"
I think this statement is more common that we would like to admit. There is a lot of competition for work out there, and that drives prices down. Something has give, and taking the time to learn a new and very different way of doing things is probably not on that list.
During meetings with other web developers I often have gotten the feeling that there was no immediate return on investment to really learning and using techniques that would result in a W3C compliant website. Customers are not demanding it, and frankly it is perceived as too time consuming. It feels too much like standards for standards sake, and therefore becomes an additional burden.
The reluctance of the web development community with respect to Web Standards, is understandable. Mostly this comes from the fact that there must be a rather radical change in the way the developer approaches building the website. Therefore, the purpose of this series of articles is to help lower that hurdle and share some tips and strategies that will result in compliant websites that come together with the same speed and ease as the "old way" (what ever that might have been)
So, let's get started..
Part I - Setting up and Developing a General Strategy
Setting Up
The first step in this process is to insure that as few road blocks as possible exist toward the goal of a W3C compliant website. The first of those road blocks is interestingly, the browser itself. (You should have seen that one coming.)
Legacy
The legacy of the browser wars is that there is still a significant number of web users are using a browser that does not fully support standards, fortunately this number is changing. A look at the most recent stats on browser use:
www.upsdell.com/BrowserNews/stat.htm
..shows that it is hard to pin down exactly where the dominate browser use is these days. There are a couple of things that stand out from my perspective:
- There is still a significant but dwindling user base that is still using non-compliant browsers
- That usage is changing toward more complaint browsers and that is ALSO becoming significant.
What is the point? Our primary mechanism for meeting the standards will be the use of CSS. Each of these browsers have quirks in their support of CSS and the mix of browsers that must be supported will have a direct impact on how much work we must do to meet the standards and get the job done effectively. During this series we will directly address techniques and strategies for supporting this wide array of browsers.
Default Style Sheet
Every browser has a default style sheet (This is our first strategy for dealing with this legacy). This style sheet is run on the incoming HTML, BEFORE you have any say in the matter. It should be no surprise that every browser's defaults are different. Therefore our first job is to UNDO that default browser style sheet. Fortunately, this job has already been done for us by the masters of CSS. Following are some background links to samples and artilces on the concept of the CSS Reset:
These articles should be reviewed and should provide enough samples to create your own "reset" style sheet. One word of caution: Too much of a good thing is always Bad! Keep this in mind as you develop your reset style sheet, keep it spartan and simple. The next step is "How do I use this?"
This is fairly simple. At the top of your main style sheet (and the one you always load FIRST) you would add:
charset "UTF-8";
/* Clear all default styles */
@import url("cssreset.css");
You now should have a level playing field from which to develop your own "default" styles for most all of your website development. At this point I can only give you an example of what I do, and hope that will give you something with which to start. I try and cover the following areas in my "defaults":
- Default Body styles (font, color, background)
- Default Heading (h1,h2,h3) font sizes (font, margin, padding, color)
- Default paragraph (margin, padding only)
- Default ordered and unorder list style (I leave off the bullets**)
- Default Link style (link, visited and hover)
(**Why? This is because I use lists more for menus and structured lists that usually add their own "decorations" so this gives me a starting point without having to "undo" something)
That is it! Every website will need to enhance either all of part of these, but it at the least should save you some typing and give you a specific place to make those changes that affect your entire website.
Development Browser
It is impossible to test every step in your development process on every possible browser. Therefore you need to determine the best browser to use as your base of development. Using a browser that (at the time) adheres most completely to the standards should be your choice. Currently this is generally FireFox's latest version. Every other browser becomes some "exceptions" later on when you do cross browser testing (That is a whole other article.) This may change in the future, but for now FireFox should be your "base browser standard".
General Layout Strategies - Layers
Getting the layout right is probably the hardest part because it involves visualing how various design components need to be either layered or nested to achieve the correct effect. This part of the series will start of with a general layout strategy that involves layering of design components. Hopefully, this will give you a good example to try out and form your own working style.
The two major road blocks in building a website using CSS often come down to "Were do I start?" and "What is next?". CSS is like building with "silly puddy", nearly every thing you do can significantly affect the rest of the page. Borders, margins, padding can make lining up the simplest things a nightmare. The worst nightmare is to have the page nearly done and that last "thing" turns the page to mush. (..as the computer goes flying out the window...)
You best defense in this "mushy" world is a very controlled process that minimizes any domino effects. Generally I work in two "spacial" directions at once.
- Back to front - View the website as layers of color, images and text stacked on top of each other.
- Top - Left to right, Repeat - Start with the bottom most layer that hits the upper left corner, then:.
- Repeat the process for each "block" - Each layer will have often have nested blocks, work those from left to right as well
The critical part is that at each step it should be viewed and tested. To accomplish this, have your development browser open in a separate window and refresh it at every step of the process. If you use a tool like Dreamweaver, DON'T rely on its "design view". This "view" will allow you to think you have it all right and at the end it is really a big mess.
A Simple Example
This is all nice in theory, but how does this really work. To make this easier to visualize we're going to build the home page for a real website. The design is simple, clean and most importantly, focuses on the "layer" aspect of the process, so we won't get lost in complications at this point. Here is our target design:
Looking at the design can be overwhelming if you are fairly new to CSS, so the first thing to do is block out everything but the overall background and position of the design on the page. The key at this point is the break out of the images from the original design. This particular design's background was broken out as follows:
- A background "vertical strip" showing the color gradient from top to bottom that will be repeated left to right.
- A content background "horizonal strip" going down the main content area.
- A header background that includes a small trim of the top gradient of the first background.
We will first assemble these in three steps so that we can illustrate the process. I don't want to short change the importance of getting the various design components broken down correctly. This requires some skill with programs like PhotoShop and most importantly, the layering abilities of these programs. You will need that to help visualize the layers needed and to extract the proper components for your website build out.
Background - Step 1
First the basic HTML code that will be our first layer:
<!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=UTF-8" />
<title>Skin Fitness, Etc</title>
<meta name="keywords" content="" />
<link type="text/css" rel="stylesheet" href="basic.css" />
</head>
<body id="home">
<!--set background to bodybkgr.jpg-->
</div>
</body>
</html>
(Note: for the remaining code in this process I will be leaving out the doctype and head sections to only focus on the body tag sections)
Next, The CSS code:
body#home {
background: url("images/bodybkgr.jpg") 0 0 repeat-x;
}
As you can see this is really simple code and gives us the following page in our development browser:
Background - Step 2
Next is the content background that also lays out the focus of the webpage. This page will be left-right centered.
The HTML Code:
<body id="home">
<!--set background to bodybkgr.jpg-->
<div id="mainwrap">
<!--set background to contentbkgr.jpg-->
</div>
</div>
</body>
The CSS Code:
div#mainwrap {
margin:auto;
width:831px;
height:700px;
background: transparent url('images/contentbkgr.jpg') 0 0 repeat-y;
position: relative;
}
Review of the CSS: First "margin:auto" is what centers to main page wrapper in the center. The width was determined by our header image (which we have not place yet) and the height is temporary (we will remove that later when we have some "content" in place) because we will want the content area to expand to fit any added content and not be "fixed". Next is our background image that is repeated in the "y" axis (up and down the page) and the last setting is the position, which requires a bit more explanation:
Every <div> that we want to be a "container" must have a position in order to "contain" other tags. A "safe" position to start with is "relative", which means it will stack in the order that it is placed in the code. This is our "outer most" container so that may seem irrelevant but it will be containing other tags so it requires a default "position", even if that appears to mean nothing.
So, here is what we have at this point:
Background - Step 3
This next step provides the correct color for the upper gradient and unlike the mainwrap swatch is actually an large block that will be the background of the header and menu. For the moment we have added some <p> tags to force it to be visible (they are like the height setting in the previous layer) and will be removed when we put something in our box that is of the correct size (which will be 665px).
This brings up an important "strategy", adding temporary content into our blocks (<div>) so that we can see what is happening at each step. It would be tempting to just: "put everything in there that needs to be there", but I have found that K.I.S.S. (Keep it Simple) is very important, because content can rage out of control quickly. As a technique I will often add a dashed border to a <div> so that I can see its position better. I often use:
border:thin dashed;
...and then removed it later.
The HTML Code:
<div id="mainwrap">
<!--set background to contentbkgr.jpg-->
<div id="contentwrap">
<!--set background to contentbkgr2.jpg-->
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
(Note the extra <p> tags are just temporary)
The CSS Code:
div#contentwrap {
position:relative;
background:transparent url("images/contentbkgr2.jpg") 0 0 no-repeat;
}
Nothing new here but just to make no assumptions: The background image is not a strip that is repeated but is a full image with a height of 665 px. We will be putting a header and the menu in this area and that will fill out this space. The position attribute is there for the same reason as above.
(Note that the contentwrap image is going to drop down more when we start putting stuff in that container.)
Now we have the basic background finished and the next series of steps are:
- Place the header block
- Place the menu bar
- Place the actual content block
Note: Make sure you remove the temporary height setting of the previous steps so that the page will properly move with the content that we will be adding later.
The Header Image - Step 1
Notice at this point that we have NOT placed any images on the actual webpage. We are going to continue with this practice. The reasons? We will analyze them further in Part II of this series. I just wanted you to note here that we are doing it this way for specific reasons .
The HTML Code:
<div id="mainwrap">
<!--set background to contentbkgr.jpg-->
<div id="contentwrap">
<!--set background to contentbkgr2.jpg-->
<div id="homeheader">
<h1><span>SkinFitness, Etc</span></h1>
<!--hidden h1 tag, and logo go here. Set background to homeheader.jpg-->
</div>
</div>
</div>
The CSS Code:
div#homeheader {
position:relative;
background:url("images/homeheader.jpg") no-repeat;
margin:0 0 0 35px;
width:761px;
height:573px;
}
div#homeheader h1 {
float:right;
background: url("images/home_logo.jpg") no-repeat top right;
margin-top:0;
margin-right:50px;
width:261px;
height:261px;
}
div#homeheader h1 span {display:none;}
The CSS is a little more complicated so let's break it down in steps:
- The homeheader block has the main background for the header. The 35px to the left is to account for the background margin that we don't want to hide. The width and height account for pushing the contentwrap down so we removed the temporary <p> tags.
- The homeheader <h1> tag contains the logo that we float to the right (more on the wonderful world of floats later). A right margin keeps it from covering the same background margin on the right. The width and height are exactly the width and height of the image.
- The text in the <h1> tag was wrapped in a <span> tag and hidden (display:none;). Search engines will see it, and that is the reason it is there.
Now the pretty picture:
Rather amazing that so little code can produce a page that looks nearly done. This is the real beauty of CSS and web standards: Small compact pages that load fast, are easy to read and understand and provide clear information for search engines.
The Menu Bar - Step 2
In the interest of not throwing more new concepts at you in this demo, we will just use a string of <a> tags for the menu. Generally I would use a <ul> tag (un-ordered list) but that will require more explanation that we will save for another time.
The HTML Code:
<div id="contentwrap">
<!--set background to contentbkgr2.jpg-->
<div id="homeheader">
<h1><span>SkinFitness, Etc</span></h1>
<!--hidden h1 tag, and logo go here. Set background to homeheader.jpg-->
</div>
<div id="mainnavhome">
<!--just line of <a> tags for this menu-->
<a href="index.html">HOME </a><a href="aboutus.html">ABOUT </a>
<a href="services.html">SERVICES </a><a href="products.html">PRODUCTS </a>
<a href="testimonials.html">TESTIMONIALS </a><a href="contact.html">CONTACT</a></div>
</div>
</div>
The CSS Code:
div#mainnavhome {
position: relative;
left:130px;
top:-150px;
}
div#mainnavhome a {
display:inline-block;
margin: 5px 5px 5px 5px;
padding:20px 10px 20px 10px;
vertical-align:top;
font-size:1.1em;
color:#721617;
text-decoration:none;
font-weight: bold;
font-family: "Trebuchet MS", Times, serif;
}
div#mainnavhome a:hover {
text-decoration:underline;
}
A brief tour of the CSS. The menu will live in a <div> block: mainnavhome. It will be positioned "relative" (mostly because it needs to contain other components) and sized to match the needs of the embedded <a> tags. (You will usually have to play with this sizing as you build the menu). A negative setting of -150 to the top attribute moves the menu up into the header image. (Note that the content will also be moved up in the same manner later) Next the <a> tag is set with a "inline-block" so that we can line them up in a single row (the natural order would have been stacked vertical down the page). We set various margins and padding to get the spacing we need. The natural 'underline" of an <a> tag is removed, and is then added as a "hover" attribute.
The Content Block - Step 3
We are just about done with this process. As a reminder, we are leaving out a footer at this time so as to keep this article from becoming a book but it will just continue the same process.
The HTML Code (abbrevated here for space savings)
<div id="contentwrap">
<!--set background to contentbkgr2.jpg-->
<div id="homeheader">
<h1><span>SkinFitness, Etc</span></h1>
<!--hidden h1 tag, and logo go here. Set background to homeheader.jpg-->
</div>
<div id="mainnavhome">
<a href="index.html">HOME </a><a href="aboutus.html">ABOUT </a>
<a href="services.html">SERVICES </a><a href="products.html">PRODUCTS </a>
<a href="testimonials.html">TESTIMONIALS </a>
<a href="contact.html">CONTACT</a></div>
<div id="homecontent">
<p><strong>Charlene Handel, Certified Organic Esthetician and owner of
Skin Fitness,</strong> offers each client a private consultation which
includes a comprehensive skin assessment. From this assessment, she custom
blends the finest & most pure natural ingredients to meet each client’s
specific skin needs.
To ensure optimal results, Charlene incorporates state-of-the-art equipment
for each facial.</p>
<p class="center"><strong>
Call today to discuss your Skin Fitness needs: 760.727.0300</strong></p>
</div>
</div>
The CSS Code:
div#homecontent {
position:relative;
top:-150px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1.2em;
color:#721617;
margin:20px 20px 0px 20px;
padding:0px 40px 0px 25px;
width:725px;
}
CSS Notes: Like the menu it is postioned relative with a negative top attribute to move it up under the menu and OVER the header image. The rest of the settings are for spacing and formating the text.
The website home page is basically done, at least for our purposes. Let's reivew our goals and what was accomplished with this process:
- The website code is SEO friendly and only contains elements that are meaningful to search engines. There are no extraneous tags or images (spacers or just pretty stuff).
- The design is contained completely in the style sheet.
- The website will be fast to load.
- The website will be fast and usable on a small mobile screen (phone or similar device)
The next article in this series will tackle a more complex design and address a number of other issues that you will often encounter. Some of those topices will be:
- Image - embedd or not
- Tables - Proper use of tables
- Floats - Make them your friend
- More menu tips
I hope this will inspire you to dig deeper and become a CSS/Web Stardand web developer!