Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Productivity

Responsive Design in Adobe Dreamweaver CC

  • Print
  • + Share This
  • 💬 Discuss
Follow along with Adobe expert Brian Wood’s tutorial, and soon you'll be creating your responsive designs in Dreamweaver CC.

Responsive design has been on most designers’ and developers’ lips for a few years now as a method for presenting web content in different devices. Responsive design is based around using the same content, but applying different styling, depending on the device (viewport) size. Creating a responsive site relies on media queries in some form or another to detect the viewport size and apply styling based on that size. If you want a refresher on what responsive design is, check out the article that started it all.

In Adobe Dreamweaver CS6, a new feature called fluid grid layouts was introduced. It was the first time in Dreamweaver that you could somewhat visually create a responsive design. I say “somewhat” because it was a bit unpolished. In Dreamweaver CC, fluid grid layouts have been improved and make it easier to create that responsive site you’re after.

Figure 1 Fluid grid layouts in Dreamweaver CC

Start with Fluid Grid Layouts in Dreamweaver CC

So let’s jump into creating a responsive layout in Dreamweaver CC using fluid grid layouts. To begin with, you probably want to create a site file (Site > New Site or other methods). With the site created, you can create your first responsive site file.

  1. Choose File > New. In the New Document dialog box, select the Fluid Grid Layout category on the left.
  2. Dreamweaver, like lots of templates and boilerplates that are starting points for responsive design, break down the number of devices to three: phone, tablet, and desktop. Each device has a set width, in percent (%), that you can edit if you like. There are also a set number of columns for each device that you can edit—it’s your call. The columns are just visual and won’t appear when the site is viewed out there in the wild.

    Notice the Doctype: HTML5. The HTML you are going to be creating is HTML5. If you aren’t very familiar with HTML5, it uses most of the same tags and a “looser” writing style (for instance, it can written upper/lower case, doesn’t matter) as previous versions of HTML.

  3. Click Create to create the layout file (see Figure 2).
  4. Figure 2 Create the fluid grid layout

  5. In the Save Style Sheet File As dialog box, change the name of the CSS file to main.css, and save the CSS file in your site folder (or make a folder to put it in). Click Save (see Figure 3).
  6. Figure 3 Save the stylesheet

  7. With the new HTML document open in Dreamweaver, choose File > Save to save the file in your site folder (or at least in the same location as the CSS file).
  8. In the dialog box that appears, click OK (see Figure 4).
  9. Figure 4 Dismiss the dialog box

    This dialog box is letting you know that two files (boilerplate.css and respond.min.js) will be saved in the same location as your HTML file. They are necessary for the responsive layout to work and will need to be uploaded to your host later when you upload the page.

    An HTML file in Split view should be open. Let’s first talk about what was just created. The file you have open is your HTML page. This is the content that you will adjust for each device using styling.

  10. In the upper-left corner of the Document window, where the related files links are showing, click the boilerplate.css link (see Figure 5).
  11. In the code view on the left, you will see a bunch of CSS (styling). The fluid grid layout is based on the HTML5 boilerplate—a template that many people use to start their responsive site. This CSS content is laying the groundwork for browsers, and you probably won’t be messing with this until you learn more.

    Figure 5 The boilerplate.css file

  12. Click the main.css link next to the boilerplate.css link (see Figure 6).
  13. Figure 6 The main.css file

    This main.css file contains the CSS (styling) that contains the main formatting for the elements on your page. Scroll through the document, and you should see a few media queries that look something like this:

    “@media only screen and (min-width: 481px) {“ 

    Media queries determine which styles should be applied to which screen widths. The main.css is set up so that styling generically reads like this:

    Styling for all devices

    @media only screen and (min-width: 481px) {

    All of the above styling + styling only for viewports with a minimum width of 481 pixels

    @media only screen and (min-width: 769px) {

    All of the styling for all devices + styling only for viewports with a minimum width of 481 pixels + styling only for viewports with a minimum width of 769 pixels

    The thing that isn’t readily apparent, and the thing that gets most of us in trouble at times, is that the styling cascades. It’ll make more sense when you start editing the layout for each device. For now, let’s jump into designing the page.

  14. Click the Source Code link in the upper-left corner of the Document Window to see the HTML again (see Figure 7).
  15. Figure 7 Click the Source Code link

  16. Click the Design tab to just see the design view.
  17. In the lower-right corner of the Document window, you’ll see three view options: Mobile Size, Tablet Size, and Desktop Size. Each of the buttons will frame the page content in the generic size of the selected device.

  18. Click the Tablet Size and then the Desktop Size button, and then click the Mobile Size button to return to the mobile design (see Figure 8). Click the Mobile Size button again, and you can turn off the preview to see a full size. Click the Mobile Size button once more to view the mobile design.
  19. Figure 8 Switch between design layouts

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus