Web Designing: Opting for XHTML 1.0 and CSS 2.0

Creating Web sites is no more a new thing for the current generation. Considering the fact that here in Mumbai | INDIA even a 9th standard student is taught HTML and making web-pages in school explains the fast transition the Internet and web in particular has made. Moving ahead and to the point, choosing the right version of HTML and CSS surely makes sense and speaks volumes while answering questions in future on compatibility, code maintenance, leveraging W3C and browser standards, performance tuning, etc.

Hence the topic – opting for XHTML 1.0 and CSS 2.0.

A nice practice

The best part about opting XHTML for your design over HTML 4.01:

• It is a stricter and cleaner version of HTML.
  
  

• Provides a rational methodology of writing CODE where XHTML bears the data and CSS bears the styling. Both of them should not be interchanged.

• All tags should be closed (including inline elements like <br>)

• Tags should be properly nested.

• The presentation part of the design/layout should be handled by CSS (internal/external/inline).

• The single part attributes in HTML 4.01 should also have values (example: selected=”selected” in <option>).

Now read the following point over the above carefully :

• XHTML 1.0 is W3C’s recommendation over HTML 4.01. XHTML 1.0 became a W3C Recommendation on January 26, 2000.

• All browsers currently (including IE6) support XHTML. Going ahead, it would be XHTML 1.0 and HTML 5 (implicitly follows XHTML) that will have it's presence on the web.

• Developing the design in XHTML makes it easy for others to understand the code and maintain it later. This in fact, is one of the top reasons why you should go for XHTML in place of the now obsolete HTML 4.01 and its variants.

• Quite a lot of elements, attributes have been deprecated. Check the list Here.

CSS 2.0 isn’t a shift in approach like XHTML was from HTML 4.01. It has some fine feature additions and enhancements over CSS 1.0. Here are some of them :

• CSS pseudo classes like :link, :visited, :hover, :active, :focus, :before, :after, :first-child, :first-letter, :first-line.

• The behavior attribute for Internet Explorer to customize events has become prominent.

• Border and Outline : Custom styling w.r.t. color, width, style for top, bottom, left, right border and outline.

• Text : Introduced the ‘ text-shadow ‘ property. This attribute ceases to work as expected in IE. This property is not recommended for use.

• Absolute positioning : The ‘ position ‘ selector can now take ‘ absolute ‘ property. You can use the top, bottom, left, right selectors to specify the coordinates and position an element on a page.
 

A good practice in using CSS is to use external style-sheets. This not only keeps the CODE compact but also helps making future modifications faster for the entire Website. Make sure you avoid internal style-sheets as much as possible.


Some interesting facts which you might not have noticed :

• Google recommends and advocates the use of XHTML 1.0 and CSS 2.0 but a closer look at the code of Gmail, Orkut and Blogger says a different story.

• One of the primary goals and concerns for a Web-site from a client’s perspective is to convert the existing code-base to XHTML 1.0 and CSS 2.0. This explains the reason why you should keep up to both the version for any new code.

• SEO (Search Engine Optimization) yields positive results if done on a code-base written in XHTML 1.0, CSS 2.0 and validated from W3C Markup Validation Service.

• Microsoft’s site is one of the fewest I found amongst the technology heavy-weights which correctly implements both the standards.

• No matter which programming language you use like PHP, C#.Net, Ruby, JSP, etc. on any platform say ASP.Net, J2EE, Ruby-on-Rails, etc. – what you eventually receive on the side of client is HTML, CSS and JavaScript (irrespective of versions).

Post a Comment

Web Designing: Faster Websites means more Business

Complex things are always easy and trust me (and Google), this proverb always stands true in the tenets of Web Designing. Increasingly, companies/projects/designers are opting for a Web 2.0 design but keeping the winning formula of Google in mind –

" Faster Websites means more Business "

If the Web stats. and most prominent examples are quoted like Facebook, GMail, Yahoo the above formula of Google indeed is true.


A matter of fact, your site speed also helps in Search rankings.





Read more on it Here.


One thing you’ll notice from the above article over the link - you don’t always have to go for fancy images, JavaScript, Flash content, etc. to attract the notice of your visitor. Using the above approach means using more space and bandwidth on the Web Server, and on the client side keeping him waiting for the entire thing to load which for everybody is frustrating and hence not recommended. Perhaps, that approach might work for your personal websites or blogs which witnesses at the most 1000 users per day but the same for enterprise projects isn't true!

Web Users have now matured and are looking for content moreover of their interest and trying to get their intent completed ASAP. Hence the approach –

“ A good and compelling design with faster loading ”

Perhaps, after the advent of XHTML 1.0 and CSS 2.0, things have indeed changed in approach and practice. You can read my post on it Here.

Post a Comment