The Kwik-n-free CSS website template

A "mostly table-free" CSS template for web pages. Wednesday, January 7. Last edited: 2008.01.12

Here I am attempting to build a "universal CSS template" for Kwik-n-Free and that also can help to create almost any website.

I wish to build a dozen or so websites for a variety of subjects. I have found it bothersome to generate each design from scratch, and to end up with several sites wired in different ways. Also, I am an amateur at web design, only interested in achieving a practical level of expertise. Later, I intend to hire professional designers to add unique touches to each site. In this way, I can avoid the expense of professionals for the entire work. Also, I can hope that my sites will not just "look nice," but will meet my visitor-friendly and search-friendly standards, and will be owner-friendly with low maintenance.

This template allows for either the right or the left side menu to be eliminated until it is needed.

A new, small website may not need two side menus. If so, just leave the content area empty in the appropriate .inc include, and use the CSS to reduce the width to zero. Later, both side menus can be activated as needed, without having to re-design the entire site.

Here is why I have decided not to create a "100% table-free" CSS template.

I have decided to make some use of tables to take advantage of the greater stability of table cells over CSS divisions (<div> sections) at this time. However, all table codes are placed within the same external .inc "include files" used for the side menus. Therefore, at any time, the table codes can be removed instantly from the entire site, for a 100% table-free CSS layout, which I expect to become glitch-free within a few years.

Try making your browser window very narrow while viewing this page.

Hopefully, you will find that the page remains respectable. Do the same with most other CSS web pages, and generally the menus will collide and the designs will disintegrate. Or, when the browser is set at a certain width, a block of text may pop out of place. Or, to improve stability, all the text is "non-flexible," generally a small font that is hard on the eyes and can not readily be enlarged with the IE browser. Occasionally, a visitor likes to open several browser windows, using various widths, to compare information. Others may use a portable device with a small screen. Others wish to enlarge the text, to be easy on the eyes. For whatever reason, I think it is better if a web page "welcomes" the needs of each visitor and yet without losing its dignity so easily.

I have done enough research to believe that my minimal use of tables will not affect "accessibility" for blind persons or for search engines.

On the contrary, my design encourages the <h1> heading and a brief "description" to be placed unusually early in the code, the most important on-site feature for search engines. I do not believe it is helpful to place additional text before the main links section in the code, although this is advocated by some web designers, and easily can be done with CSS. However, I do believe that the secondary links section is best placed later in the code. The use of tables allows me to do all of this easily, as well as to construct a stable design. Invisible "jump links" also have been added for blind persons to skip the links sections as desired. An additional feature for blind persons is the potential to summarize a page very efficiently by reading only the <h> headings, thanks to my "frequent <h4> tags" as explained below.

                                                                                                   
 
Thank you for visiting the Kwik-n-free CSS website template page.