Getting Started Tips for CSS and Web Standards Compliant Webpages

Introduction to Web Standards

Over the last few years it has been interesting to see how many NEW websites are not  W3C compliant.  Part of the problem is the reality of SEO and the emphasis placed on the “latest great SEO technique”.  Lost is the core foundations that make the web work and SEO possible.  I was much relieved to see Google’s Panda release because a very important leader in the SEO world finally has made it clear that a well built website is what they want to see.

The value of building compliant websites has been well documented for many years, 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 in the past 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 the last article provides some “counter point” to the discussion so you can appreciate that it is not a simple issue.)

But the final straw in all of this is when a major search engine basically, in my mind, says “There is a lot of junk out there and it is time that we made it clear that we want quality”.   Actually what really has happened is that Google created a monster – SEO –  and that monster is about to drown the master with garbage. 

To have a quality web experience the website needs to have a quality foundation. Fortunately, if you are using or planning on using the latest WordPress then you have a worldwide team of developers that have been doing a quality job right from the start.  Be careful though, because that foundation can be crippled by a poor theme. So if you are using WordPress, choose wisely.

But what if some or all of your needs fall outside a quality CMS and you need a static webpage developed or need some core code to embed in a custom dynamic site.  Even if you are not doing this coding yourself, it is best to understand what this is all about.   We will help get you started.

So, let’s get started..

Part I – Setting up and Developing a General Strategy

Setting Up

The first step in this process is to ensure 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 who 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 dominant 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 compliant 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 articles 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:

/* 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 at the least, it 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.

  1. Back to front – View the website as layers of color, images and text stacked on top of each other.
  2. Top – Left  to  right, Repeat – Start with the bottom most layer that hits the upper left corner, then:.
  3. 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:

  1. A background “vertical strip” showing the color gradient from top to bottom that will be repeated left to right.
  2. A content background “horizonal strip” going down the main content area.
  3. 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;

…with different colors, 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>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</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. For now you see that strange white bar, that will be gone.)

Now we have the basic background finished and the next series of steps are:

  1. Place the header block
  2. Place the menu bar
  3. 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>
</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;

}

The CSS is a little more complicated so let’s break it down in steps:

  1. 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.
  2. 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.

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>
</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>
</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 &amp; 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><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:

  1. 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).
  2. The design is contained completely in the style sheet.
  3. The website will be fast to load.
  4. The website will be fast and usable on a small mobile screen (phone or similar device)

The real magic of this process is what the search engines see, and that is nice clean, well structured content.  Let’s take a peek:

As you can see after we remove the styles we have nice clean content with our website links in a prominent place.

I hope this will inspire you to dig deeper and become a CSS/Web Stardand web developer!

 

This entry was posted in Tips and Techniques and tagged , , by John Moore. Bookmark the permalink.

About John Moore

John Moore is the co-founder of SonicSpider, LLC in San Diego County, California. John is our head Internet developer, overseeing the direction of our technical services. He has been programming in a variety of languages for more than 25 years, first as the owner of the consulting and system architect/design company, Micro-Phyla Systems, which provided services to enterprise level companies, and then as a principle with SonicSpider LLC. SonicSpider has two primary divisions, SonicWebTech for programming, ecommerce solutions, and general web oriented technical assistance - and RightStart Websites, specializing in WordPress, which provide low cost web packages and website enhancements that can span your needs from "do it yourself" to "do it all for me". John is also a PayPal Certified Developer and has extensive experience with many payment gateway solutions.
View John's Google Profile+