CSS Upgrades For Sale
Just finished converting another web site to all CSS, that I had originally built using the technique of creating a single table, (one table to rule them all), with just the four or five cells in it for header, footer, menu, content etc. and then using CSS for the rest. Serve that up as something with a Transitional Doctype and no worries about most things as long as you just pad stuff and not use too many floats or other positioning properties. Quick way to build a site layout, but not exactly strict CSS and xhtml.
That makes four sites done completely with all CSS for positioning, no tables needed, and getting fairly confident that virtually any web site can be redone without tables. It sure makes for smaller file sizes, and browsers seem to be able to draw CSS positioned elements much faster than they can nested table cells so the surfing experience is more seamless. It’s almost too fast in some cases, can see a use for the W3C to come up with something standard for fade/transition effects similar to Microsoft’s’ proprietary browser effects, but with CSS instead of JavaScript, that everyone can use.
One does have to think out of the box a little creating all CSS layouts. I did a fair amount of reading on Big John and Holly Bergevin’s web site, and rather than use the hacks found there, made notes of what needed to be worked around instead. A ton ‘o good information to be found there, but no use trying to fix something that isn’t broke and just needs to be done different, or at least how Brian Wilson has determined they work, correct or not.
I also found the 456 Berea Street web site to be incredibly helpful. Not quite as hack orientated and their techniques led to other insights in general. The equal height boxes was really good, used a variation of that, using just one extra div to make a large section of the page containing a couple divs, causing both to stretch out 100% just like tables. Didn’t use the display:table property though, min-height works too for what I needed, (one box will always have more content), but it’s something to keep in mind for next time. A List Apart has a page that is also just chock full of examples.
A couple other things that can help a lot, is using whatever:hover from my fave NL javascript coder for drop down menus that work everywhere, and conditional comments. For example, the one I just finished works the same in all Gecko browsers and IE 6 and above(7?-hopefully!), but nothing I tried makes IE5.5 and below get rid of that default 15px padding on an un-ordered list… enter a one line css file that gets called up with the conditional, and everyone’s happy and future-proofed.
Putting together a page for the mgwebservices.ca web site to sell CSS / XHTML upgrades/conversions now, almost ready to go. Doing the samples/screenshots and links and writing the copy, and will add a link for that when ready. The dearth of web sites that have not been converted, and the high profile of some of the ones that have been upgraded along with a strong business case for upgrading, seems like something that could keep me busy for a couple years while everyone gets on the bandwagon. Still haven’t come up with the price points for it, though it seems that about $250 per copy would do it, it’s about a day for each one in the long run. As there are a lot of similar web sites out there, that time would drop and some decent wages could be made in time. Keep php/mysql work at the present $45/hour level, and content work at $25/hour as always; it’s a whole ‘nuther skill set doing these CSS layouts, and a flat rate to begin with smooths out the rough spots that are bound to be there at the beginning.