Free: Remaking DMXzone in CSS and XHTML

Read for free the trials and tribulations of our intrepid tech team as they wade through 6000 articles-worth of tag spag hell, nested table horror, and emerge victorious with a fully validating CSS and XHTML site that loads twice as fast, renders better and is more maintainable!

The ASP and JavaScript we used to convert the all our articles into xhtml and the full DMXzone.com CSS file is included for download too!

Still to do.

There are still some problems that we haven't solved and we are still working on them.

• Tabs don't always work correctly, on IE/ win and apparently randomly:

• The header boxes go under the floating boxes, (but the text wraps fine)

• We haven't checked the redesign with Dinobrowsers (Netcape 4, IE4) as we're not really worried about these, because our audience is professional web developers. Our audience test their sites using archaic browsers, but they don't do their research using them.
• improve layout even more with floating boxes (e.g., floating gallery listings)
• dynamic sidebars - fully user customizable - so users can hide them when they want but also reorder the boxes on them
• provide mobile (pda) css

Conclusion: Was It Worth It?

The conversion has its pros and cons. We did reduce the size of the pages, making it easier on our users, our server and our bandwidth bills. However, on the maintanance side it is still pain to manage all those CSS with the different browser hacks as we need to keep on testing and testing the CSS on all those different browsers and then also with the different content styles. The hacks are necessary, and they validate, but it doesn't quite feel like web "standards" – but that's just the way of the world.

So we just continue to strive towards genuinely standards-based CSS that works on all browsers the same. We also wish that there were more visual CSS tools to help - currently we use just a simple text editor or TopStyle but this does not offer much additional value when it comes to more advanced CSS design.

Maybe in the next version, Dreamweaver will fully support visual css design CSS that can be generated to be crossbrowser like its current support support for crosbrowser javascript functions. We hope that someday there will be fully crossbrowser CSS design built into DW, bound together with css CSS based layout design mode.

Any Questions? Any Ideas?

If you have any ideas on how to improve our CSS, or implement anything on our still-to-do list, or have a comment about this article, please visit the forum!

References

http://www.alistapart.com

http://www.positioniseverything.net

http://centricle.com/ref/css/filters

http://www.phespirit.info/cafe/css_hacks.htm

http://www.pixy.cz/blogg/clanky/css-3col-layout

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

http://www22.brinkster.com/beeandnee/techzone/articles/htmltoxhtml.asp

Also check our Premium Content at DMXzone about CSS, XHTML and Web Standards at:

http://www.dmxzone.com/index.asp?TypeId=28&CatId=691