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.
To get started, go to the top of the screen and choose File. You will see New, and New Fluid Layout in the menu.
Choose either option and you will see dialog box showing a grid layout for each of the screen sizes, of which there are 3.
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.
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.
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.
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.
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.
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.
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.
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.
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.
ImagesTo 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.