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?
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.
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.
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.
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.
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.
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?
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.
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.
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?
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
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: firstname.lastname@example.org