Creating Responsive Web design

June 6, 2016
Visit dhtmlhub.com for more

Antonio Gaudi Website Created in Dreamweaver CS6Creating 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.

Dreamweaver Fluid Grid Layout FeatureAs 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).

Save Boilerplate and other style sheets Switching between mobile, tablet, and desktop in Dreamweaver layouts change the display size of any of the target devices Insert images into a responsive design
YOU MIGHT ALSO LIKE
Inkscape - Creating vector graphics for responsive web design!
Inkscape - Creating vector graphics for responsive web design!
Responsive Web Design: Using rems to create responsive
Responsive Web Design: Using rems to create responsive ...
Create a Responsive Web design using CSS3 and HTML5
Create a Responsive Web design using CSS3 and HTML5
Share this Post