Traditional HTML vs. CMSs

Good Ol’ HTML

My first website was done using a simple text editor while sitting in front of one of the early Mac G3s, one of the last of the biege boxes in fact. Back then all HTML coding was done by hand and by snatching other people’s code to paste into your page, creating what I affectionately think of as a “Frankensite”. While it was a necessity back then to know the different tags, now there is just too much out there to be able to know it all.

Software like Dreamweaver has become the standard for creating web documents. It’s generally pretty easy to use and most programs have a fairly simple interface that bring the visual design aspects of web creation to the forefront. Many static and somewhat dynamic sites, style sheets and the like, are easy with this type of software.

A brief explanation of how it all works is as follows:
1. You open your browser and type in the specific URL for the website.
2. The server finds the site, grabs the first page (generally index.html or default.html), and sends it to your browser.
3. Your browser displays the page which was sent to it, the page which now resides on your browser.

This is why you can open a webpage that is in your cache even if your internet connection goes down.

It is also a much more streamlined method of doing a website which, for some, is the only way to go. Keep in mind though that even though you can create some wonderful sites and interfaces this way, there is something to be said for letting the server take control.

Enter Content Management Systems.

Many of these CMSs are based in either PHP or .ASP. They offer plug-in widgets which work as soon as you drag and drop them in, well-structured themes that take a lot of the guesswork out of tables and div tags, as well as community support – often for free.

This is a completely different animal than what you have with an HTML document. For one thing, CMSs reside on a server and require a database to hold all of their goodies. This makes it necessary for a designer to have, at the very least, a passing knowledge of databases.

The way these work are:
1. You open a browser and type in the URL of the site you want to see.
2. The server the site resides on finds the site, recognizes it uses server-side software, grabs the index.php page or equivalent.
3. The server uses the information found in the index.php page to piece together how the site will be viewed on your browser, what elements to include, colors, images, all that wonderful stuff.
4. Once the server has put it all together, it sticks it into a .html page that you can view and ships it off to your browser.

Because of all the additional work, the server has to have total control over the site. This makes it incredibly easy to update information since it is already on the server. You just log on, change what you need to, save it and that’s it. Instant fix. Changing any one of the components will immediately effect the way the site looks, no reuploading of .html documents.

While this might seem ideal for just about anything, let me caution you. CMSs for the most part are designed with developers in mind, therefore there aren’t any WYSIWYG* editors for them. If you want to change the basic color or type size you generally have to find the .css file that controls it and edit it by hand.

Also, be very careful about writing your text in Word and uploading it. Word attaches all sorts of little tags and such that are invisible until you copy/paste your text into WordPress or a similar CMS. It might look just fine on the backend but viewing it from the other side gives you a blown-apart mess.

Comparison

A few pros and cons for each are as follows:
HTML Pros:
1. Software available to edit in WYSIWYG form, making it very simple for designers to see exactly what their site will look like when uploaded.
2. Code is often simple and easily identifiable.
3. A simple FTP uploader allows you to drag and drop your entire site onto the server, little if any additional setup is required.

HTML Cons:
1. You are at the browsers mercy. Something that looks wonderful on Firefox and Safari might need a patch to look good on IE.
2. Interactivity is limited. Simple forms and rollovers are about all HTML can do without a little help from Javascript, JQuery, Flash or the like.

CMS Pros:
1. Many of the tools that give your site a professional look are already there in the form of drag-and-drop widgets.
2. Templates are available, free as well as for a fee, that can be used to create a professional site in just a few minutes.
3. Changes can be made server-side so there is no additional content to upload.

CMS Cons:
1. Little if any WYSIWYG editing capabilities.
2. Have to be able to understand at least the basics of server-side software and databases.
3. Sometimes interfaces are overwhelmingly complex

Keep in mind this is all coming from a guy who is by nature a designer, not a developer. I also only have real working experience with four CMSs, Miva Merchant (which is a shopping cart based CMS), Joomla!, WordPress (which is primarily for blogs), and ZenCart (another shopping cart but this one is open source).

In My Opinion…

This is how I usually do things:
If a client requires a simple site with few bells and whistles, I usually do it in HTML using Dreamweaver. I have a greater working knowledge of Dreamweaver and Photoshop so these sites usually come off without a hitch for me.

If a client needs more than a simple site with a contact form, especially if they need to be able to edit and update articles or blog posts, then I go with a CMS, one of those I mentioned above. Also any sort of shopping cart will be handled by a CMS.

As I’ve previously stated, all of this is from my experience only, I have only the vaguest notions of what other designers might do under the same circumstances.

Also, I need to mention there is a new CMS called DesignHamster that I’m dying to try out. It is supposedly very designer-friendly so I’ll report on that once I’ve played with it a bit.

Until then, happy designing!

*This term should be familiar enough by now but just in case it isn’t, WYSIWYG means What You See Is What You Get. In other words the way it looks to you is the way it will look on a browser to your viewers, for the most part anyway.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s