Building websites using fluid grid layouts in Dreamweaver CS6

In this article we examine how to start building a website using fluid grid layouts in Dreamweaver CS6. We look briefly at what fluid grid layouts are and provide a step by step guide in getting started followed by some observations.

About Adobe Dreamweaver

This is a website production tool used to build websites and mobile apps using standard technologies such as HTML, CSS, and JavaScript. Dreamweaver CS6 includes full support for HTML5 and CSS3, enables you to create fluid page designs that adjust to whatever device your website is being viewed with, smooth transitions between content, and content that translates to web and mobile applications.

Fluid layouts

Fluid layouts provide an easier solution to designing for multiple screens which has been a difficult and time-consuming task. In this technique, percentages are used as relative measurements of width rather than fixed measurements. This allows your website more malleability and fluidity compared to layouts with fixed widths. Designers need not worry about type of device or its size or screen width, because the website through its design will adapt and react to the size of the device used to view a website.

The new Fluid Grid feature in Dreamweaver gives designers a visual way to control page layout for multiple screen sizes as well as automatically integrating cross-browser consistency through the use of HTML5 boilerplate and the respond.js library.

Creating you page

Starting out

To get started, go to the top of the screen and choose File. You will see New, and New Fluid Layout in the menu.

Building websites using fluid grid layouts

Choose either option and you will see dialog box showing a grid layout for each of the screen sizes, of which there are 3.

Building websites using fluid grid layouts

Going from the left, the first grid layout is for smart phones, the next one is for tablets, the final one is for the good old desktop computer.

The grid for each device will be based on the number of columns (shown in pink stripes). You can change the number of columns for a device if you wish. You can also change the percentage width values so you fine tune how your website will react on different devices. You can also change the width between columns on the mobile layout.

Typically, the dialog box starts with the default values that work best with the majority of devices.

Once you are happy with you layouts, choose Create.

You will be asked where you wish to save your main CSS or style sheet document. You need to name it. You could call it “layout”, and you can save the document anywhere in your website, however most designers will save this in folder or directory specifically for style sheets.

Building websites using fluid grid layouts

This file will control all the layout styling.

Your webpage will open and you should save your page. During the save process, you will asked to save 2 dependant files: boilerplate.css and respond.min.js. More about these can be found online and are critical files for your website. Choose Copy and your page will be saved and the 2 dependant files will be saved in the root folder of your website.

You can specify another location for these files if you wish. Ensure that your page can find the files. Do this by checking the file location in your source code.

Building websites using fluid grid layouts

Creating your layout

What you now see is a visual layout in which you will create 3 layouts for your site: one for mobiles, one for tablets and finally one for desktops. If you look at the footer of your screen you will see three little icons that illustrate each device. Clicking on each will show your website as it would appear on the device.

To start using the fluid layouts you will need to insert what are called layout divs. These are essentially HTML 5 container s and you add you HTML5 content within them. You can even nest them, that is put a layout div inside an existing one.

You start with one of these already, called layout1. You can delete this, or rename it, what ever you wish.

When working in any div tag, you must have the one your working on selected.

To add more fluid div tags, depending on the view mode in Dreamweaver, you want the insert fluid grid layout div tag

Once you choose this, a dialog box will open and ask you to name it. Ideally all of these should have meaningful names according to how you are setting out your website.

Building websites using fluid grid layouts

There is a ticked box stating “start a new row”. This means will the content fill the entire space of the screen and further content will be on a new line. In most cases this will be yes, so leave the box as it is.

Continue to add your layout divs and giving them meaningful names. You will notice that the names you give will be the ID for each div. These IDs are unique so you cannot use the same name twice.

Once you have your page set up the way you want, you can insert your chosen content into each layout div.

Periodically you should choose File and Save All so that both your page and related CSS files at the same time.

Tailoring to each device

To ensure your page adapts to each layout you can tailor the page you have created using three little icons that illustrate each device mentioned previously.

For example if you choose the mobile phone icon, you will see your content as it would appear on a mobile device. The same of tablet and desktop.

You can resize the layout divs if you wish. To do this, first selecting the div you wish to resize. Notice that a border and resize handles appear. This allows you visually to resize a little easier. Simply use your mouse or touchpad to drag the right hand side of the div you are working on to the left and so make it smaller. Any content should adjust at will.

Building websites using fluid grid layouts

The reason for resizing from the right is because if you try this from the left, you actually add a margin to the div and force it to indent. This is useful for laying content about on your page but not what you want to resizing. You will see if you do this that a little box at the top left corner, called snap to align grid. You can press this to delete the margin setting and reset the div so that it has no margin. 

Building websites using fluid grid layouts

Note that the sizing is according to the pink columns. Each div will always automatically snap to at least one of these columns.

You can create multiple columns this way by first resizing each div to a suitable size and choosing the move up a row arrow that appears when you hover your mouse cursor over the top right o the div.

Building websites using fluid grid layouts

Once you have moved and customized your content for each device you will have a working webpage for each device. Feel proud of yourself.

A word of caution

The main CSS file that controls all the styling creates a style for each layout div you create and applies rules for each version of these styles for each device. Typically the styling for mobile specifies all the rules and then tablet and desktop inherit these plus have their own rules.

Do not unless alter or change these styles in anyway because that will break the relationship with each of them. Do not add code for typography or additional styling unless you are really careful and really know what you are doing in CSS.

Advanced authoring

As will previous versions, you can make templates from pages you have made. The same can be done here. You can create a fluid layout with everything your website needs for layout and then save this a template. To do this, choose Save and Save as template. You will need to name this. Your template will then be saved in a folder called Templates.

You can apply the template to any new page you open or even to File, New and choose page from template.   

Additional Styling

To add additional styling for typography create a separate style sheet and create your style rules in this document. To style the layout divs you have created, reference the unique ID of each one and style accordingly. Avoid any width or height rules because these will more than likely override the rules in the main CSS file.

Images

To ensure that images have no fixed width or height so that they resize in each device. You can if you wish keep images at a fixed size if your wish but note this may cause problems in layouts if an image is larger than the column or section that it is in.         
Adam Grannell Web Design, 4A Lancaster Way, Repton Park, Ashford, Kent, TN23 3GB
Call us now on 01233 647979 | Email: info@adamgrannellwebdesign.co.uk
Privacy Policy | Terms & Conditions | Sitemap