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.

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 simple gestures to create the base layout of your design
• Add colors, images, graphic and text styles that you use in desktop apps, such as Adobe Photoshop CC and Adobe Illustrator CC, directly from your team’s Creative Cloud Libraries
• Leverage fonts from Typekit to create the finished look of your design

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).

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

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.

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.

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.

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.

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-*).

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

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.

Finally, click and drag the Offset Column icon to move columns to the left right in your 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.

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.

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.