Flexi CSS Layouts for Dreamweaver

Download a free trial of   Flexi CSS Layouts for Dreamweaver
Buy Flexi CSS Layouts for Dreamweaver
Download Flexi CSS Layouts trial
See video Flexi CSS Layouts
 
box Flexi CSS Layouts for Dreamweaver

Flexi CSS Layouts is a Dreamweaver Extension that helps you create browser compliant table-less web pages with ease. 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.

Not only that you can create fixed, liquid or elastic layouts in seconds, but you can generate custom website sections with unlimited DIV levels, following even the most detailed mock-ups from your designer.

 

Special offer

Flexi CSS Layouts documentation

Fixed, elastic and liquid CSS layouts. Which one is right for me?

For years we were all used to table designs and simple html pages. Most screen resolutions were around 800x600 or 1024x768 so web designers did well enough with the so called 760px or 960px fixed layout. With the new monitors came bigger resolutions reaching 1920x1080px. The old 800x600 and 1024x768 were 4:3 screen size, while the new 1440x900 and 1920x1080 are 16:9 screen type. Meaning you can have wider layouts. To add some more issues, layouts should be readable by Smartphones, so it's a jungle out there when it comes to creating a layout with a consistent user experience regardless of the device used for browsing.

The fixed layout

A typical fixed layout is center aligned, 960px wide and works on 1024x768 screen resolutions. Being a fixed layout it means that the content that you create inside this wrapper will not be bigger than 960px and if the user has a bigger resolution, the content area will appear in the center of the screen. To center align the layout you need to set the left and right margins to auto for the container DIV.

Advantages:

  • With a fixed layout most of the things are safe: if you increase the font size or a div inside, the layout's width will not increase.
  • Fixed layouts work the same on all browsers (including IE6) and it's easy to calculate the correct size for the content inside

Downsides:

  • If you create a 960px layout, it's going to look awful on a 1680x1050 resolution.
  • The 960px layout will have horizontal scroll for the older 800x600 resolution.

fixed layout
Fixed CSS Layout

 

 

The liquid layout

A liquid layout is percentage based. In other words, a 100% width layout will span to the entire screen, regardless of the user's resolution. When using a liquid layout the content will take advantage of all the available space which is good if you have a lot of text. As a best practice for keeping the layout readable, you should set a max width and min width: for example the min width 960px means the layout will not shrink below the 1024x768 resolutions and the max width 1260px will not let the layout get bigger than the 1400px screen resolution. If you started the layout as a liquid layout and want the rows inside also liquid (adjust themselves to the screen resolution and keep proportions) then all the divs inside are calculated as a percentage of their parents. You can as well mix fixed columns with liquid columns.

Advantages:

  • If you do the layouts right they will acomodate very different screen resolutions
  • Liquid layouts are great for lots and lots of content

Downsides:

  • The biggest problem with the fluid layout is to maintain readability in all screen resolutions: images don't resize and you could end up with too much content cluttered and very little white space.
  • Text lines might stretch to the point they become un-readable for example if you have a line of text that is over 1000px wide.
  • Max width and min width don't work on IE6

 

 

fixed layout
Fluid CSS Layout

 

 

The elastic layout

The elastic layouts are relative proportionally to the text or font size. Meaning if you increase the text size, then the section containing the text measured in ems will increase as well. If you use correctly the elastic measurements you'll get a stable layout. Everything inside the layout will be resized at the same rate.

Advantages:

  • Works best for sites where accessibility for visually impaired people is important

Downsides:

  • Becomes messy if there are no limits to how much the layout size can increase
  • Difficult to calculate the available sizes in pixels

Is there an easy way to make fixed, liquid or elastic 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.

So which one is right for your site? Well, it depends. If you are a beginner, fixed layouts are easier to implement. If you have a lot of content and want to have a layout consistent on every screen resolution, liquid layouts are the way to go. If you need to acomodate different font sizes, elastic layouts will adjust their sizes depending on the font size.

Buy FLexi Css Layouts