Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support

So, does it make sense to learn CSS if you only do small websites?

Is CSS a viable option for a web designer that only does small sites, or using tables just fits the bill? I remember back in circa 2003 I’ve did my first site using Dreamweaver. Being a marketing guy I was perfectly happy with learning how to do tables. Doing even a 3 columns CSS site looked gibberish to me. Sounds familiar?

But why it seems to be complicated to do table-less designs?

  • Tables always work. There is less code to learn, so chances you do it wrong are less.
  • Table code is easier to understand. Doing HTML tables is quite straightforward, you have the <Table>, <tr>, <td> tags that make things easier to follow. DIVs look the same!
  • Tables designs look the same in most browsers. Being a very basic code even IE6 does a decent job in displaying the content
  • Table designs make no difference for the customers. Most people don’t know how the code behind a site was made.

So, does it make sense to learn CSS if you only do small websites? There are several good reasons why you should switch from a table design to a CSS design, even for a ten pages site. And yes, if you use Dreamweaver there is a very easy way to build CSS sites, even if you don’t know how to code.

Think about the purpose of the site

Times when simply having a site was cool enough so performance didn’t matter have long passed. Nowadays each business thinks about its website as a marketing tool, with results that can be measured and improved. It should rank high in Google, be easy to load and to use. So if you just deliver a website, it might not actually serve the real purpose of creating an efficient marketing tool. We have a word around here that does a good job at describing this situation: surgery went well, but the patient is dead.

CSS makes web pages faster

If you have a look at our list of 17 SEO tips to improve the positioning of a site, then you know that having faster web pages that search engines crawl efficiently is a must when building Web Pages.

The webpage loading time is influenced by how much code you have inside the page. If you have less code, the site will load faster; search engines and the site visitors will love that.

When you build a table based webpage, you will have a big amount of table columns and table rows with all the visual information saved within the page: just for some text you have to create a table, row and column, then define alignment, width, background color, font tags, cell padding.

Sometimes browsers read the webpage’s tables twice before displaying the content. The first read will be to determine the table’s structure and the second read will be to determine the content and the CSS rules defined for that content.

PS: you can use Yslow or PageSpeed to test your website speed.

External CSS files are cached

CSS files are not loaded on each page refresh.

When building CSS sites, you don’t need all those table tags, because the content will be inside a simple DIV tag and the CSS rules will do the rest. CSS can easily be placed in an external file and this will decrease even more your webpage size. Even more, when you use CSS design in an external style sheet, all the CSS rules are going to be loaded a single time (all the CSS information will be saved in the browser cache and loaded from there for each new page visited).

PS: you can shrink your external style sheet as explained in this tutorial.

CSS is SEO friendly

Customers want their information distributed fast. There is no point to publish a press release if it’s going to appear in Google after a week.

Table based designs mix the content with the CSS rules so you will have longer and complicated lines that are not SEO friendly. If you use table design than the search engine spiders will take a longer time to crawl your website. This means that your website will be indexed slowly. Using CSS will free up to 5 times the amount of code needed for a table design.

PS: with CSS design you can place your h1 tag (which is very important for a search engine) at the start of the webpage body using absolute positioning.

Less is more

I don’t know about you, but I think laziness (or at least the goon laziness) is a form of getting things done more efficiently. You can get the bad laziness and do your sites with tables, but it’s better to get the good laziness and CSS will actually help you do less work. And actually you are anyway going to use some CSS to style your tables, so wouldn’t you like to have all the styling in one external file and separate the page structure code from the look & feel code?

Sophisticated Layouts are easier with CSS

As soon as you begin to understand how CSS works it will be easier than tables.

If you are using a table design, then you know that tables are inflexible, rigid and based on grids. To make a change you need to change all the table structure. A CSS based design allows you to create a more flexible design and you are not limited by a grid design. Your own imagination will be the limit for how complex your design will be. Using layers in CSS brings all sorts of unique styling features that cannot be done with tables.

PS: CSS also allows a good number of rollover effects (images, text decorations, etc.) so you don’t have to learn JavaScript.

More designs in one

The page structure can be styled differently depending on the reading device

With CSS is easier to create versions of the same layout for different devices as the structure code is separated from the design code. It’s far easier playing with the CSS and make it work on a smartphone than creating completely separated pages depending on the device. And you can even get the content working on special devices for visually impaired people as the page code follows a logical structure and that’s easy to understand by these devices.

Customers changing specs it’s a fact of life

Kind of having an insurance policy for a rear-end accident. You know it will happen, just don’t know when exactly.

Plenty of cartoon comics around about customers wanting “small changes” to the site designs (I’ve especially enjoyed this one). If you do web design for a living then you know that changes will happen and you also know how dreadful is to change every page for an “should be easy to do 5 pixels alignment issue” or a font color change in the footer. Sure, making a Table HTML page then duplicating for all the other pages in the site seems easier at start, but wouldn’t you love to save some time overall?

CSS sites are easier to change

Changes in the CSS file will reflect in changes in all pages created with that CSS file

Using an external style sheet, that applies to simple DIV tags makes things easier to change: you have all your CSS rules in one file and if you want to change some properties of a div, all you need to do is to search inside the external style sheet, make the change and upload the file. All changes will appear in all pages that include that CSS file.

PS: css Zen Garden is a good demonstration of how you can modify the design of a site through CSS changes

But is there an easier way to make CSS websites in Dreamweaver?

Yes, there is. You can use the embedded Dreamweaver templates, or even better, use the Flexi CSS Layouts extension that makes CSS layouts as easy as adding table cells. Unlike other products that are limited to templated CSS layouts with 1, 2 or 3 columns, with Flexi CSS Layouts for Dreamweaver you can build your own custom layout structure without coding.

If you have any questions please send them to: support@extendstudio.com

Facebook comments:



8 Responses to “So, does it make sense to learn CSS if you only do small websites?”

  1. [...] here: So, does it make sense to learn CSS if you only do small websites … This entry was posted on Tuesday, July 20th, 2010 at 8:48 am and is filed under Uncategorized. [...]

  2. Why CSS is better than tables…

    Thank you for submitting this cool story – Trackback from Servefault.com…

  3. Primeiramente, parabéns pelo artigo.

    A matéria foi elaborada com excelência, abordando desde o pensamento daqueles que utilizam tabelas na criação de sites, até a eficiência de quem estuda CSS e o aplica em seus projetos.

    Iniciei na área de web design há aproximadamente dois anos atrás. Sendo assim, estudei, desde o princípio, a semântica do XHTML e CSS. Portanto, para mim o mais complicado é construir sites em tabela: o código fica muito sujo e poluído, o que nos torna super dependentes de um software, como o Dreamweaver por exemplo, na manutenção do site.

    Grande abraço!!

  4. [...] Designer to know a bit of SEO , a bit of increasing the conversion rates via usability and if it makes sense to learn CSS if you only do small websites. I’ve got partialy inspired by this article from Web Designer Depot that gives 6 Reasons Why [...]

  5. Philip says:

    Hi I think CSS is way too complicated

    I use it versus HTML and tables as you can create better sites.

    But I do like tables as they are simple so they should remain.

    I don’t like CSS, at times because of this inheritance and classed and Divs seems way to complicated and trying to use a CSS style sheet is a pain – especially when searching for stuff.

  6. admin says:

    Hi Philip,

    You could have a look at Flexi CSS Layouts for Dreamweaver – it makes CSS Layouts without coding.

Leave a Reply