New Fluid Grid Layout Dreamweaver CS6

If you develop simple websites or complex CMS, you always have this nagging question in your mind -- am I doing all I can to target all types of audiences and screen resolutions? Well, Dreamweaver^R CS6 has new features that make this an easier task.

In the past, one would need to create a different CSS file for each different screen resolution and use media query to assign the required CSS file. This was very time consuming and added to the overall cost of site development, which was bad news for both the developer and the client. Dreamweaver CS6 has taken much of the labor out of creating adaptive websites.

This new workflow process depends on the new Fluid Grid Layout which is somewhat like a starter template with default layouts and typography for each screen resolution for your website.

Just click File - New Fluid Grid Layout from the Menubar.
In the New Document dialog box, you will see the defaults for this new adaptive webpage. The width is fixed for each of the different screen resolutions.

Mobile 480px
Table 768px
Desktop 1232px
You have the option to change the default number of columns and the percent of column width for each screen resolution. The defaults are:

Mobile 5 columns - 91%
Tablet 8 columns - 93%
Desktop 10 columns - 90%
The default workspace can show the code and the design views. As you can see in the design view, the new file already has one div tag. You can change the default ID and Class for the div in the Properties panel.

Of course, your webpage will need more than one div. So we can add more divs for the header, navigation, main, aside and footer.
To add a new div, choose Insert Fluid Grid Layout Div Tag in the Insert panel.
In the dialog box, you can name the ID for the tag.
When we have added all the major divs for our page, we can click and drag them to reposition them within the grid.

It is suggested that we begin building the mobile version of our site and move up to the larger sizes. You can easily compare the visual results as you work by using the Resolution Switcher for Mobile, Tablet and Desktop resolutions.

When we save our layout, we get one HTML5 and CSS3 file that will work for all three screen resolutions. If we take a look inside these files, we can find information about how the files work to create our adaptive webpage.

*Adobe provided a copy of this software to me for review purposes.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.

|

	Diane Cipollo BellaOnline's Flash and Animation Editor