Flexi CSS Layouts giveaway on tutorialzine.com

Our brand new Dreamweaver extension that creates CSS layouts got exposure! Tutorialzine.com offers 3 Flexi CSS Layouts extensions (value $99 each) to celebrate the one year birthday! Exactly one year ago, in September, 2009, Tutorialzine was born. And it’s been a great year, with over 52 tutorials and a fresh redesign.

How to participate?

To participate, just leave a comment with a valid email in the comment section here. The giveaway ends on September 9th when 9 winners will be chosen at random and announced in a follow-up post.

In the meanwhile, here is a video on what Flexi CSS layouts can do:

Enjoy and register for the giveaway on the Tutorialzine.com site!

Creating a 3 columns fixed CSS layout in Dreamweaver tutorial

In this tutorial we will use the Flexi CSS Layouts Dreamweaver extension to create a simple 3 columns CSS layout with a fixed width. The layout will have a header and footer and the content part will be split in 3 columns. Using the Flexi CSS Layouts extension, the layout will look the same in all major browsers.

Requirements for this tutorial:

• Adobe Dreamweaver CS3, CS4 or CS5
• Flexi CSS Layouts Dreamweaver extension

Flexi CSS Layouts is an easy to use Dreamweaver extension that helps you create table-less HTML layouts without coding, in less than 5 minutes. You can simply create the page structure directly from the interface and the extension will automatically create the divs and CSS for your layout. Or choose from a wide range of embedded templates for your layout, then customize the layout with your own CSS rules.

Read the tutorial here.

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