Design a responsive website

See how you can go from a web mockup to a fully responsive website that looks great on mobile. (Try it, 8 min)

What you'll need

  Comp CC for iPad, iPad Pro, and iPhone

 

Step 1 of 8 (optional)

Copy our sample assets to your Creative Cloud Libraries

To re-create this responsive layout, use the assets in the Vermilion responsive website library. Click Save to Creative Cloud to copy the Library to your own account so you can access the assets directly in Adobe Comp CC or in Photoshop.

Note: You need to be signed into your Creative Cloud account to save the library. Get an Adobe ID if don't have one.

Copy assets to Creative Cloud

Step 2 of 8

Explore layout ideas in Comp CC

Open Comp CC on your iPad and click the + sign to create a new project. Select New Format and name it Responsive Layout. Enter Width: 1280 pts; Height: 1500 pts and tap Save Format and tap the new layout to open it.

Draw an X where images will go. Comp converts your gestures into objects as you draw. Tap an image placeholder, then tap the Graphics icon at the bottom of the screen. Tap My Libraries and choose the Vermilion website library. Tap the correct image to put it in the placeholder. Tap once to transform the image or to reposition the frame; tap twice to resize the image within the frame.

Repeat this process to create a layout for your website.

Tip: Tap the gear icon at the top of the screen to get help on drawing gestures.

Explore layout ideas

Step 3 of 8

Add text and shapes to your layout

Draw a rectangle with a dot to add headline text. Draw some lines with a dot to create multi-line text. Draw rectangles to create vector shapes for the website's footer and the banner overlay. Comp converts your gestures into components as you draw.

Tap the rectangle for the footer, then tap the icons to change its color or opacity. Tap a text frame, and then the Text icon to style the type.

Tip: Tap the gear icon at the top of the screen to get help on drawing gestures.

When you are finished, tap Send, then Send to Photoshop.

Add text and shapes

Step 4 of 8

Flesh out your responsive layout with Artboards in Photoshop

Use the Comp layout as a template to design screens for your mobile app or website. If Photoshop is open, the comp opens as an editable Photoshop document. 

Finalize the comp, then select all the layers in the Layers panel. Choose Artboard from Layers in the Layers panel options. Name the artboard 1280px-Web.

Choose New Artboard from the Layers panel options. Set its width to 768px and height to 1830px. Name the artboard 768-Tablet Design and click OK. Create a 320-Mobile Design artboard. Set its width to 320px and height to 2300px.
 
Use the Layers panel to copy the layers from the 1280px - Web artboard into other artboards, and then manipulate the elements as needed for each device layout. Save the file as vermilion-responsive-layouts.psd.

Tip: Preview layouts on iOS devices with Adobe Preview CC, a companion app for Photoshop.

Artboards in Photoshop

Step 5 of 8

Browse Photoshop documents directly in Dreamweaver

Download the sample site and open index.html. Open the Extract panel and click the vermilion-responsive-layouts.psd saved in your Creative Cloud Assets to open it. ALT+Click to view the artboard for each layout.

Click elements displayed in the Extract panel to view and copy their CSS attributes, then paste the CSS as desired. Click Layers to view the structure of your PSD. Click a folder icon to expand a layer group. Click Extract Asset to save images from the artboard. 

See Batch Extract Assets to learn how to extract production-ready images in multiple sizes.

Note: You can practice with the sample files. Unzip and open vermillion-responsive-layouts.psd and save it to Creative Cloud Files.

Browse Photoshop docs in Dreamweaver

Step 6 of 8

Add responsive components to your website

In Dreamweaver CC 2015, you can build responsive websites rapidly. Use visual media-query breakpoints to create layouts for different screen sizes. Click the blue bar to design a 768px to 991px layout.

Drag Bootstrap components directly from the Insert panel. Click Live View, and navigate to the footer in the DOM panel. Open the Insert panel and choose Bootstrap Components from the drop down. Click Grid Row with column. Then, select Before, and click OK to accept the default 3-column grid to create the structure for a responsive image gallery.

Drag and drop a gallery image from your layout in the Extract panel to the center of a column. Press Enter to insert the image into the column. Customize the appearance of the downloaded asset by adding standard Bootstrap classes such as .img-responsive, .center-block, and .col-md-3 to the image and column.

Repeat the process for the other two columns.

Add responsive components

Step 7 of 8

Visually check your responsive layouts

Drag the Scrubber in Live View to see how your website will display at different breakpoints. Your responsive website will automatically resize and reflow as you drag.

Alternatively, click the green, blue, and purple media-query breakpoints to see how your design adapts at different breakpoints.

Use media-query breakpoints to visually modify the CSS for each layout. Click the green breakpoint and select the overlay div. Right-click and select Hide Element. If you click other pre-defined media-queries, you’ll notice the overlay div still appears in these layouts.

See How to make and style a responsive web page to learn more.

Check your responsive layouts

Step 8 of 8

Preview your website on a mobile browser

Preview and inspect your responsive designs on mobile devices using the Device Preview feature. Make sure your desktop and devices are connected on the same Wi-Fi network, and click the Device Preview icon. A pop-up appears. Scan the QR code on the device(s) you want to preview with. You can preview simultaneously on iOS, Android, or Windows devices. You can also copy/paste the URL into your desktop browser or type it into your device's browser.  

See Preview and inspect on mobile devices to learn more.

Preview your website

 

 

Let us know what you think