Well, I finally made the leap to pure CSS code. Coding in P-CSS was filled with bug tracking and constant issues. It really sucked. I was left asking myself, is this truly better. The answer is yes and no. Style sheets allow sites to be re-themed very easily. This also makes it easier to adapt pages to different platforms like IPhones and Androids, as long as you can get past all the platform bugs. Style sheets lack good methods for creating multi-columned content and don't even think about creating rounded corner text boxes unless you are Houdini. I did it, by the way. Table style layout is nearly impossible, but, given a good dose of whiskey, you can alter you perception of reality and make it happen. So, bottom line, I converted a table based site into P-CSS and made it look (almost) identical. It's doable.
I decided to take a look at what other people are saying. Table based programmers who are just starting with it seem to have the same experience I had. They, generally, see no point in using P-CSS. They instead blend the two. The other group are the P-CSS devotees. I read article after article from these people extolling the virtues of the new P-CSS religion and belittling any who disagreed. I took a look at the pages these zealots were writing and found that they were mostly simplistic, static pages with little content.
I read a couple of articles where P-CSS devotees tried to prove its benefits through examples. One page comes to mind as indicative of the arguments. The reviewer gave 13 reasons why CSS is better. Here they are:
- P-CSS loads faster because there is less markup on the page. This is a bold face lie. First, CSS pages are MUCH smaller, but the accompanying style sheets are HUGE. Also, when looking at a generous sampling of pages, almost the entire size of the downloaded content was images. This means that, unless you have a text only site, you will NEVER see faster page loads. To make it worse, the first time your page loads, the site downloads the MASSIVE CSS page in addition to the content page. This, almost without exception, creates a slower loading first page. Another pitfall here is that, on occasion. the CSS doesn't load and the page is shown as a text only page. Ugh!
- P-CSS results in lowered hosting costs. Once again, this is nonsense. Since images make up the majority of a site's bandwidth, there is little savings in bandwidth. Also, since the size of the CSS file and the content page is generally larger than a traditional table based page, the situation is worse on initial page loads. Subsequent page loads may use slightly less bandwidth, but this amounts to little, if any, savings. Further, if your website gets a lot of single page visitors who don't surf the site, you may actually find your bandwidth usage increasing.
- Redesigns are more efficient. The premise here is that you have a HUGE amount of table based pages that all need to be changed. The trouble with this argument is that those of us who design web pages for a living use back-end databases and dynamic coding, not static sites. This means that we already have compartmentalized components. This idiocy of this argument becomes clear in another reviewer's site when he creates a fictional company with a deal of the week home page, 9 product category pages and 87 product pages. Each page has a best seller section. He then says that he must move the "Best Seller" section to the right which will take a small modification to his CSS style sheet, but massive redesign of all 97 pages in the table based site. What a stupid argument. Creating this site properly would require a home page, a product page and a category page. Yup, only three pages. Using a back-end database, this site could have the change he wanted made by changing 3 pages. Further, if the company wanted to add 15 more categories and 3000 more products, this idiot designer would have to be hired to build 3015 new pages and would have to modify the navigation of the remaining 97 pages. By contrast, the client could have just added the products to the database and the table based site would have taken care of the rest. The same COULD have been done with P-CSS if the designer had actually known what he was doing. Interestingly, the poster was flamed by web professionals for failing to use a database and not knowing good design.
- Redesigns are less expensive. This is debatable. depending on what is being changed, redesigns can be more or less expensive. Based on my experience thus far, P-CSS might save 5% - 10% here, if you can get by the bugs.
- Visual consistency can be maintained throughout the site. This is true, but table based designers already use CSS for colors and text in order to maintain consistency. P-CSS doesn't really improve this much. The designer makes the assumption that table based designers use Dreamweaver and never use CSS. This is far from true. Dreamweaver, by default, builds hybrid sites which blend CSS and tables. Dreamweaver can also build P-CSS, but you are still left with hand coding in bug hell.
- P-CSS is better for SEO. Bunk. A properly designed site, whether table based or P-CSS based, will rank the same. This is just rubish. The content is indexed, not the markup. Since the content would be the same, the SEO would be the same.
- P-CSS is better for accessibility. Yup, it is! Screen readers for the blind do a better job reading P-CSS pages. P-CSS pages also appear better in text only browsers. So, if compliance or accessibility are paramount, P-CSS is better.
- He goes on to say that CSS designers are more in demand and make more money. He then complains that traditional table based designers cheat by using easy tools like Dreamweaver to build sites. He goes on to imply that designers should abandon tools and go back to straight coding and debugging. Huh? Why not abandon vehicles and walk everywhere hauling our loads on our backs too. Making design harder by giving up tools that make the job quicker and easier is definitely not a good argument.
- Quick website updates. We already covered this. See "Redesigns are more efficient"
- Websites are easier for teams to maintain. This argument falls flat. The author accuses table based designers of cluttering up code by using font tags. Table based designers generally use CSS pages to define styles. One of the big fallacies of this guys argument is that he takes the position that table based designers don't use style sheets. We do, when appropriate.
- Increased usability. The designer states that P-CSS pages are easier to navigate. This is bunk. Navigation can appear the same on both. He also preaches that CSS pages can be swapped to change layout for different media. A properly designed PHP site can do the same thing with either tables, P-CSS or a table and CSS hybrid.
- He states that P-CSS pages allow more complex layouts. This is true for absolutely positioned items, but fails on relatively positioned layouts. If you have any doubt, create a multi-column P-CSS layout with text in each column. Keep trying, it can be done, but it is ugly in P-CSS. Next, drop a picture into a column which is too wide and watch the fun ensue. Check different browsers as the disaster changes based on browser used. Table based layout just resizes the columns to fit in EVERY browser.
- He says that there are no spacer GIFs. He is correct and this point also makes accessibility using a reader or text based browser better. P-CSS wins here.
I personally am switching to P-CSS (mostly). When appropriate, I will drop in a table as needed. After trying both design styles and considering all the arguments, I believe the real answer lies, not in the extremes, but in the middle.