Building fluid grid layouts in Adobe Dreamweaver CS6

With the ever-increasing use of mobile devices, it has become necessary to design online content that appears on multiple screen sizes and a myriad of desktops, laptops, tablets, and smartphones. The challenge involves designing sites that adapt to fit a variety of different resolutions and use the available screen real estate effectively. Previously, these goals have proven to be time-consuming. Hand-coded media queries and complex mathematical calculations were often required to deliver online presentations with fluid layouts to reach the widest audiences.

Adobe Dreamweaver CS6 introduces the Fluid Grid Layout feature to help make designing for multiple screens easier. Fluid grid-based layouts display content in containers that have widths set to percentages, which react proportionately to changes in screen sizes. In this article, I show you how to build fluid grid layouts that address these challenges.

If you don't already have Dreamweaver CS6 installed, you can download and install the free, 30-day trial software. To follow along with these instructions, download the sample files (ZIP, 100 KB), uncompress it, and save the fluidLayouts folder on your desktop.

Follow these steps to define your site:

1. Launch Dreamweaver CS6 and choose Site > New Site.
2. In the Site Setup dialog box, type fluidLayouts in the Site Name field (see Figure 1).
3. Click the folder icon next to the Local Site Folder field.
4. In the Choose Root Folder dialog box, navigate to the fluidLayouts folder on your desktop. Click Select (Windows) or Choose (Mac OS).

5. Click Save to close the Site Setup dialog box.

Follow these steps to create a fluid grid layout:

1. Choose File > New Fluid Grid Layout. Alternatively, you can choose File > New and then choose Fluid Grid Layout in the New Document dialog box (see Figure 2).

You can use the dialog box that appears to define the layout settings for your project. The grid that you'll use to lay out containers is based on the number of columns you specify for each screen. By default, these values are set to 5, 8, and 10 columns for mobile devices, tablets, and desktop screens respectively.

2. Update the Desktop layout to use 12 columns instead of 10 by typing directly in the field (see Figure 3). For this sample project, you can leave all the other default settings.

Notice the default targeted widths — Mobile: 91%, Tablet: 93%, and Desktop: 90%. These percentages are also editable.

The Percentage of Column Width specifies the width of the gap that appears between the columns, also known as the gutter value, as a percentage. By default, the layout gutter value is set to 25% of each column width. If you edit the gutter value field, the percentage you enter affects all three screen resolutions.

3. Click Create. In the Save Style Sheet File As dialog box that appears, navigate to the css subfolder located inside the fluidLayouts folder on your desktop.
4. Name the layout fluidLayouts.css and click Save. The dialog box closes, and the layout is displayed in Design view. Before continuing, it is important to save the HTML file.
5. Choose File > Save. In the Save As dialog box, save the file in the fluidLayouts folder on your desktop. Name the HTML page index.html and click Save.

   The Copy Dependent Files dialog box appears. Fluid grid layouts require two different scripts to function correctly. The dialog box lists these files:

   • boilerplate.css: An HTML5 boilerplate that includes styles you can use to get started
   • respond.min.js: A JavaScript file that adds support for fluid layouts to older browsers

You must save these two dependent files in the site folder that contains index.html. They can be in a subfolder. Be sure not to move or rename these files after you copy them. When you upload the site, you'll need to put these dependent files on the host server with the other site files.

6. Click Open to select the scripts subfolder. Then click Copy to copy the dependent files. The Copy Dependent Files dialog box closes, and the layout is displayed in Design view again.

At this point, you have a folder on your desktop that contains all the site files you need to build the fluid layout for three screen resolutions.

Follow these steps to insert the div containers that hold the content for each region of the layout:

1. Click Split at the top of the Document window to see Code view and Design view simultaneously. In the Title field, name the page Terrestrial Nursery.
2. In Design view, notice that one fluid grid layout div named LayoutDiv1 is included in the layout by default. Click once inside the default div container to make it active, and then click the tag selector at the bottom of the Document window to select the entire div container, including the opening and closing tags.
3. Press Backspace (Windows) or Delete (Mac OS) to delete the default div (see Figure 4).

4. In Code view, verify that the insertion point appears after the opening <div> tag. This sets the placement of the div you'll insert in the next step, so it will nest inside gridContainer.
5. Open the Insert panel (Window > Insert). Choose Layout from the pull-down menu at the top and select Insert Fluid Grid Layout Div Tag. The Insert Fluid Grid Layout Div Tag dialog box appears.
6. Name the new container Header. In the dialog box, notice that the Start New Row option is enabled by default (see Figure 5).

When the Start New Row option is enabled, the content in that div container will not appear in a column; it will always appear on its own horizontal row of the screen, regardless of the visitor's screen resolution.

7. Click OK to insert the new Header container and close the dialog box.

Note: Always ensure the new div containers you insert are nested within the outer div container named gridContainer.

After you insert the first div, the insertion point is positioned after the closing </div> tag of the Header div container.

8. Repeat steps 5–7 to insert another div container named Nav. Leave the Start New Row option enabled for this div container as well.

The layout now displays two div containers (Header and Nav) nested in an outer container named gridContainer. The two layout containers hold placeholder text, but don't worry about that for now. Later you'll replace that text with site content.

In Design view, look at the left side of the layout and notice that both the Header and Nav containers are vertically aligned (see Figure 6). That is a visual indicator that they are both set to appear on a new row when viewed. Additionally, they are both set to span the entire width of the grid columns. By default, new div containers you insert are set to 100% width.

9. In Code view, verify that the insertion point is positioned after the Nav container's closing </div> tag to insert the next div container.
10. In the Layout section of the Insert panel, select Insert Fluid Grid Layout Div Tag. The Insert Fluid Grid Layout Div Tag dialog box appears.
11. Name the new container Teaser. This time, disable the Start New Row option by deselecting the checkbox. Click OK.

In Design view, notice that the Teaser container looks slightly indented on the left side. This is a visual indicator that the Start New Row option is disabled for the Teaser container.

12. Repeat steps 9–11 to insert two more div containers. Name the first new container About. Name the second new container Article. As you insert each one, deselect the Start New Row option before clicking OK.
13. Insert one final div container. Name it Footer. This time, use the default setting to keep the Start New Row option enabled.

When you look at the layout in Design view, you'll see a total of six div containers. The top two (Header and Nav) are set to appear on new rows. The next three (Teaser, About, and Article) are set up to possibly appear as columns (space permitting). And the last div container, Footer, is set to appear on a new row. The indenting on the left side indicates that the Teaser, About, and Article containers could be displayed side-by-side (see Figure 7).

14. Choose File > Save All. This ensures you save both the HTML file and the CSS file.

In this section, you'll replace the placeholder content with some HTML to simulate the content of the final site:

1. Click Split to see both the Code view and Design view panes of the Document window.
2. In Design view, click inside the Header div. Select the placeholder content by pressing Control+A (Windows) or Command+A (Mac OS) and then delete the contents by pressing Backspace (Windows) or Delete (Mac OS).
3. In Code view, notice that the Header div is now empty, and the insertion point is located between the opening and closing <div> tags. Click that location in Code view to set the location to paste the new content.
4. Choose File > Open. Navigate to the fluidLayouts folder on your desktop and locate the file named content.txt in the content subfolder. Click Open.
5. Select the first section of content below the text that says Content for header. Copy the selected content by pressing Control+C (Windows) or Command+C (Mac OS).
6. Click the tab at the top of the Document window to return to index.html. Without clicking anywhere else on the page, press Control+V (Windows) or Command+V (Mac OS) to paste the content into the Header div (see Figure 8).

Note: During this process, verify that the pasted content is inside the Header div container, rather than outside its closing div tag. Be sure not to accidentally delete the opening and closing div tags while editing the code.

7. Repeat steps 2–6 to replace the placeholder text with site content in the Nav, Teaser, About, Article, and Footer div containers.

When you build fluid grid layouts, you define three unique layouts to target each screen resolution. The fluidLayouts.css file adapts to the available screen size as the content is viewed on different screens (or when the browser window is resized).

To build the layout for each of the three target screens, you need to start with the mobile layout and then update the container positioning for the tablet and desktop layouts. Using this strategy, you can customize the way the div containers appear on different screen resolutions.

Dreamweaver CS6 includes the new Resolution Switcher that enables you to quickly jump between the mobile, tablet, and desktop resolutions. By default, the Resolution Switcher is set to Mobile Size. You can click the icons along the bottom of the document window to switch back and forth at any time as you build the layout (see Figure 9).

1. In Design view, select the third div container from the top, named Teaser.

   As you view the selected container, notice the handles on the left and right side. In some programs, you can drag the handles on either side to resize an element. However, these handles control specific settings:

   • Drag the handles on the left side of div containers to set the margin.
   • Drag the handles on the right side of div containers to scale the width.

The Resolution Switcher is currently set to Mobile Size. If you want to make any changes to the mobile layout, you can edit the containers while this setting is active. However, for this project, keep the containers as they are positioned by default; in the smallest screen, each container appears in its own row, stacked vertically without any columns.

2. Use the Resolution Switcher to select Tablet Size (768 x 1024). Design view updates to display a wider layout with eight columns instead of five.
3. Select the third div container from the top named Teaser. When you select it, a blue border appears around it. Drag the right handle to the left, resizing the Teaser div container until it only spans the first four columns (see Figure 10).

The div container snaps to the closest column in the grid as you resize the width. In this example, the edge snaps to the left side of the fifth column. The grid system makes it easy to keep the containers lined up.

Note: Remember that the left handle increases the margin, rather than adjusting the width of the container. It's important to drag the correct handles as you build layouts.

4. Select the fourth container, named About. Resize the div by dragging the handle on the right side to the left. As the About container becomes more narrow, it jumps up next to the other narrow Teaser container. After resizing, the About div container spans the last three columns on the same row as the Teaser div.
5. Use the Resolution Switcher to select Desktop Size. Design view updates to display a wider layout. The grid now contains twelve columns instead of eight.
6. Select the Teaser div. Drag the right handle to the left until the container's width becomes so narrow that it spans the first four grid columns.
7. Select the About div. Resize it using the right handle until it spans the three middle columns on the same row as the Teaser div.
8. Select the Article div. Drag the right handle to the left until the container's width becomes so narrow that it jumps up to the same row as the Teaser and About div containers.

In this example, the desktop layout has enough room to display three columns of page content. In the tablet layout, the Teaser and About div containers are displayed as two columns. And in the mobile layout, each div container appears on its own row to fit the narrow width of a smartphone screen.

At this point, all three layouts are defined. It's time to attach an external CSS style sheet to the index.html page to format the HTML that exists in each div container.

Note: Although you can add formatting styles to the CSS rules generated by the Fluid Grid Layout feature in Dreamweaver, that is not recommended. If you edit the rules that define the layouts, you may lose the ability to edit the layouts on the grid. To maintain full editability, create your styles in a separate CSS file. This strategy also makes it easier to update the site later, since the formatting rules and layout rules are separate.

9. At the bottom of the CSS Styles panel, click the Attach Style Sheet button (see Figure 11). In the dialog box that appears, browse to select the file named formatting.css located in the css subfolder of the fluidLayouts folder. Leave all the other default settings and click OK.

10. Choose File > Save All.

In Design view, you can see that the content updated based on the rules in the attached style sheet. However, the pink grid, green highlighting, and container borders make it difficult to see the site content. If you'd like to temporarily hide the visual indicators, you can disable them.

Click the Visual Aids menu (eye icon) at the top of the Document window and select Fluid Grid Layout Guides from the menu (see Figure 12). This is a toggle option that enables you to show or hide the visual indicators. When they are hidden, the checkmark is not displayed.

While the visual aids are hidden, you can see the site content more clearly in Design view. However, to see how the fluid layouts respond to different screen sizes, you'll need to view the index.html page in a browser.

To test the three layouts, you need to resize your browser window to simulate how the layout adjusts when viewed on screens with varying widths:

1. Choose File > Preview In Browser. The index.html page loads in your default browser. You can see the formatting that was applied by attaching the CSS style sheet.
2. Click the maximize button to expand the browser window to its widest width. This replicates the way the desktop layout will appear (see Figure 13). Notice that the center of the page displays three columns of content.

3. Click and drag the lower right handle of the browser window to the left to slowly reduce the width of the browser window. When the window reaches 768 pixels (the targeted width for the tablet layout), the Article container moves below the Teaser and About containers to display a two-column layout (see Figure 14).

4. Continue resizing the browser window to narrow the width. When the window width reaches 480 pixels, the mobile layout is displayed (see Figure 15). In this layout, each div container displays its content on a new row, rather than displaying any columns.

If you'd like to compare the layout you created with the completed version of the sample project, open the file named index-complete.html in the completed subfolder in the fluidLayouts folder.

I hope this tutorial has given you some ideas about building fluid layouts that you can use for your online projects. Experiment with different layout settings and try building more complex layouts using different settings, margins, and div container widths.

To learn more, check out the following online resources:

• Media Queries: A collection of inspirational websites using media queries and responsive web design
• HTML5 Rocks: An open-source, community-driven site that features tutorials and information for HTML5 developers
• HTML5 Boilerplate: A professional front-end template that helps you build fast, robust, and adaptable websites
• Responsive Web Design: A book by web designer and developer Ethan Marcotte that demonstrates how to deliver a quality experience to users on any size display