|
| |
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
 |
W3C Validation - 2/27/2002 12:18:21
Good morning everyone! Well, after almost six years of studying the W3C and the standards for HTML, I'm proud to announce that I've built my first site that will be validating 100% to the W3C HTML 4.01 Transitional Standard.
This page was built using CSS and absolute positioning. There are no tables or cells on the page you are about to visit. You can read our notes on the page about how it was built and the testing that we've done to date.
Its amazing what you can do when working with positioned <div>'s instead of <table>, <tr> and <td> tags. The other neat thing about absolute positioning is the ability to place your html content wherever you wish. Why is this important? When optimizing your code for the search engine spiders, you want to make sure that your main content is as close to that <body> tag as possible. In the example we've provided, we have our <h1> tag right after the <body> tag. In theory, this is the ultimate position for the <h1> tag.
CSS and Absolute Positioning
http://www.seoconsultants.com/css-test.htm
P.S. We've been experiencing some slight tremors lately! ;)
Edited by - pageoneresults on 02/27/2002 12:20:04
|
|
|
|
Reflect
Posts: 4769
From: USA
Status: offline
|
RE: W3C Validation - 2/27/2002 12:25:55
Congrats, I know you have been on this one for a while (from reads at WMW).
Brian
Work hard, play fair, stay sane
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: W3C Validation - 2/27/2002 12:36:45
Thanks GWJ! Its opened quite a few eyes over there at WMW. Everything was done in FP2002 with some hand coding thrown in. Most of the comments I've received so far have been to the effect of...
"That is the cleanest html code I've ever seen!"
My goal is to minimize html code bloat to the nth degree. It appears that CSS and Absolute Positioning will be the method I choose. We'll also be converting to xhtml in the next couple of months.
Are you posting at WMW? If so, under what username?
Edited by - pageoneresults on 02/27/2002 12:37:15
| |
|
|
|
William Lee
Posts: 1179
Joined: 1/25/2002
From: Singapore
Status: offline
|
RE: W3C Validation - 2/27/2002 12:57:56
Really good!
William Lee
| |
|
|
|
Reflect
Posts: 4769
From: USA
Status: offline
|
RE: W3C Validation - 2/27/2002 14:30:03
Hi,
Same handle. Just normaly read. On occasion I post a reply when I think I am qualified. I feel this board is my Karma. It feels good to be able to help people.
Brian
Work hard, play fair, stay sane
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: W3C Validation - 2/27/2002 21:57:13
Whew! You scared me there for a minute. I thought I was going to end up on another 18 hour quest to figure out the problem. After reviewing the css file, I found a remnant of a previous <body> style and removed it. That fixed it!
Thank you so very much for catching that!
I think validation is an ego thing these days. Not many sites take the extra steps to adhere to the W3C standards and those that don't may find themselves missing out on a growing audience of users accessing the net with handheld devices and other high tech gadgets.
Its all about accessibility!
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: W3C Validation - 2/27/2002 22:02:00
quote:
On occasion I post a reply when I think I am qualified. I feel this board is my Karma. It feels good to be able to help people
I know how you feel. I lurked at one forum for almost a year before posting. The WMW is definitely in a class by itself. I just met with Brett and many others at the recent Bar Conference in Irvine. Talk about down to earth people, this was the who's who in SEO and we had a blast.
| |
|
|
|
caywind
Posts: 1479
From: USA
Status: offline
|
RE: W3C Validation - 2/27/2002 22:12:59
Boy, you fixed that right up. Actually, you're right about campliance. I was reading a story about blind and/or deaf kids who are functioning as well as seeing people, and they're doing it with computers that read web pages and IM to them. This is a fantastic application and it will probably need full W3C compliance?
<spellcheck> </spellcheck>
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: W3C Validation - 2/27/2002 22:21:15
Hey, I'm on it! I hate to see problems linger for any period of time.
W3C Compliance will become more of an issue in the next 6 to 12 months. Its been around for a long time and very few have really followed the guidelines for structuring of web sites.
People with disabilities surf the web too! In fact, the numbers are quite high. I never knew how important accessibility was until this past year and a half when handhelds really started to take off. All these new Web Appliances and gadgets require a little more effort in site design so that you can appeal to a much broader audience. Keep in mind that the hand held audience grows each day exponentially!
| |
|
|
|
abbeyvet
Posts: 5095
From: Kilkenny Ireland
Status: offline
|
RE: W3C Validation - 2/28/2002 6:15:00
That's a very impressive job!
I am interested in the rationale behind your choice of pixels as the measurement for your font sizes. If accessibility is the primary goal is there not a better argument for using a relative size such as percentages or EMs?
Katherine
++++++++++++++++++++++++
www.inkkdesign.com
"Dogs have owners, cats have staff"
Meeeooow!
| |
|
|
|
paperfish
Posts: 184
From: None
Status: offline
|
RE: W3C Validation - 2/28/2002 8:51:01
Gee, just when I thought I was getting the hang of this stuff!!!!
Cheers
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: W3C Validation - 2/28/2002 11:32:24
quote:
I am interested in the rationale behind your choice of pixels as the measurement for your font sizes.
Good morning abbeyvet! This is one area that I am still researching. Over a year ago I switched to pt instead of relative so I could have a little more control over layout and bypassing any user preferences. Since then, I switched to px for tighter control in both viewing and printing.
Since I have the luxury of working on both Mac and PC I'm able to test a variety of methods to see which produces the best results. Here is what I've gathered so far...
1. Using pt for sizing does cause problems between the PC and Mac. 8pt looks fine on the PC and microscopic on the Mac and its all relative to monitor resolution. Since most people on the Mac are at higher resolutions than those of us on PC's, sizing using pt is an absolute no-no, I learned the hard way.
2. Using px for sizing seemed to produce the best results for fixed sizing between both platforms. I experimented with 8, 9, 10, 11, 12, 13, 14, 15 and 16px sizing and narrowed it down to 12, 13, 14 and 15 when using verdana. Up 1 or 2 pixels if using arial.
3. Using pt for sizing also causes problems when printing. 8pt sizing produces acceptable readable documents from the test pages on the PC. 8pt sizing was almost microscopic when printing from the Mac.
4. Using px for sizing solved the printing problem. I printed documents from the test pages from the PC and Mac, they were almost identical and very readable. In fact, the sizing looked just as it did on the monitor.
5. I also noticed that type looks a little cleaner when using px as opposed to pt. I'm not sure why, but there is a slight noticeable difference. Plus you can use odd numbers for sizing which I found did not work real well with pt. Sometimes you could not even see the difference between 8pt and 9pt. But, you can definitely see the difference between 12px and 13px.
I haven't tested other measurements yet. I eventually want to give back the ability to the user to adjust their font sizing. Right now, because of design issues, I cannot have them blowing the design out of whack by adjusting up in the sizing.
The topic of font sizes is always a great discussion. There are many units of measure to use and I see valid points for most of them. Px seems to be the preferred unit of measure amongst the design community. The average size seems to be 11-12px when using verdana. Some even use smaller when it comes to very tight site structure where you've got to squeeze a lot of information into a small area, usually navigation blocks. I pretty much stick to 13, 14 and 15px for verdana and 14, 15 and 16px for arial.
Yes I know, some of what I say about accessbility, and what I actually have done are slightly different. 100% accessibility is the goal and font sizing is my last issue. Over the next month or so, I will be testing all units of measure to see what produces what. My main concerns are first; readability and then printability. I manage quite a few sites where the user prints information pages and I want to make sure that what they see on screen is also what they get when they print and px seems to be the best at producing consistent results across all platforms.
Edited by - pageoneresults on 02/28/2002 11:36:28
| |
|
|
|
Dompros
Posts: 161
Joined: 2/14/2002
From: CA USA
Status: offline
|
RE: W3C Validation - 2/28/2002 17:38:25
An ignorant question...
Don't take this as coming from some wiseacre, I'm serious.
I just punch out code, no studying, no CSS, nothing special. Just routine procedures.
Here is a page I sent to the FTP server.(no other other pages on this site are involved in this test) and I'm not claiming that it's a great page,(just an example)
http://www.quickerlink.com/index.html
I hit the button on the WC3 valadation site and it answers "no errors"
I paste the wC3 4.01 gif,code into the page and that's it.
I've been doing this with ordinary HTML code for some time now, and I've never had a page that I couldn't validate.
I don't understand the need for validation, except to check for code errors. Many times I've left in the code that didn't validate, because there was no real reason to remove it... it did what I wanted, and worked flawlessly, with browsers and search engines.
What I've found, most of the time, when I validate a site, I must abandon an effect or script, that I may wish to use,in order to sucessfuly validate the page. So I don't validate it.
There are other accurate programs and utilities for validating code, that also allow the page to work perfectly with most browsers and search engines...
I don't get it, and maybe some other members and visitors don't either.
Could some of you that do get it...
Explain it to the rest of us?
Regards, Robert
"Lung Tik Chuan Ren"
The sign of the Dragon
| |
|
|
|
Mojo
Posts: 2441
From: Chicago
Status: offline
|
RE: W3C Validation - 2/28/2002 18:48:42
pageoneresults:
Good post.
Joe
| |
|
|
|
Gil
Posts: 7533
From: North Carolina, USA
Status: offline
|
RE: W3C Validation - 2/28/2002 20:54:51
quote:
Could some of you that do get it...
Explain it to the rest of us?
Hard to believe but, there are people in this world who get satisfaction from doing things "right", not just "good enough to get by". IE: Master Carpenters - Diamond Cutters - Artist - Sculpters - "Live" Pilots - "Old" Paratroopers
Gil Harvey
The Host Factory
Resellers are our Specialty
Find a Web Professional
| |
|
|
|
Dompros
Posts: 161
Joined: 2/14/2002
From: CA USA
Status: offline
|
RE: W3C Validation - 2/28/2002 22:58:42
Gil...
So, if I'm to understand this correctly, it's really not about W3C HTML 4.01 validation, Which can be done by nearly anyone.
It's about attempting to attain perfection?
Is that what it's all about?
All one needs is a glance, at the page that I listed and it's immediately obvious that W3C 4.01 trans. validation, doesn't result in perfection.
Seems that your reply, points to creating perfect code or sites.
If that's the case, it's not hard to understand at all. Just difficult for most to achieve.
As I said, "ignorant question"! But, as I've been told here, "there are no stupid questions"... If one doesn't ask one doesn't learn.
Robert...
After thinking this over, I've concluded that this thread is about "Brain Power"
Rather than validation in and of itself.
"Lung Tik Chuan Ren"
The sign of the Dragon
Edited by - dompros on 03/01/2002 00:28:39
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: W3C Validation - 3/1/2002 1:32:44
Thanks everyone! I was hoping to see a couple of you forum bigshots post a reply, I appreciate the feedback greatly!
Gil summed up my feelings here...quote:
Hard to believe but, there are people in this world who get satisfaction from doing things "right", not just "good enough to get by".
I strive to do things perfect. I'm a perfectionist. My peers call me anal. I like to set examples!
Its not just about validating. Its about using CSS1 and CSS2 to its full potential and being able to produce a site that validates 100% to the W3C standards. Its about building web sites that get noticed. Not just by the visitors, but by the resources that brought those visitors.
Did you notice that all javascript and css were in external files? Did you notice how the <div>'s were positioned? Did you notice that there is a <h1> tag right after body tag? These are all extremely important factors when optimizing a web site for the search engines. Look really close at the code of that page and you'll see what I mean. It doesn't get much cleaner than that!
| |
|
|
|
Dompros
Posts: 161
Joined: 2/14/2002
From: CA USA
Status: offline
|
RE: W3C Validation - 3/1/2002 2:01:33
Thank you for repling to some of the questions I've posed here!
I personally don't have the training, experience, nor abilities, to even carry on an intelligent conversation about what you're doing.
There are probably others in the forum who are at my level of competence.
I could envision, that some of us could go off on a tangent, validating everything that we have done, thinking that somehow, doing that would correct, fix and make up for our lack of training and experience.
I would hope that the advanced members and visitors would clairify this, and that is, that it takes training, experience and alot of work to accomplish what you are able to do, and not just using a validation program...
Regards, Robert
"Lung Tik Chuan Ren"
The sign of the Dragon
| |
|
|
|
Spooky
Posts: 26606
Joined: 11/11/1998
From: Middle Earth
Status: offline
|
RE: W3C Validation - 3/1/2002 2:15:46
quote:
Did you notice that all javascript and css were in external files? Did you notice how the <div>'s were positioned? Did you notice that there is a <h1> tag right after body tag? These are all extremely important factors when optimizing a web site for the search engines. Look really close at the code of that page and you'll see what I mean. It doesn't get much cleaner than that!
I did, I looked at the code and even had to do a search of tags to find out how youd placed all the images at top for navigation.
Like anything, its not a case of because you have to, its because you can. I get the same satisfaction trying to optimise parts of the forum. You dont have to, but if even one person comments, it can make it all worthwhile.
I better practice my css :)
§þððk¥
Database / DRW Q & A
VP-ASP Shopping cart
Spooky Login
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: W3C Validation - 3/1/2002 2:19:32
quote:
I would hope that the advanced members and visitors would clairify this, and that is, that it takes training, experience and alot of work to accomplish what you are able to do, and not just using a validation program...
You are quite correct. Validation was just the icing on the cake. I posted this topic in the advanced forum because I felt that is where it belonged. Some of this was greek to me not long ago and I took the initiative to study it, test it and implement it.
I came here to share the experience in hopes of someone else following my lead. Just working with css is a big step for most. Working without tables is a really big step for all of us, even myself. For some reason, as I age, this stuff becomes easier to grasp and I find myself wanting to be at the cutting edge when possible.
Thanks for the rant, I enjoyed the topic immensely as I hope others have. I'll keep you guys/gals posted on my progress. When the entire site is converted to pure css, I'll provide an update post in this thread.
When I do the conversion to xhtml, I'll provide another update. I plan to address that conversion in the next couple of months.
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: W3C Validation - 3/1/2002 2:25:05
quote:
I did, I looked at the code and even had to do a search of tags to find out how youd placed all the images at top for navigation.
Hey Spooky, that is the beauty of absolute positioning. Everything is being controlled through the css file. When you assign a class to your <div>, it references the css which is telling it to be positioned in an exact spot on the page.
In the instance of the graphics at top, those are in a header class which is specified as being 0px from the top and 0px from the left. All the images are also being positioned through the css. When I insert my <div class="header"> tag, I can put that anywhere I want because the positioning is controlled through the css.
Once it clicks, you'll be converting too. Here's a little snippet from the css...
div.globe-i {
position:absolute;
left:0px;
top:0px;
width:151px;
height:132px;
}
div.seoconsultants-i {
position:absolute;
left:151px;
top:0px;
width:186px;
height:107px;
}
div.Internal-03 {
position:absolute;
left:337px;
top:0px;
width:413px;
height:14px;
}
div.search-i {
position:absolute;
left:337px;
top:14px;
width:58px;
height:18px;
}
div.about-i {
position:absolute;
left:395px;
top:14px;
width:55px;
height:18px;
}
div.contact-i {
position:absolute;
left:450px;
top:14px;
width:60px;
height:18px;
}
div.resources-i {
position:absolute;
left:510px;
top:14px;
width:81px;
height:18px;
}
div.site-map-i {
position:absolute;
left:591px;
top:14px;
width:70px;
height:18px;
}
div.submit-url-i {
position:absolute;
left:661px;
top:14px;
width:84px;
height:18px;
}
div.id01-i {
position:absolute;
left:745px;
top:14px;
width:5px;
height:18px;
}
div.search-engine-optimization-i {
position:absolute;
left:337px;
top:32px;
width:413px;
height:75px;
}
div.Internal-12 {
position:absolute;
left:151px;
top:107px;
width:599px;
height:25px;
}
div.header{
position:absolute;
top:0px;
left:0px;
width:750px;
visibility:visible;
}
div.body{
position:absolute;
top:127px;
left:151px;
width:599px;
visibility:visible;
}
Edited by - pageoneresults on 03/01/2002 02:26:27
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: W3C Validation - 3/1/2002 2:29:36
I forgot to mention, this site was built entirely in FP 2002. I even put my static navigation elements in an include. I then used css to position the include through a <div> class tag. The FP bashers just got smacked in the face! FP is capable of wonderful things in the right hands and there are quite a few here who have the right hands!
P.S. I might want to mention that these techniques should not be tried at home. Consult with your FP therapist before attempting any of these strategies.
Edited by - pageoneresults on 03/01/2002 02:31:59
| |
|
|
|
PBailey
Posts: 907
From: San Antonio, Texas USA
Status: offline
|
RE: W3C Validation - 3/1/2002 3:43:17
Very interesting. Also a little scary since I just managed to learn css! Thanks for posting this.
Paula
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: W3C Validation - 3/5/2002 1:08:34
Just a quick update. I've converted the site to CSS and Absolute Positioning this evening. I now validate 100% for HTML 4.01, CSS1 and CSS2.
http://www.seoconsultants.com
I did need to use <table> tags in some areas for form elements and such. For the most part, the site is about 95% CSS, the rest basic html, and I do mean basic. My goal was to trim as much code bloat as I possibly could while creating a site that is highly optimized for the search engines.
Once you start working with the <div> tags and CSS, you'll never want to go back. My next step is to address the remaining <table> tags and replace those with <div> tags that are relatively positioned. We've mostly talked about absolute positioning and there are two others; relative and static. I think there may be a fourth called fixed. I'm researching the materials available and will have test pages up in a week or so.
Happy Positioning
Edited by - pageoneresults on 03/05/2002 01:10:38
| |
|
|
|
paperfish
Posts: 184
From: None
Status: offline
|
RE: W3C Validation - 3/5/2002 8:26:22
pageoneresults,
Thank you for raising the bar on the structural side of our work.
Spooky,
In light of the foregoing discussions - both technical and philosophical, you may want to consider a new class of forum membership: Zen Member
Regards
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: W3C Validation - 3/6/2002 12:22:45
quote:
In light of the foregoing discussions - both technical and philosophical, you may want to consider a new class of forum membership: Zen Member
Good one! That beats being an average member!
Well, I'm at it again. Numerous clients and prospects who are in the know have been following my progress with CSS and Absolute Positioning. So much so, I now have a waiting list for redesign and reoptimization of html code along with a few new clients who see the writing on the wall when it comes to the Search Engines.
My newest endeavor is located at www.davidsonstaffing.com/working/index.htm. That link will take you to the index.htm which uses an image to fill a <div> and then I've positioned a <div> on top that containing the navigation links. When you click through to Gradient 2 and 3, there is now a tiling background image that is assigned to that navigation <div> only. How did I get it to work in NS4 you ask? Here is the code...
div.gradation2 {
position:absolute;
left:0px;
top:98px;
width:189px;
height:1100px;
background-image:url('http://www.davidsonstaffing.com/working/images/gradient-tile.jpg');
layer-background-image:url('http://www.davidsonstaffing.com/working/images/gradient-tile.jpg');
}
Note: The layer-background-image: is the workaround for NS4. Unfortunately it is the only attribute in my CSS that does not validate, bummer! I'm on a mission now to see if there is another workaround that will validate. Any suggestions would be appreciated!
Please, don't let this stuff scare you. If you know how to use tables and are familiar with positioning things on screen using coordinates like 20px from the top and 100px from the left, then you are ready to start with basic positioning using CSS. I'm no guru at this but I picked up the basics and with the type of sites that I build, this is the stuff dreams are made of.
Edited by - pageoneresults on 03/06/2002 12:26:00
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
