How to Use Fluid Grid Layouts in Dreamweaver CS6

Dreamweaver CS6 is full of new content to aid in development, and one of the best new features is the integration of fluid grid layouts. The big issue right now is how to design for multiple screens, with different sizes and how to make your designs look consistent across most devices. Dreamweaver CS6 attempts to solve this by using fluid grid layouts.

What they do is you have 3 sets of styles defined in a stylesheet that determines how your site will react and change, depending on what the size of the screen is. This gives you the ultimate level of control over how your site looks on a desktop computer, a tablet, or a mobile device. The best part about fluid grid layouts is the ability to adjust the look of each one visually, all right inside of the Dreamweaver interface. If you can click and drag, you can use fluid grid layouts.

In this tutorial, I am going to start from a fresh site with nothing created, just so you can see how things work from scratch. The first step is to go to File > New Fluid Grid Layout. The dialog box that comes up will have  different options for you to choose from in order to set up your fluid grid.

fluidsetup

Blue: For each device, you will be able to determine how many columns each one’s structure will be based upon. The first two are fairly decent, as far as structure goes. usually on mobile devices, everything is usually stacked upon itself, taking up the full width, so 5 columns makes sense. 8 columns for a tablet device is a good choice, because you can set up a very nice 2 column or 5:3 ration layout using 8 columns. The 3rd setting, for monitors and desktop computers, is an odd choice. I usually change 10 columns to a multiple of 3 or 4, such as 12, 16, or even 18. 12 is usually everyone’s favorite, because you can easily design a 3 or 4 column layout easily.

Red: These numbers determine how much of the screen that each of your layouts take up. Remember to leave space for scroll bars, etc. I usually leave these set to default, as they are generally good base settings to use anyway.

Green: This number determines the space between each column. How is determines this number is that the percentage that you dial in is calculated by the width of the actual column width. I am not sure why they set the spacing so high, but I usually lower this percentage to somewhere between 10-15%. That should give you plenty of space between each column.

In the bottom right portion of the window, it asks you what DocType you would prefer to use. I just leave it on html5, since I can take advantage of the latest and most semantic tags available, such as <nav>, <article>, etc. If you want to build using a specific DocType, you can change it here.

Upon hitting the create button, Dreamweaver will prompt you to save and name a stylesheet, where it will place all of your styles for the different screen sizes that you will encounter. Name your stylesheet whatever works for you, and save it within the root folder of your site.

The image below is the first screen that comes up and is the version that you will see when viewing your site on a mobile device. #1 is where you toggle between the different screen sizes. Using the fluid grid layout method means that you are essentially creating the same site 3 different times, but it gives you the ultimate control over each layout.

Screen Shot 2012-08-08 at 4.40.02 PM

#2 is where you will insert your fluid grid layout div tags. These are special tags that are used with the fluid grid layout system and allow you to control the size and layout of each div individually, and best of all, you can do it visually. We will get to that in just a bit.

#3 are the column guides, letting you see the structure of your layout grid. Another extra handy feature of the columns is that when you are resizing the width of your divs visually, they will automatically snap to the nearest column, making the entire process quick and easy.

Screen Shot 2012-08-08 at 5.25.39 PM

The image above is a closer look at the starting div. This is actually layoutdiv1, which is nested inside of the grid container clearfix div. You can delete the layout div1, because it is just a sample, but it is essential that you keep the clearfix div. I am going to create a simple sample layout to show you how this works.

This can contain your logo and most of the time it includes your navigation as well. To create the div for your header, go to Insert > Layout Objects > Fluid Grid Layout Div Tag. A dialog box will come up asking you to name your tag. The important thing to note is the checkbox titled “Start New Row”. This is for areas that are going to start a new row, and will span the entire width of your site, such as a header or footer, or if you have filled the width of the current row with content and you have to start a new row.

Screen Shot 2012-08-08 at 6.26.26 PM

The result below shows the new header div, and is filled with placeholder text so that it is easily visible, and it makes it easier to select within the Design view in Dreamweaver. Within the container div you can insert a new fluid grid layout div and name it whatever makes sense.I am going to place navigation next to the header, which you can do easily with the fluid grid layout settings. I unchecked Start new row, because when I resize the header section and resize the nav section, it will pop up to the same line as the header section.

Screen Shot 2012-08-08 at 6.35.51 PM

For tutorial/time purposes, I have pre-created graphics and a navigational menu for use in our example. You can make your navigational menu just the same as you normally would. Just place it inside the nav div.

Important note: To size your divs, you must click and drag the right sizing handles of each div. This will allow you to adjust the width of each div and it will snap to the nearest column that you release your mouse over. If you click and drag the left handles of your div, it will determine how much margin will be placed to the left of your div, which is completely different altogether. Below, I have already grabbed the right handles for the header div and drug them to the left, snapping them on the 2nd column, giving us 3 columns for uour navigation. Since we only have 3 buttons in our example, this will work nicely, if we had more, we would probably center the logo within the header and set the navigation under the logo.

Screen Shot 2012-08-08 at 6.42.09 PM

Click and drag the right handles on the nav div until it is 3 columns wide. It should automatically snap to the 1st row, directly beside the logo.

Screen Shot 2012-08-08 at 6.47.04 PM

Screen Shot 2012-08-08 at 6.58.52 PM

In the example above, notice the arrow in the bottom right side of the nav section. If you click this arrow, it will force the div to the next row, so if you make a mistake, or you need to move something around, you have the ability to do so easily.

I am going to click on the large monitor screen at the bottom of the window in order to switch to the desktop monitor view. Here, you will see how the layout will look on a large format screen. I am doing this because we will have a content section, a sidebar, and a footer.

Screen Shot 2012-08-08 at 7.35.49 PM

You will notice in the example above that we have  12 columns, since that is what we decided upon when creating our layout and the number of columns for each screen size. You will also notice that everything is set to default for the large screen view, so that we can decide how the divs will be laid out for large screen format. All we have to do now is click and drag the right handles on each div and resize it to our liking.

Screen Shot 2012-08-08 at 7.40.19 PM

With the large screen format, I made the logo span 3 columns, and the navigation span 4. Then, I grabbed the left controls on the nav div and drug them to the right 5 columns, giving the navigation 5 columns of margin on the left side. Next, we will create 3 new fluid grid layout divs. The first one will be called content, where we will have our main information or body of text, and we will have the Start a New Row option checked. Next will be Sidebar, with the option unchecked, and then footer, with Start a New Row checked.

Screen Shot 2012-08-08 at 8.26.42 PM

In the example above, I added in some sample content in order for this to make more sense and be easier to understand. I am going to resize the content area to be 8 columns wide. Then, I will set the sidebar to be 4 columns wide, so that the two will fill the full width of the container. The footer will remain at the bottom and will be the full width of the container. The results are shown below.

Screen Shot 2012-08-08 at 8.32.02 PM

The layouts for the tablet and the mobile screen sizes still need to be adjusted, not that we have created them in the full sized screen version. The thing to remember about this method of designing your site is that the styles are still created with the same CSS as any other site, you simply define the properties for each screen size. This is actually quite nice, because you can define specific styles for each layout. A good example would be margin. Let’s say that you have defined 50px for the margin-bottom property of your header, giving 50px of space below your header in the large screen format. you wouldn’t want that much space in the mobile screen version, because it wouldn’t be proportional to the layout. You would greatly reduce this number, making the margin comparable in appearance to the other screen sizes.

Screen Shot 2012-08-08 at 8.44.09 PM

The example above shows the mobile layout. Everything looks good here, except the fact that since we told Dreamweaver that we didn’t want to start a new row on the sidebar div, it added a little margin on the left when it is placed on its own line. The small triangle on the top left corner is all you have to click in order to align this div with the grid, which will make everything nice and tidy.

The couple of things that I should mention regarding the fluid grid layout method is that when you save your document, Dreamweaver needs to place 2 files in your site. One is the boilerplate.css file and the other is the respond.min.js file. These 2 files are essential for making this work, so be sure to allow Dreamweaver to save those within your root folder of your site files.

The other thing that I should mention is that your styles work just like they always have. Sure, you can define your styles for each specific layout, but for things like font style, colors, etc., you can define globally.

I added some styles to the site, custom fonts, my own graphics, my own images, etc. Below are examples of how the layout changes depending on what the screen size is. When the screen gets smaller, at certain points, call breakpoints, the contents reflow to fit the layout, while still looking good and staying consistent with the original look of the full sized site. One thing that you might consider on the mobile layout is changing the nav menu to a simple drop down menu. this is a popular solution for most mobile versions of larger sites.

Desktop Screen

full_layout

The Tablet Version

tablet

The Mobile Version

mobile

Conclusion

With Fluid Grid Layouts, you can build responsive layouts for your sites in a way that is simple and effect. You can visually adjust the width of each div, and you can even create different widths for different screen sizes, giving you the ability to customize the layout and perfect it for each type of device. Dreamweaver does all of the calculating for you, letting you concentrate on the design of your site and not so much about multiplying numbers. This is definitely a great tool in any web developer’s arsenal.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote