Visual Basic Programmer

Website Development

Website Design Standards

It is hard to believe that the World Wide Web is only 25 years old. It has developed at a helter-skelter pace, and has become a dominant technology in a short space of time.

The evolution of the technology has had its dead-ends and wrong turns, as competing interests tried to dominate and push their own interests. The software industry had to adopt some common ground and web standards became a necessity.

The World Wide Web Consortium

The World Wide Web Consortium (W3C) was founded in 1994 by Tim Berners-Lee, the original architect of the World Wide Web. The W3C, an international consortium of companies involved with the Internet and the World Wide Web, was created to ensure compatibility in the adoption of standards. The Web interoperability standards and guidelines include HTML, XHTML and CSS.

Compliant web design ensures that:

• The Website is accessible from all web browsers
• The Website is accessible from devices like mobile phones
• Each web page is search engine friendly
• Each web page is consistently presented

This Website was successfully validated by the W3C.

Style Sheets

Web Style Sheets allow the separation of presentation (the visual layout or style) from content (the text) in designing a web page. This design approach supersedes the original concept of HTML, where a page's mark-up defined both style and content.

The style is defined in the HTML or in an external Style Sheet file using the language Cascading Style Sheets (CSS). CSS is used to describe the presentation (colours, fonts, borders, margins, etc) of a document in the HTML mark-up. CSS is the recommended way to add style to Website pages.

The Benefits of CSS

The separation of style and content has many benefits.

• Speed – The initial page load time includes the time to download the HTML and the Style Sheet. Thereafter the Style Sheet file will be in the browser's cache, and the reduced size of each page will result in load times that are quicker than pages without a Style Sheet. Also, a Style Sheet will eliminate code that is duplicated in each page.
• Search Engines – Slow Websites will be penalised by the Search Engines. Faster page loads makes the Search Engines more efficient. They will be able to crawl a greater number of pages in the allotted time. And with more pages indexed there will be a greater chance of your Website being found.
• Maintainability – Having the presentation style in a file significantly reduces maintenance time. It also reduces the chance of error and improves consistency. A change (font, colour, margin etc) to the CSS file need only be made in one place, to affect all the pages in a Website. The alternative approach of using CSS embedded in each individual page, is time consuming and error-prone. It should only be used for presentation exceptions.
• Printing – A different Style Sheet should be used to control printed pages. This will allow the use of a different font, font size or font colour for the printed page. It can also be used to exclude different sections (like the menu or a footer) from the printed page.
• Consistency – Sites that use Style Sheets with either XHTML or HTML are easier to modify so that they appear similar in different browsers. Headings, images, paragraphs and lists all receive consistently applied styles from the external Style Sheet.

The Disadvantages of CSS

There are issues when separating content and style:

• Old Browsers – Support for the older Browsers is difficult. The esoteric "Quirks Mode" is needed to overcome rendering bugs in older Browsers, like IE6. And IE6 still malingers on and on, with 5% of market share (IE6 has about 1% usage in Western countries). Microsoft will be supporting IE6 until 2014.
• Standards – There is a "Transitional" and a "Strict" adherence to the HTML and XHTML standards. The Strict standard goes overboard when enforcing the separation of structure and presentation. It does not allow tags such as "center" and "font" which make for a neater, simpler mark-up.
• Tables – There has been a condemnation of the usage of Tables by the CSS evangelists. Web page layouts call for tabular presentation of pages, such as side bars for menu navigation and header bars. Tables (although a bit inefficient) need to be used in these cases – they are simple to create and always work. Google handles page extractions better. The alternative is to have complex, esoteric and error-prone CSS that will not work for all browsers.
• Colours – CSS 2.1 allows only 17 named colours (black, silver, gray, navy, blue, aqua, teal, purple, fuchsia, white, lime, green, maroon, red, orange, yellow and olive). The rest have to be replaced by cryptic hexadecimal numbers (CSS 3.0 will define 147 named colours).
• Centring – Centring can be complex using CSS Strict, and is still useful with tables. Why, oh why, did they condemn this feature?

The HTML5 Standard

The W3C stopped developing HTML version 4.01 in 2009 and XHTML 2 in 2009. HTML 5 (taken over by the W3C from WHATWG, which was formed due to the slowness of W3C) is now the future.

New features handle bar charts, multimedia and graphical content, without having to resort to plug-ins like Flash or SilverLight. The new standard also has a range of tags to document segments of a page, like section, header and article.

Where are we now?

The standards are in a state of flux. It is all very well to agree to have standards, but how to get the interested software parties to agree on what they should be? HTML 5 and CSS 3 are slowly (very, very slowly) reaching finalisation. The W3C is expected to formally endorse the specifications in 2014.

Most Website designers see the value of using CSS. But the worst aspect of the W3C Website standards (besides taking forever) is that they are arcane. We definitely need standards, but uncomplicated practical functionality, that does not require years of study to fathom the intricacies.

Microsoft catches up

Internet Explorer 9 (IE9) is faster and will support CSS3 and HTML5. It has rounded corners and a new JavaScript engine. IE9 was released in early 2011.

IE9 has an improved scoring in the Acid3 test (a check on a browser's adherence to web standards) from 20/100 to 95/100 (the last 5% relates to declining technologies). IE9 also has a feature that will test the compliance of a website with IE9.

IE9 will only be supported on Vista and Windows 7. There will be no compatibility option for the large number of Windows XP users (about 38% of market share). So the full adoption of IE9 will take some time. Windows XP users mostly use IE8 – about 2% use Google's Chrome and about 20% use Mozilla's Firefox.

And the future?

HTML5 and CSS 3.0 will gradually achieve wide acceptance. Adobe Flash, which provides video, audio, animation and interactive content, will eventually be replaced by HTML5.

Internet Explorer 10 is soon to be released. IE10 will have Web Workers, Web Sockets, 3D Transforms and Animations, Application Cache and IndexedDB.

Windows XP usage will need 2 to 3 years to dwindle sufficiently, before the new features of IE10 can be adopted by Website developers.