Cross-Browser Concerns

April 12th, 2007 by Jim

Anyone who’s ever designed a website for themselves or for anyone else should have considered the cross-browser issue. A lot of times, the same content will appear differently from one browser to the next, which is a huge pain. You’ve spent a lot of time and effort to make your page look great, but there’s always going to be cross-browser concerns when it comes to the web.

The same problems arise when delivering a CMS solution to your clients. You have to be concerned about this on both fronts, the backend and the frontend. You need to be aware that your CMS (if it happens to be browser-based) might not always be loaded on the same browser or operating system for that matter that your clients are going to use. Depending on your contract, you might be permitted to enforce one standard on them, but as a developer you can’t count on that. On the frontend, you have to be sure the content you or your clients are producing won’t have the same problems showing in both browsers. This can be a tough one, because there’s never any way to know what a user is going to do with your software once it leaves your graces!

The good news is that most browsers are subscribing to XHTML and XML (of which HTML is a subset of tags) compliance. This is to say that for most formatting options, you are able to force a browser to display content according to a set of rules which exist for the content, independent of the browser. Implementing this is simple, but enforcing XHTML or XML compliance might uncover some things about your own coding and authoring style which you didn’t know you were doing incorrectly.

To force XML or XHTML compliance, you only need to add a single tag to your pages: The DOCTYPE tag. This tag looks like this:

It goes before the opening tag on your pages. In the example above, we’re specifying that the current page subscribes to the XHTML 1.0 protocol. This forces the browser to display the HTML as XHTML. *You might see somethings wrong which weren’t wrong before.*

I recommend all your pages include this tag. It will eliminate or really reduce the formatting gaps you’ve been seeing between Firefox and Internet Explorer, and Opera, and Safari…

Posted in Web Programming | No Comments »

AJAX and Content Management

March 6th, 2007 by Jim

Not since I’ve become a professional on the web has a concept or technology revolutionized how we do things on the web like AJAX. Of course, AJAX is the acronym from: Asynchronous Javascript And XML. For those who aren’t programmers or technically adept, AJAX is basically a way of sending and receiving information between the browser and server without refreshing the page. It’s opened the doors wide for rich and capable web applications.

I’m not going into specifics here on how to do AJAX - Google has all the answers you need for your specific language and platform. I’m going to talk a little bit more about why AJAX might be a better fit for the CMS systems than it is for the front end. I want to talk about the features of AJAX which make it ideal for content administration, using specific examples.

I like to use the ecommerce site for my examples, although many content management systems don’t have anything to do with products and categories. I use ecommerce because it’s all-encompassing.

One of the biggest challenges we have as content management systems developers is writing software that is easy to use for your average joe. Most of the time product managers don’t have clue #1 about how the website he/she is using really works. They look at the tools you provide to them the same way they look at Microsoft Excel. There’s no need to know how it works, only that it does work so they can use it. AJAX is a wonderful assistant to help you with this.

Refreshing pages is burdensome and can cause the average person to go insane. I’m sure it’s frustrating to you too when you’ve just finished filling in a lengthy web form, including a four paragraph comment, and you submit, only to find that something went wrong and you need to go back. The form (including your comment) is empty, and you’ll need to retype the whole thing. A not-so-common occurance out on the web, but using a web-based CMS on a daily basis it might happen alot.

Edit in place. Yes, edit in place. Often times a CMS system can be completely woven into the frontend of a website. In the past what I’ve done is verify the user by their login. If they’re logged into their own site the AJAX will be enabled to edit products and other content in place. Take a product page of a catalog for example. If you’re logged in as a content administrator, your product’s particular fields will have an edit link overlayed. Click the link to open that content in an editor embedded in the page, and save. Using AJAX, we can send the updated content to the server to be saved in the database.

This method lets the content administrator browse their content exactly how the web users do to find content. Once found, they can edit their content as if it were in a backend system.

Ah, the hierarchical tree structure. A popular use for AJAX is building a hierarchical navigational tree. Think of windows explorer’s tree view with folders inside of folders inside of folders. Using AJAX, we can load the top-level categories when the page initializes. Then, when a parent category is clicked, we can use AJAX to get all of the child categories for that particular category, and CSS/JavaScript to display them in place.

You can take this concept a step further than allow a CMS administrator to add/remove/change categories in the tree, add products or documents to the tree, or move existing items from one location to the other. Of course these are advanced techniques, but make your CMS easy to use. Most people are adequately familiar with Microsoft Windows to create folders and files, delete folders and files, and move them wherever they want them. Building your CMS like this makes it almost so intuitive, training isn’t needed.

Preview on the Fly. Let your users make content updates and preview them before making them live or committing them to the database. AJAX makes it easy to redraw the page with updated content, before it goes live, and without having to wait for the page to reload. This is a highly sought after feature from my experience. Most people don’t like firing blindly and fixing problems after the fact, so why force it on them in the CMS?

“Bells and Whistles” I don’t like the buzzwords, but AJAX does. AJAX makes adding “bells and whistles” a snap. Make a simple progress bar using AJAX. You’d be surprised how much people get to relying on the old progress bar. Context-sensitive help. When the user scrolls over a given help icon, the AJAX pulls the help content down from the server and displays it via JavaScript/CSS. It’s handier than having a full HTML-formatted help document, more intuitive, and typically more relevant. User’s don’t like searching for things, which is why it’s important to put it right in front of them in an unobtrusive way.

These are just a few examples. AJAX is a technology, so use your creativity + the technology to develop some stunning tools which give your customers the experience they’re looking for. If you do, they’ll come back.

Posted in Web Programming | No Comments »

« Previous Entries