Web Standards And Designing For The Future

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.

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 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 us 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:

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.

If you leave the DOCTYPE out, the browsers automatically switch to “quirks mode,” therefore, it is important to include the OCTYPE 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.

I hope you have learnt some valuable tips in this article. The importance of adhering to W3C standards now has become even more important than it was ever before. So this is the right time to make your design adhere to the standards because you never know when IE7 rolls out and you end up screwing up the look and feel of your website..