To start, let's take a look at what CSS is and why it's so important to modern web design. CSS stands for Cascading Style Sheets and was introduced by the World Wide Web Consortium in late 1996 with the aim to separate web page content (written copy, images, multimedia, etc.) from presentation (fonts, colors, layout, page structure, etc.). Another chief goal of CSS is to improve and enhance web accessibility. Previous to the introduction of CSS, a web page's HTML markup defined both content and presentation.
CSS is usually contained in a separate file from an HTML web page. This is why CSS files are frequently referred to as "external style sheets". When an HTML page or other type of web page loads like .aspx, .php, or .cgi, the page calls the external CSS file and reads all of the presentation properties defined in the file. The CSS file tells the HTML page how to style the website's content and in the case of tableless web design, where to place it. With CSS, a web designer can set rules for the presentation of individual web pages or an entire site.
Traditionally, web pages were built using HTML with tables to layout the page structure and content. These cell based tables are very similar in form to a table found in Microsoft Excel and Word. An advantage of using tables is when used properly, it closely mimics the standard page layout in print media such as newspapers or magazine articles. However, as web technology has advanced and become more dynamic, a new era of design with greater possibilities has emerged. A new approach to designing and laying out web pages was created to break the constraints of structured table layouts. This approach is called CSS tableless design.
It's important to understand that traditional table based design and CSS are not mutually exclusive; CSS is frequently used by web developers using table based design to control the properties of tables and other items on their web pages. On the other hand, tableless design wouldn't be possible without CSS. However, instead of using tables, a tableless designer uses what are known as "DIV"s, which is short for "division". The name DIV is also derived from the HTML
tag that forms the DIV in the HTML code. A DIV is a box, or more accurately described as a container, where web content is housed. Similar to table based design where content is contained within the cells of the table, with DIVs the content is housed inside DIV containers. A DIV's properties are defined within the CSS file. CSS tells the DIV where to appear on a web page, its width and height dimensions, and its appearance i.e. if it should have a background color or image, a border, or whether it should even be visible. There are a wide variety of other CSS properties that can be applied to DIVs. Instead of being constrained by the rigid grid structure of tables, DIVs can be made any size and placed anywhere on a webpage including layered on top of each other. This is what makes CSS tableless DIV design so powerful. The layout and design possibilities are essentially endless. Even though the use of tables for website page structure is deprecated, tables still play an important role in CSS tableless design. Tables should be used for structuring and presenting tabular data. An example of best practices for using a table in your design that many novice CSS tableless designers overlook is when building a web form, for example a company information request form. Sure, it may be obvious that using tables is best used to present data from a database or the results of a form submission, but when laying out the form itself, tables will save you a lot of time. Therefore, it is important for CSS tableless designers to understand how to use tables and when they are a better and more efficient solution than using strictly CSS tableless design. It's been a hot button issue for some web designers as to which method is better, table based layouts or CSS tableless layouts. Let's take a look at 9 reasons why CSS tableless design performs better than traditional table based web design and why it has become the preferred method of modern web design:
1. CSS tableless design allows web designers the possibility to make more complex layouts and designs when producing a website. With table based layouts, web designers are confined to creating layouts that can be rigid, inflexible, and based on grids. CSS tableless based layouts, on the other hand, allow the designer to be as creative as their imagination allows them to be.
2. If your intention is to improve search engine rankings for your website, then a CSS tableless design will help your cause. CSS tableless designs result in smaller web page file sizes, a reduction in the ratio of code to content, and the elimination of the extraneous "junk" HTML markup that many table based web editors use. This makes it easier for search engine spiders to crawl through your website and results in a more favorable ranking in search engines.
3. By using CSS style sheets it is extremely easy to maintain visual consistency throughout your website. When using table based layouts, it is easy to lose this consistency because each web page's style, layout, and design are frequently hard-coded individually into every page. If you need to make a change to your website across all pages, you'll have to change the code on each individual page. With CSS, all pages can use the same CSS document for their layout and styles. If you change a property in the CSS file, the changes will be instantaneously reflected across all pages of your website.
4. Updating a CSS tableless website is easier and less time consuming than compared to table based designs. For example, if you want to change font sizes and colors within your website, your external CSS file can be simply opened and the necessary changes made without making the change on each and every page of your website. To change the look of your website for special or seasonal promotions, the entire website "look and feel" can be completely altered simply by changing properties in the CSS file without touching the HTML code of the web page.
5. Redesigning a website using CSS tableless design is faster and less expensive than redesigning a website using table based design. This is because CSS tableless designs have separate files for content and visual data including web page structure whereas table based designs mix layout information with content in the same file. By separating the visual data and layout from the content, a web designer is able to quickly and easily make changes across the entire website.
6. Table web page designs rely heavily on the use of spacer .gifs, a transparent image used to control blank space within a table based web page. Having to create a series of custom sized transparent images to organize your web page layout creates messy code and a rigid page structure that can't be easily changed. CSS tableless design eliminates this problem by using DIVs instead of tables which can be easily resized, positioned anywhere on a page, or even dynamically manipulated through the use of scripting languages.
7. A common advantage of using CSS tableless web design is a reduction in web page file size which equates to your web pages loading faster. When compared to a CSS tableless layout, a table based web page frequently takes twice as long to load. Also, the amount of bandwidth you will save using a CSS tableless based approach, especially as your website grows in size, can be vast resulting in a faster overall loading website while saving you money.
8. Using CSS tableless web design makes your website more accessible by making content consumption and site navigation easier for users. You'll also do a much better job of accommodating those with visual impairments and other disabilities. Screen readers, Braille devices, and special browsers for the impaired have fewer problems with tableless designs because they can control the CSS file making font sizes larger, or even modify the web page structure to make it easier to read.
9. CSS enables the web designer to attach multiple style sheets for different media types. If a potential customer visits your site with her Blackberry or mobile phone, a different CSS style sheet is called which dictates a completely different layout and styling for your entire website formatting it for optimal viewing on the small screen of the device. CSS tableless design is a great method for developing modern websites and offers many valuable advantages over traditional table based design. Using CSS tableless design will provide your website visitors better usability and accessibility, faster page load times with greater, more elegant design possibilities. For the web developer and website owner, CSS tableless websites are easier and less expensive to redesign, update and maintain. When given a choice, CSS tableless design will be the best option for most present day website designs.
Steve Kozyk is the CEO/ Founder of ITegrity, an SEO Web Development & Custom Web Site Design Company based in San Diego California. ITegrity focuses on many types of web development & design including health care web site development, corporate web development, small business web development, church web design, and Realtor web site design. http://www.itegritygroup.com
By Steve Kozyk
CSS is usually contained in a separate file from an HTML web page. This is why CSS files are frequently referred to as "external style sheets". When an HTML page or other type of web page loads like .aspx, .php, or .cgi, the page calls the external CSS file and reads all of the presentation properties defined in the file. The CSS file tells the HTML page how to style the website's content and in the case of tableless web design, where to place it. With CSS, a web designer can set rules for the presentation of individual web pages or an entire site.
Traditionally, web pages were built using HTML with tables to layout the page structure and content. These cell based tables are very similar in form to a table found in Microsoft Excel and Word. An advantage of using tables is when used properly, it closely mimics the standard page layout in print media such as newspapers or magazine articles. However, as web technology has advanced and become more dynamic, a new era of design with greater possibilities has emerged. A new approach to designing and laying out web pages was created to break the constraints of structured table layouts. This approach is called CSS tableless design.
It's important to understand that traditional table based design and CSS are not mutually exclusive; CSS is frequently used by web developers using table based design to control the properties of tables and other items on their web pages. On the other hand, tableless design wouldn't be possible without CSS. However, instead of using tables, a tableless designer uses what are known as "DIV"s, which is short for "division". The name DIV is also derived from the HTML
tag that forms the DIV in the HTML code. A DIV is a box, or more accurately described as a container, where web content is housed. Similar to table based design where content is contained within the cells of the table, with DIVs the content is housed inside DIV containers. A DIV's properties are defined within the CSS file. CSS tells the DIV where to appear on a web page, its width and height dimensions, and its appearance i.e. if it should have a background color or image, a border, or whether it should even be visible. There are a wide variety of other CSS properties that can be applied to DIVs. Instead of being constrained by the rigid grid structure of tables, DIVs can be made any size and placed anywhere on a webpage including layered on top of each other. This is what makes CSS tableless DIV design so powerful. The layout and design possibilities are essentially endless. Even though the use of tables for website page structure is deprecated, tables still play an important role in CSS tableless design. Tables should be used for structuring and presenting tabular data. An example of best practices for using a table in your design that many novice CSS tableless designers overlook is when building a web form, for example a company information request form. Sure, it may be obvious that using tables is best used to present data from a database or the results of a form submission, but when laying out the form itself, tables will save you a lot of time. Therefore, it is important for CSS tableless designers to understand how to use tables and when they are a better and more efficient solution than using strictly CSS tableless design. It's been a hot button issue for some web designers as to which method is better, table based layouts or CSS tableless layouts. Let's take a look at 9 reasons why CSS tableless design performs better than traditional table based web design and why it has become the preferred method of modern web design:
1. CSS tableless design allows web designers the possibility to make more complex layouts and designs when producing a website. With table based layouts, web designers are confined to creating layouts that can be rigid, inflexible, and based on grids. CSS tableless based layouts, on the other hand, allow the designer to be as creative as their imagination allows them to be.
2. If your intention is to improve search engine rankings for your website, then a CSS tableless design will help your cause. CSS tableless designs result in smaller web page file sizes, a reduction in the ratio of code to content, and the elimination of the extraneous "junk" HTML markup that many table based web editors use. This makes it easier for search engine spiders to crawl through your website and results in a more favorable ranking in search engines.
3. By using CSS style sheets it is extremely easy to maintain visual consistency throughout your website. When using table based layouts, it is easy to lose this consistency because each web page's style, layout, and design are frequently hard-coded individually into every page. If you need to make a change to your website across all pages, you'll have to change the code on each individual page. With CSS, all pages can use the same CSS document for their layout and styles. If you change a property in the CSS file, the changes will be instantaneously reflected across all pages of your website.
4. Updating a CSS tableless website is easier and less time consuming than compared to table based designs. For example, if you want to change font sizes and colors within your website, your external CSS file can be simply opened and the necessary changes made without making the change on each and every page of your website. To change the look of your website for special or seasonal promotions, the entire website "look and feel" can be completely altered simply by changing properties in the CSS file without touching the HTML code of the web page.
5. Redesigning a website using CSS tableless design is faster and less expensive than redesigning a website using table based design. This is because CSS tableless designs have separate files for content and visual data including web page structure whereas table based designs mix layout information with content in the same file. By separating the visual data and layout from the content, a web designer is able to quickly and easily make changes across the entire website.
6. Table web page designs rely heavily on the use of spacer .gifs, a transparent image used to control blank space within a table based web page. Having to create a series of custom sized transparent images to organize your web page layout creates messy code and a rigid page structure that can't be easily changed. CSS tableless design eliminates this problem by using DIVs instead of tables which can be easily resized, positioned anywhere on a page, or even dynamically manipulated through the use of scripting languages.
7. A common advantage of using CSS tableless web design is a reduction in web page file size which equates to your web pages loading faster. When compared to a CSS tableless layout, a table based web page frequently takes twice as long to load. Also, the amount of bandwidth you will save using a CSS tableless based approach, especially as your website grows in size, can be vast resulting in a faster overall loading website while saving you money.
8. Using CSS tableless web design makes your website more accessible by making content consumption and site navigation easier for users. You'll also do a much better job of accommodating those with visual impairments and other disabilities. Screen readers, Braille devices, and special browsers for the impaired have fewer problems with tableless designs because they can control the CSS file making font sizes larger, or even modify the web page structure to make it easier to read.
9. CSS enables the web designer to attach multiple style sheets for different media types. If a potential customer visits your site with her Blackberry or mobile phone, a different CSS style sheet is called which dictates a completely different layout and styling for your entire website formatting it for optimal viewing on the small screen of the device. CSS tableless design is a great method for developing modern websites and offers many valuable advantages over traditional table based design. Using CSS tableless design will provide your website visitors better usability and accessibility, faster page load times with greater, more elegant design possibilities. For the web developer and website owner, CSS tableless websites are easier and less expensive to redesign, update and maintain. When given a choice, CSS tableless design will be the best option for most present day website designs.
Steve Kozyk is the CEO/ Founder of ITegrity, an SEO Web Development & Custom Web Site Design Company based in San Diego California. ITegrity focuses on many types of web development & design including health care web site development, corporate web development, small business web development, church web design, and Realtor web site design. http://www.itegritygroup.com
By Steve Kozyk
0 comments:
Post a Comment