A website seems to have different values for every business. For some businesses it is simply a fashion of following the current Internet trends while for others, it is important aspect of their marketing strategy.
Businesses who consider their websites to be a part of their marketing strategy should consider "re-designing" their websites with <div> (pronounced ‘div’) tags. In plain English, this means implementing websites without using <table> for positioning and layout. <div> tags using style sheets, or commonly referred to as CSS (Cascading Style Sheets) allow the design of the website to be independent of the data. Positioning, layout, height and width of columns or rows, styling including fonts, colours and backgrounds can all be put into the style sheet leaving only the information and simple <div> tags code on the actual pages.
At present, almost all websites with high traffic inflow are designed using <div> tags. This article explains some of the benefits and drawbacks of using <div> tags to design websites.
Benefits of using <div> tags and CSS only
1. Websites load faster
<div> tag based websites renders on your browser much faster as they are lighter in weight. The traditional <table> based sites with its nested <table> are bigger in file size because of the amount of lines of extra code to create the desired layouts. <div> tags however, are controlled through CSS and therefore require less code and keeps file sizes to a minimum.
2. Search Engine friendly
Website designed using CSS is SEO (Search Engine Optimisation) friendly as designer can keep the main article more on top enabling search engine to find your main content easily. As with <table> based design structure needs to be followed.
3. Save bandwidth
Website designed using <div> tags have smaller files size this means saving on your bandwidth. Imagine a high traffic website, whereby every page browsed by visitors you save small amount on bandwidth. This small amount of bandwidth saved could be significant at the end of a month or over a period of time.
4. Cleaner code
website designed using CSS and <div> tags produces cleaner code and forces designer/developer to write one too. Having a cleaner code allows search engine crawlers all the more easier to read actual content from your website.
5. Easier to maintain
websites designed using <div> are easier to maintain as layout are controlled from a single file. Making modification on a single file will reflect changes on all pages of website where that particular CSS has been used. Whereas in <table> based design you may have to make changes on all pages. For eg. let say you have a banner advertisement on all pages with certain height and width, and you wish to change this banner size then you will have to individually modify dimension (height and width) of your <table> on all the pages to reflect your new banner size.
Drawback
1. Need a good understanding of CSS
Websites created using <div> tags are usually hand coded. Popular tools such as Macromedia Dreamweaver or Microsoft FrontPage will not be able to produce clean coded websites with <div> tags only. This means that the developer/designer requires a good understanding of the technology and experience writing CSS.
2. Tricky CSS
Care must be taken when writing the design aspect of the website. CSS has properties such as padding and margins that are interpreted differently on various browsers. Not adhering to W3C standards could result in the site looking vastly different on various browsers.
3. Takes more time to design
The hand coding and diligence required for creating design layouts using <div> usually takes more time than compared with <table> based websites.
If you already have a website, then exploring design using <div> tags and CSS only could take your website one step ahead. Search engine friendly pages, faster load time and easy maintenance all contribute to giving your website that extra edge towards your marketing strategy.
[+/-] About the Author
Suraj Rai is a web developer at NETable with over 7 years experience in the web industry and manages projects at NETable.
The above article is an expression of author’s personal views. Any individual or organization wishing to excerpt and/or re-use article from this website, must contact the author for permission and reprint requirements. Content on this article may not be used for any commercial purpose or personal use without the express written permission of the author.
|