.: Benefits of Tableless Web Sites
By:Ritesh Patel
Category:Home / Internet / Web Design
Let's begin with the benefits of a tableless layout. These are only in the order that I feel they should go in, some things are more important to other people, so rank them as you will.
Forces You To Write Well-Formed Code
You cannot have a properly made tableless layout, and use improper and non-standard code. Well, let me correct that - you can (technically you can do it) but it defeats the whole purpose. When you are creating a tableless design, you should be using standards compliant code. I think that anything that makes you get into the habit of always writing clean code is a good thing.
Faster Loading Time
This is absolutely a benefit of a tableless layout, and for several reasons. First, on a fundamental level - tables load slowly. For the most part, unless you set the height and width of your table elements, all the text has to be loaded and rendered BEFORE the table sizes itself to the page. Of course, this is what so many people loved about tables isn't it? The fact that they were so easily sizeable. The downside is how much more time they take to load.
Okay, so the solution to that loading time is to set all the values explicitly, right? So now we see another downside. Code clutter that increases loading time. First of all, just by themselves, tables take allot of code. How many td open and close tags does your average table based layout have? Tons. Having to set all the values explicitly only adds to the page size and loading time.
Easier to Read Code
If you are using standard code, semantic document conventions, and a tableless layout, your code can be so clean that it looks practically like just regular text with a few extra symbols.
That is a great benefit because it not only makes it easier for you to update, but it makes it easier for a non-technical user to make small alterations to. Additionally, if you work as a web developer in a more freelance capacity, it is common for there to be a full-time web developer who has to maintain that site. Clean and simple to read code makes that an easy transition. We like it when people leave us easy to understand code, right? Let's return the favor.
Print Alternate Views
When you create a page using a table-layout, you are rather unfortunately locked into a certain layout. Developers who have created table-based websites, as most of us have at some point - particularly if you were in the the industry before the big tableless movement, know that you often have to create a separate printable version of your pages. This can be, needless to say, quite tiresome.
Ease of printing style control is a huge benefit with a tableless layout. You can easily create a single new printing style that applies to all your pages, instead of making them individually. That alone is a huge time saver, but there is more.
While you can control all elements with this approach, the biggest key is organization of information within the page itself. Using the example, let's assume that the display order we want all our pages to print using the following order: The page header first, the content next, the special news after that, then the link list, and then the footer. However! We still want it to display as it would normally when viewing (meaning the header at the top, the links on the left, content in the middle, news on the right, and footer at the bottom). With a table-based layout, you would have to create a new page to do that special printing organization because the print style will read your columns left to right. With a table-less layout, you are not bound by this. You can order the content in your page however you like, and still control the way it looks... all by using the CSS only!
Additionally, because we can put the content in whatever order we want in the HTML, and then move the content blocks around for website viewing using CSS - we can have ultimate control over presentation.
That is very important because the clean code, and ability to alter presentation, means that your site can be viewable by someone on a small mobile phone screen, a PDA, in all text format can be perfect for someone using a text-to-speech reader, or a Braille device, and since the code is clean, it is both backward compatible (with older browsers seeing mostly just the text) and forward compatible with new technologies to come. The flexibility and organization leads to being able to create a powerful website that takes advantage of some of the possibilities with XHTML, and adding in support in your pages for micro formats, or taking advantage of using RSS / ATOM feeds from your site to develop a base of regular readers.
Search Engine Optimization
Due to the fact that you can organize your most important content at the top of your page, without affecting the layout, your page can be better optimized for search engines. For instance, say that I have a navigation bar on the left side of the page that lists tons of parts of the site that are actually great keywords. I could move that navigation bar code higher up in my actual HTML, without changing the layout, because I'm using the CSS to position the navigation where I want it.
Those search engines can also more clearly find common words throughout your document without having to filter through code. Search engines prioritize websites that have a higher content to code ratio, so putting all your style elements into your external CSS style sheet makes your site highly content based to a search engine. Tableless layouts, as previously mentioned, decrease page size and loading time - another bonus to search engines.
Additionally, being able to take advantage of the RSS/ATOM feeds (see the section directly above) will aid you in some new technology for site indexing as used by all search engines called ROR. (ROR is an XML format summary of your website, like a sitemap, that search engines can access for additional information about your website.)
Presentation Flexibility
Making changes to a CSS based Tableless layout is simple. You can alter the CSS file only, changing as many styles and graphics as you want. The affects cascade through all the pages on your website, and eliminate the need for manually updating many pages.
Selling Yourself On Standards
Sometimes knowing how to code for standards, and create flexible tableless layouts is not enough. There are some web designers who meet with difficulties from their management. Most often those difficulties are rooted in the management being unaware of the benefits of using tableless content and CSS driven layout.
If you want to design for standards, but you work for a company that is not very forward-thinking in allowing you the time to work on the changes -- try this: Make them think about their pocket-book. Point out the cost saving benefits.
For instance, try grabbing a single page of existing code. Clean it up to standards. Compare the page size to before (including image optimization), and count the difference in bytes saved. Multiply that across the number of site pages, and the number of days per month. Then explain to them the amount of bandwidth cost saved monthly if this was done across the whole site. If that isn't enough, show them how quickly you can make changes to a website once it is CSS driven, and push the idea that you will be able to change the site more rapidly when there are needed updates, and you will have more time to focus on adding in new functionality to the site - instead of spending your time doing maintenance.
Article keywords: tableless websites, tables in html, table coding, html tables
Article Source: http://www.articles32.com
About Author:-
Ritesh Patel is a web designer and the owner of Graphics Design Centre (www.graphicsdesigncentre.com). He creates and redesigns websites for small businesses and encourages his clients to get involved with their customers via their site.
.: New Web Design Articles
1). HTML Might Become Obsolete
Web designers are beginning to dump HTML in favor of more versatile web programming languages
2). Macromedia Dreamweaver: An Introduction
Getting started with your first web page can seem very daunting indeed. Macromedia Dreamweaver is the industry leader in web editors, but knowing where to start and what you need to know can be a little confusing at first.
3). Finding A Good Web Designer
Avoid the mistakes I made when I hired someone over the internet to design my web site
4). Top Tips for Getting Free Websites
There are millions of opportunities of earning money online, but for that you frequently need to have a web site and there are many people interested in how to build a web site online for free. So whether you want to build a free business web site or to build a Yahoo-like web site, you can be sure there are plenty of online guides, such as this, to take you step by step through the process.
5). Is Your Web Site Driving Away Visitors?
Much has been written about optimizing your web site for search engines, but less emphasis is placed on usability. Optimizing for usability and for search engines is not a contradiction.
6). Choosing a Web Designer
freelance web designers are rip-off artists
7). HTML Sitemaps Are Still Important
An html sitemap is one that humans and search engines both can read. Google sitemaps are important too, but they are specific to google and are read only by a search engine.
.: Top Web Design Articles
1). Advanced Joomla Templating (pt1) Using Module Class Suffix
an article from User Written Resources
1. duplicate the styles already used for the particular module, adding a suffix to each style name. this will definitely include some of the following;
1. .module {} 2. div.moduletable {} 3. div.moduletable h3 {} 4. table.moduletable {}/li> 5. table.moduletable th 6. table.moduletable td
and can include other styles used on the content in that section, such as;
1.
2). How To Make a MySpace Layout That Stand Out
If you are a MySpace user, you have learned what an easy to read and fun profile looks like. The only problem is, you may not know how to create or find out. Most of the time when you see an awful MySpace layout, it's because its sloppy, hard to read, or has annoying links you didn’t even see. That is because since MySpace has been growing so much, so have the layout sites.
3). Professional XOOPS theme design - What to look for
In general, prices for theme design work will range depending on a number of factors. If you don't mind the designer releasing the theme on their site for others to purchase, then you can expect anywhere from $20US to $50US for your theme. If the theme must be a one of a kind theme that only you use, you could expect to multipy the fee by at least 10x.
4). Adsense: The Smart Investment
Over the last 2 years, We have been building a Virtual Adsense Empire of over 500 websites and making some good money. We've also been building content sites for clients using the same system. The system we use is not something that produces 1000's of sites with a click of a button, our system does not build spam websites, nor does it produce the same sites you see over and over and over again.
5). Irish Graphic Design Industry
Graphic design is the use of color, light, balance, contrast, emphasis, proportion, proximity, repetition, texture and a plethora of other elements to create a work of digital art that is pleasing to the eye. Graphic design is about seamlessly molding image and text to convey a theme, message, or often advertise a product or service. Graphic design dates back to prehistoric times.
6). How to Create a Splash Page for Your Website?
These splash designs prove to be quite popular, especially among the designers as they allow the designer to show their skills in flash and any other technology on a single page. The splash page design involved in the splash page will be one that is very attractive to the eye of the viewer. Its main intention lies in captivating the viewer the moment he looks at it.
7). Does Your Web Design Include Background Music?
When you design your website, you may wonder whether or not you should include background music in your web design. The answer to this requires you to ask two additional questions: