Website Design & Hosting Mistakes That Should Be Avoided

This article aims to demonstrate the advantages in learning modern web design techniques, focusing on CSS. We'll learn what CSS is, explore the business factors in building websites in a modern way and find out how much easier and beneficial it is to design using CSS. What this article isn't is a guide on how to make websites with CSS.

So what is CSS?

CSS (Cascading style sheets) in very basic terms is a way to style elements of your website. It is purely a presentation tool.

Despite many threads in forums and amateur articles, it is not a replacement for table-based design. Actually, CSS can be used to enhance table-based designs. But CSS comes into its own when combined with div-based design. We'll go into this later…

Business drivers for using CSS

CSS and div-based sites produce cleaner code. No table rows and columns in the code. So what does this cleaner code mean?

Well, firstly it means that search engine spiders see a higher ratio of useful content compared to table designs. This leads to higher rankings in search engines in most cases. The search engine can also ‘see' the page more clearly. It will not have as much trouble finding links on your pages as there is less ‘coding rubbish' to contend with. Essentially, a modern site will be friendlier and accessible to a search engine.

Secondly, cleaner code often means smaller file sizes. Shaving off a few kilobytes from your web pages may seem like no real advantage to you, but imagine your site has a high amount of traffic. You may save massive amounts of bandwidth over time thus saving you money on hosting. Another upside of smaller files is that the user won't spend as long downloading your pages and ultimately be happier when browsing your site. So your site is more efficient.

Another point to take onboard is that modern sites are actually quicker to build. Once the basic CSS techniques are understood, there is no reason why it should take longer than a site built with tables. The cost saved on development time could be huge on a larger site.

Finally, to be blunt, larger clients are often knowledgeable about modern techniques and you won't get a foot in the door if you don't use modern code. Flipping this on its head, however, don't go out there and flaunt yourself as a modern coder - this really is expected and not a selling point in my view. It's akin to a mechanic saying "I use modern tools." Surely not!

Advantages of designing using CSS

I hope the business case has at least made you wonder whether to update a few old sites. If not, read on to find how your new projects can benefit from a little bit of modern web design.

As mentioned earlier, CSS is a powerful tool when combined with div-based design. Here's some reasons why:

Firstly, compare a site built without CSS with a modern design. The old school coding method will most likely be full of font tags that determine what colour/size elements are. This may work, but imagine you suddenly want to change your font styles across 200 pages? It would take a huge effort to do this. With an external CSS file, fonts (or any other elements for that matter) can be changed across your entire site with just a few minutes of coding. Quick and efficient. More control.

Next, defining a style externally means it is reusable. Making a style with a red border for example can be used again and again, whether it's a link, an image or whatever. Efficient and logical.

Finally, when using modern code, you're on your way to produce accessible, standards compliant design. A legal requirement for sites of today.