|
Web Standards, Browsers and Designing for the future
|
James Opiko
|
Oct 02, 2006 03:55 PDT
|
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://tinyurl.com/j3noa )," 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)(
http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx ) 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 (
http://tinyurl.com/b245h ) 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.
<b>How should you go about it?</b>
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 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 of
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 ( http://tinyurl.com/p336d ) and the
Internet Explorer Developer Toolbar ( http://tinyurl.com/dkmm9 ). 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 ( http://tinyurl.com/pktw5 ) you can eliminate the need for
quite a chunk of standalone desktop applications.
After designing your Web page remember to us a MarkUp Validation Service
( http://validator.w3.org/ ) 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 (
http://www.w3.org/QA/Tips/Doctype ) declaration in your document -- at
the top of your web page before the <HTML> tag:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
Note: remove space after " < " and before " > "
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 browsers 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 (
http://www.w3.org/QA/2002/04/valid-dtd-list.html ) 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 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.
=================================================================
NOTE: This article may be re-printed freely provided that a RESOURCE BOX
containing the author's name and source of the article (clickable link)
is included:
http://www.afroarticles.com/article-dashboard/Article/Web-Standards--Browsers-and-Designing-for-the-future/3408
=================================================================
|
|
 |
|
