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:
Follow these steps to create a fluid grid layout:
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.
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.
The Copy Dependent Files dialog box appears. Fluid grid layouts require two different scripts to function correctly. The dialog box lists these files:
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.
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:
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.
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.
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.
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.
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).
In this section, you'll replace the placeholder content with some HTML to simulate the content of the final site:
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.
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).
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:
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.
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.
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.
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:
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:
Tommi West is a freelance web designer and creative director at tommiland.com. Prior to starting her own business in 2004, she worked at Macromedia for six years as a technical writer, editor, and web producer. Tommi is an Adobe Community Professional.