SiteProNews: October 6, 2006 Feature Article

To Print: Click here or Select File/ Print from your Browser Menu.


  Article printed from SiteProNews: http://www.sitepronews.com
  HTML version available at: http://www.sitepronews.com/archives.html
Web Standards, Browsers And Designing For The Future
By James Opiko (c) 2006

At present, a vast majority of webmasters are designing for IE
(Internet Explorer) 6, which is not as W3C standards compliant
as is FireFox, Netscape, Safari and Opera.

In my article - "The importance of sound website design & search
spiders to Internet Marketers (http://www.goarticles.com/cgi-bin/
showa.cgi?C=237745)," I mentioned the importance of a designer
being cognizant of the fact that web browser standards are not
yet fully harmonized - a web page that looks great in Internet
Explorer (6) might look hideous in a Mozilla based browser like
FireFox or Netscape.

I also noted that with the explosion of devices with which to
serve Internet applications, compliance with W3C standards has
become critical.

When the final release for IE 7 for Windows XP, Server 2003 &
Vista is launched, hopefully before the end of 2006, the tables
will be turned, so to speak.

Internet Explorer 7 will be more standards compliant and your
HTML code will be subject to much more rigorous interpretation
than is the case with IE 6, consequently some web pages that
look fine in IE 6 might not look the same IE 7.

In IE 7 Microsoft has made a solemn effort to fix the browsers
acquiescence to W3C standards and CSS(Cascading Style Sheets)
compatibility. CSS interpretation as recommended by W3C has
been improved tremendously giving designers and developers more
leverage in functionality for cross-browser design.

Microsoft asserts that they are taking W3C compatibility issues
seriously.

Concisely what this means is that IE 7 will tend to interpret
your web page code more scrupulously than before.

Therefore, if you have been designing your pages and have not
bothered to check how they render in W3C Standards Compliant
browsers like FireFox, you may be in for a rude shock when IE 7
finally rolls out.

If you have not been incorporating W3C Web standards in your
design strategy you may need to re-design for IE 7.

How should you go about it?

Design for "strict" browsers like FireFox first. Not only is
FireFox a more standards-compliant browser but it is also the
primary competitor to Internet Explorer. A contender backed by
Google's marketing machine -- and therefore, is not likely do
"a Netscape" on designers.

Prior and up to IE 4.x, Netscape was the leading browser in the
market with almost 80% of the market, but in a bid to force the
issue culminating with proprietary goofs by AOL to whom
Netscape sold out, they screwed up big time with versions 4 up
to 6. A bitter war of attrition with Microsoft in the late
nineties did not help either.

Microsoft grabbed the opportunity and gobbled the Browser
market overnight.

With version 7+ Netscape has been revived. How well it will
compete with IE and FireFox remains to be seen.

I will be the first to admit that most the web pages I have
built in the last several years are not always standards
compliant...and so are ninety five percent of other web pages
-- as I stated in my previous article, "if strict W3C standards
were to be enforced in browsers, most websites would go out of
business."

To design for FireFox a designer needs to combine Valid CSS
(Cascading Style Sheets) for "look and feel" and W3C compliant
HTML for web page structure.

The combination of these two design strategies is powerful in
that it elicits tremendous flexibility, ease of maintenance and
opens up extensive possibilities in website design. The benefits
are rewarding, and every webmaster should attempt to utilize
this two pronged scheme in their design routine.

Making changes to and/or styling a site designed with CSS is
much easier and more elegant than messing around with a
traditional table-based design.

CSS may look intimidating to a first-timer but once you
familiarize yourself with the basics you can progressively
harness the power of CSS to your full benefit. In addition, most
web page design tools such as Dreamweaver or FrontPage have
built-in modules with which you can automatically generate CSS
code, which you can then view in a plain text editor for study
purposes.

To aid you in your CSS endeavor you need the following
developer tools: Web Developer Extension for FireFox and the
Internet Explorer Developer Toolbar. Great time-saving tools
for creating, understanding, and troubleshooting Web pages.

As a matter of fact, by installing some of the 1,500+ available
FireFox extensions you can eliminate the need for quite a chunk
of standalone desktop applications.

After designing your Web page remember to use a MarkUp
Validation Service to check whether your Web page conforms to
W3C recommendations. If there are errors, the validator will
notify you of them and suggest corrections.

Also, remember that when designing using W3C standards
guidelines a lot of code(tags) that were very valid in the
"Pre-Standards" era have completely depreciated and will be
ignored completely by browsers. If you ignore these errors
during validation, your web pages might not render correctly.

In many instances, you may never be able to achieve 100% HTML
or XHTML validation. In such cases you may want put the
following DOCTYPE declaration in your document -- at the top of
your web page before the tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

A "Document Type Definition" or DTD supplies Web browsers with
information about which (X)HTML specification your web page is
built upon, which instructs the Browser how to render the page
for viewing.

In the example captioned above a standards compliant browser
will interpret your web page as an HTML 4.01 document, and
because it is marked as "Transitional," it will display it in
"quirks mode," meaning that the browser will forgo the strict
standards mode, and display your page like it would be
displayed in older "non-strict" browsers, while still
supporting any tags developed after IE 4, Netscape 4 and
others.

On the contrary, the following DOCTYPE declaration tells the
standards compliant browsers that your web page should be
displayed in strict compliance with the DOCTYPE declaration.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

A complete list of recommended DTDs can be found at the W3C
Website.

If you leave the DOCTYPE out, the browsers automatically switch
to "quirks mode," therefore, it is important to include the
DOCTYPE declaration on every web page that you build in order
for it to be rendered correctly.

If your Web pages render well in FireFox at present you
probably will not encounter any major problems in IE 7 other
than minor adjustments here and there. However, I think a
realistic designer should at least make a meaningful attempt to
follow W3C guidelines for it is the correct way forward.

Do it now so that you will be ready for the future...re-designs
and total overhauls are a time consuming and painful process. A
process, which becomes much easier if your initial design
incorporated structurally clean and modular (X)HTML with CSS
compliance.
================================================================
James Opiko writes for http://AfroArticles.com . Get free Online
Coding Tools - http://www.clubafrika.com/webmaster-tools/coding/
PHP-NukeTools.shtml, Audio Code Generator Software -
http://www.apondosystems.com/products/cb-top/
Audio-Code-Generator-Software.html for your website, emails &
newsletters.
================================================================

Copyright © 2006 Jayde Online, Inc.  All Rights Reserved.

SiteProNews is a registered service mark of Jayde Online, Inc.