Adobe Creative Cloud

July 8, 2015 /Learn /

Responsive Web Design… from Comp to Publish

The June 2015 release of Creative Cloud includes new and updated apps to provide a comprehensive resource for designing, developing, testing, and publishing responsive websites.

And, the Creative Cloud Learn team has created learning content for all of these new products and services.

Use Adobe Comp CC to create a responsive web layout on the go.

Use Adobe Comp CC to create a responsive web layout on the go.

Design anywhere with Adobe Comp CC

You can begin your web and mobile app design while you’re on the go with Adobe Comp CC on your iPad.


Use artboards in Photoshop CC to create and view multiple layouts.

Use artboards in Photoshop CC to create and view multiple layouts.

Use artboards in Adobe Photoshop CC

Finish your comps in Photoshop CC using artboards—new in June 2015—to create mobile, tablet, and desktop layouts and view them all at once.

Then, prep your PSD for use within Adobe Dreamweaver CC (Step 5 has a Dreamweaver CC-ready sample PSD to practice with).

Batch extract web-optimized images from PSDs into web layouts.

Batch extract web-optimized images from PSDs into web layouts.

Extract PSD layout and design info into Dreamweaver CC

Then, bring your Photoshop CC comps into Dreamweaver CC and extract web design info and batch extract assets directly into your web layouts where you can use the new responsive web design features to build a website that adapts for optimal display across multiple device browsers.

Note: Check out From PSD to HTML & CSS for a more detailed look at the Extract feature in Dreamweaver CC.

Use the visual responsive web design features in Dreamweaver CC

The 2015 release of Dreamweaver CC includes new features that make it faster and easier to create and edit responsive web designs. These features include:

  1. New document dialog updated to create an initial responsive layout
  2. Draggable Live View scrubber
  3. Visual media query breakpoints in Live View
  4. Reusable Bootstrap components

070815_LearnWeb_4

Bootstrap tab on New Document dialog.

1. Create a new responsive HTML document
The New Document dialog now has a Bootstrap tab you can use to specify the initial layout for your web page.

Note: The default settings work well for most responsive design layouts. If you would like to understand the Bootstrap grid system a bit more, check out the detailed description in the Bootstrap documentation.

Live View scrubber.

Live View scrubber.

2. Preview different device layouts with the Live View scrubber
When you create a new document based on the settings in the Bootstrap tab, Dreamweaver CC creates the base files your page will need for responsive layout and behavior including:

  • Initial HTML page with default content (the default content provides additional instruction and background information on the responsive features)
  • bootstrap.css containing the base layout and styling for each of the screen sizes you specify in the New Document dialog
  • jquery-1.11.2.min.js and bootstrap.js to provide some basic functionality

You can use the Live View scrubber to preview your design at various sizes at any point throughout the design process.

Click visual media query breakpoints.

Click visual media query breakpoints.

3. Use visual media query breakpoints to design for different screen sizes
Media queries enable you to define the layout for multiple devices within your site’s CSS. The new visual query breakpoints in Live View provide an interface to update the CSS for responsive design in a visual way.

The colored bars just above the document window indicate the width of each of the device sizes and directly correlate to the screen—or, more specifically, viewport—size as defined in the media query.

Click the appropriate media query bar to view the design for that layout. Then, continue to design the layout as needed. Dreamweaver CC updates the media query sections in the CSS for you.

Note: You still have the option of updating the CSS directly through CSS Designer, or in Code View at any point in your design process.

Note: the Dreamweaver product team recommends that you add any custom settings to a new CSS file rather than updating the default bootstrap.css file.

Add additional media queries.

If you need to add more media query breakpoints, for optimal display on smaller devices for example:

  1. Drag the Live View scrubber to the approximate width and click the + sign in the rule to add a breakpoint
  2. Click the appropriate label to add a max-width or a min-width
  3. Specify the CSS source
  4. Add a new CSS file to your site if necessary

Note: The Dreamweaver CC product team recommends that you add any custom settings to a new CSS file rather than updating the default bootstrap.css file.

4. Design responsive layout with rows and columns
The new Bootstrap integration enables you to design your layout with rows and columns. Live View has visual tools to make it easier to add rows and columns to your design.

Select rows and columns in Live View.

Select rows and columns in Live View.

The boundaries are indicated by dashed lines for each row (gray) and column (blue). Click on the boundary to select the row or column as needed.

Note: The heads up display (HUD) in Live View shows the class name indicating whether you have selected a row (.row) or column (.col-*).

Add new rows and columns to your layout.

Add new rows and columns to your layout.

Then, click the Add New Row, or Add New Column icon that is enabled when you select the row or column.

070815_LearnWeb_10

Resize columns.

You can also resize columns directly in Live View by clicking on the Resize Column icon to the right of the selected column and dragging until it is the correct size.

070815_LearnWeb_11

Move columns using the Offset Column option.

Finally, click and drag the Offset Column icon to move columns to the left right in your design.

070815_LearnWeb_12

New Bootstrap Components for responsive web design

Finish your design with Bootstrap Components

There is a new set of responsive design components available to you from the Insert panel. The new Bootstrap Components are reusable components you can use to add nav bars, responsive images, media objects, accordion or tab interfaces, icons, and other design elements to your page.

Add Bootstrap Components to your design.

Add Bootstrap Components to your design.

Click on a row or column, then click a component from the Bootstrap Component category to add it to your design. Dreamweaver prompts you to specify whether you wish to add the component before, after, or in (nest) the selected row or column.

Finalize your page by adding any custom styling and layout as needed. Check out Style with CSS for a demonstration on how to add styling with the CSS Designer.

Use Device Preview to preview and inspect across devices.

Use Device Preview to preview and inspect across devices.

Preview and test designs across desktop and mobile browsers

Preview and inspect your designs simultaneously on live devices and desktop browsers with Device Preview. Scan the barcode with your device, or enter the URL generated in the Device Preview panel to conduct a live preview of your design.

Then, publish to the world

Once you’re happy with your design, you can publish your site to a web server from within Dreamweaver just as you have always been able to do. Check out Publish and manage websites to see how.

Learn

Join the discussion