Call Today
}
Hours

Mon – Fri, 8am to 5pm

Using Fluid Grid Layouts in Dreamweaver

by | Jul 21, 2013 | Articles, Dreamweaver, Tutorials, Web Design, Web Development | 1 comment

Fluid Grid Layouts

Creating a responsive or an adaptive website can be a difficult task to say the least. If you aren’t using a framework of some kind, trying to calculate the columns, their widths and percentages can be enough to drive anyone nuts. Dreamweaver attempts to solve this problem with fluid grid layouts. This is a feature that allows you to create responsive websites in a visual way, instead of having to hard code all of the percentages. The video below shows you how to set up and begin working with fluid grid layouts.

The great thing about fluid grid layouts is the fact that you can use the visual design view in Dreamweaver to build your site’s structure visually. Your layout can be manipulated simply by clicking and dragging fluid divs, based on what screen size you are working with. This is excellent for people that are more visual and less technically inclined. If you have ever wanted to build websites, but just aren’t code-minded, then fluid grid layouts may just end up being your salvation. With a few clicks, you can adjust column widths, and they are automatically calculated for you. Click another button, and you can place fluid divs next to each other.

fluid-grid-layouts

All of the css, javascript and the boilerplate css is automatically generated. The method that Dreamweaver uses for this media queries. It automatically sets up media queries based on general desktop, tablet and mobile device screen sizes. You can hop between these different sizes by selecting the device via the icons in the bottom right corner of Dreamweaver’s interface.

Conclusion

Fluid grid layouts are a great tool for any designer that wants to build responsive websites visually. Dreamweaver essentially does all of the leg work for you, so you can focus on creating killer designs, without having to fool with calculations, columns, specifying device widths, etc. So what do you think about fluid grid layouts? Have you tried fluid grid layouts in Dreamweaver?

Divi WordPress Theme