Monday, June 19, 2006

XHTML and CSS and PHP, Oh MY!

It doesn't quite have the same rythym as the alluded to "Wizard of Oz" song (Lions and Tiger and Bear, oh my! for those unfamiliar with American culture), but there seems to be about as much fuss made about them. These technologies promise ease of configuration, separation of UI from code logic, yadda yadda. There are definitely some benefits to using the combined technologies, but I'll explain some of the pitfalls that I have run into while trying to combine them into the website that supports the Sloth MUD III site.

The first is that we are using PostNuke, not just plain PHP. I have configured a generally compliant template with div tags and CSS for the main framing of the site. However, the modules that get loaded in the middle have content that does not conform to the standards. They use the quite commonly found table method for layout. I can either work around this or never use any external modules. I'll have to work around this, because external modules is one of the main reasons for choosing a system like PostNuke.

The second pitfall is that I have a graphical background that doesn't really expand past 980 (or so) pixels. So, I have to make sure everything fits nicely within this width or it will appear amateurish. The problem is that since a lot of these included modules use table layout and the content can become quite wide, I have to put in some frames to keep it from scrolling horizontally. It's an icky solution, but will have to stay until I figure out something else, most likely with the background.

The third pitfall, that goes with any web page design, is still browser compatibility. I finally got a nice three column layout to work, based on this nicely done example and it looked great in FireFox but looked horrid in Internet Explorer. I went back to almost exactly the example and got it to work in both, but the fragility of this is frustrating.

The last pitfall is that if you are working with a graphic artist (and we worked with a brilliantly talented one for our site design) to do the art, ask them to give you the art in tact and let you deal with the web layout. It's completely fine to use what they give you in table layout if you want to stay with table layout, but it could be a lot of work (and is a lot of work in this case) to convert it properly to XHTML and CSS.

At the end of the day, it might not be completely clear what I am gaining out of this, but there are definitely things I am able to do faster during the development of the site with CSS, but there is a learning curve and conversion time that may well obviate it. I think when we want to launch a text only version of the site, we will be in a much better place, but for now there isn't much but learning on my part.

2 comments:

Weasel said...

The good thing about CSS is that it's so much easier to tweak a single style sheet (once you've set it up) and all your pages reflect that tweak. By far the most frustrating thing I've found is IE compatibility - they have quite a lot of non-standards-compliant 'features' that fark up what would otherwise be sweet layout with CSS effects. Bastards.

Yuri (Teron) said...

CSS is great.

I'd suggest switching to something else to use completely web-standards compliant code. That being said, I understand how much effort it takes to combine a website and a forum and put it in your free time.

The thing is that it is pretty easy to convert a graphical layout to CSS if you dont limit yourself to graphics. Some elements may be displayed entirely with CSS (styled text, backgrounds, etc).

If you need any help on CSS, let me know.