Creating Responsive Web design

Creating responsive designs is the best new thing in web design, and Adobe’s new Fluid Grid Layout system is a great place to start in Dreamweaver CS6.

The new Fluid Grid Layout option is available from the File menu, and it’s a new category in the New Document Window.

As you develop your designs, keep in mind that the key to creating a responsive web design is to position all of the divs and other elements in your HTML document in a way that will work in all three layouts. For example, in the mobile version, create a single-column layout, in the tablet, create a two-column layout, and in the desktop version, expand the design to three or more more columns.

Remember, in responsive design, the divs and other elements have to be positioned on the page in such a way that using only CSS, you can rearrange them to display best on each device category (phone, tablet, desktop). This approach requires some planning, and usually a bit of trial and error. However, your reward will be that you will get a consistent, efficient web page look & feel, that works on multiple devices.

Get Started: Follow these steps to create a simple, adaptable, web design using the Fluid Grid Layout features.

Step 1: Create a New Fluid Grid Layout

Choose File > New and the in the New Document Window, select the Fluid Grid Layout category. In this dialog, you can change the number of columns that make up the grid for each of the three target sizes, you can specify the percent of the column width that is used in each of the margins between columns, and you can specify the total percentage of the browser window that will be filled by the grid layout.

You can also use the DocType drop-down to select the version of HTML you want to use (usually HTML5, although there may be reasons you would use another standard).