Making an existing site responsive with new capabilities in Dreamweaver CC

Making an existing site responsive with new capabilities in Dreamweaver CC
Adobe Products Featured

Keeping current website clients happy is just as important as securing new ones. And, in today’s multiple device world, happiness is a responsive site. Dreamweaver CC 2015 includes very powerful tools for creating responsive sites from scratch—which can also be leveraged to convert non-responsive web pages into Bootstrap-driven multi-device ready ones.  In this post, we’ll run through the retrofit process, step-by-step.

Starting with a non-responsive website

Let’s start by taking a look at what we have to work with. I’ve opened index-original.html in Dreamweaver. With the document window fully expanded, everything looks just fine; I’m sure it looks great on the client’s desktop system.

pic1

But, look at it on any other different size screen, and the picture is far from rosy. Use the Window Size feature from the bottom-right of the Status bar to choose any device width, such as 375 x 667 iPhone 6, and many issues arise:

pic2

  • Navigation is split into two rows, with the bottom one falling out of the dark background and overlapping the heading text.
  • Heading text is badly positioned.
  • Hero image remains full size and the user would need to scroll mightily to see it all.
  • Mission statement stretches beyond the screen.
  • Only one of the 3 service columns is initially viewable, so it looks like that’s all that is offered.

The only saving grace is that all the footer text is on-screen and centered—but the rest is a mess and needs a shot of Bootstrap powered responsive love. Let’s get started!

Integrating with Bootstrap

Dreamweaver CC is now fully Bootstrap compatible, from the Live view UI to Insert panel objects to code hinting and completion. We’ll bring all those components into play as we pull the web page into the multi-screen age.

When I tackle a job like this, I like working from the outside in—which, in this case, means adding the necessary code to work responsively for the whole page. The first element needed is a meta tag to adjust the viewport according to the width of the device.

pic13

Meta tags are placed in the section and Dreamweaver will do this you automatically in Live view by choosing Viewport from the HTML category of the Insert panel. It’s a one-click operation—no dialog box appears—the proper code is simply added:

Next, we’ll need to bring in the required Bootstrap files.  There are two—one CSS and the other JavaScript—and you can find both on getbootstrap.com. Once you’re on the site, click the Download link. From their download page, you can either pull down the files to host on your own site or, as I’ll do for this example, get the CDN links.

First, I’ll scroll down to the Bootstrap CDN section and copy the initial CSS link to bootstrap.min.css:

Naturally, your version number may be different. I’ll paste this in the section, just below the tag and above my own page CSS file (original.css in the example files). If you want to work with established Bootstrap themes, you should also copy the boothstrap.theme.min.css link; however, it’s not needed for this example.

Next copy the tag that includes the latest CDN version of the bootstrap.min.js file:

Although it could also go into the area, this code snippet is best placed just above the closing near the document’s end. Finally, we’ll need to add a call to jQuery, the JavaScript framework foundation for Bootstrap. Again, I’m going to go with a remotely hosted file. Choose your favorite as long as it is version 1.9.1 or higher, as required by Bootstrap.

Paste the jQuery tag above the Bootstrap so that it can be loaded in proper sequence.  Code view of the bottom of the file should look like this:

pic4

Save your HTML file and switch to Live view. You won’t see any differences on the page yet—a bit more work to do for sure!—but the Bootstrap foundation is now well and truly laid.

Note: There is one change that will be pretty noticeable: the multi-colored Visual Media Queries toolbar is now visible at the top of the document window. We’ll explore that functionality in a section a bit later in this tutorial.

Modifying page structure: Navigation

Now we’re ready to begin tackling the page content and we’ll start with one of element that really benefits from the responsive treatment, navigation. HTML navigation is typically accomplished with heavily styled unordered lists. When the screen width narrows (as with a smart phone), you still want the user to be able easily view and access each nav item easily. Definitely not the case with the non-responsive page.

The most common responsive solution is to replace the list items with a menu button—which, when selected, displays the nav list in far more accessible overlay. Let me show you how to transform a traditional navbar into a fully responsive one:

  1. Switch to Live view and click anywhere in the top nav bar area. Changing classes in Live view is very straight-forward.
  2. Select the initial

    tag from the Tag Selector and in the Element Quick View (commonly referred to as the heads-up display) replace the custom orig class with three Bootstrap-specific ones: navbar, navbar-default, and navbar-inverse.pic14
    Bootstrap is really CSS class driven—and Dreamweaver knows this road very well. As you enter the multiple classes for the 

    tag, you’ll see the code hinting feature pop-up to help you get the syntax just right.
  3. Switch to Split view and select the code within the


    In addition to using targeted classes, Bootstrap is very dependent on a specific structure and you’ll quite often have to add additional markup. For the navigation, we’ll add two nested divs around the existing nav content.
  4. From the Bootstrap Components category of the Insert panel, choose Container-fluid.
    Dreamweaver will wrap a div around the selection with the class of container-fluid . Bootstrap uses both container and container-fluid The container-fluid class extends to the full screen width, perfect for our navbar.
  5. In Live view, use the Element Quick View to change the logo class to navbar-brand.
    Again, swapping a custom class for a Bootstrap native one.
  6. Click once on the
    tag with the new navbar-brand class to identify the closing

    element and then move the closing tag after the code block.
    Dreamweaver CC makes it one-click simple to find the related closing tag. Just one last coding task to do—but it’s a dozy.
  7. Insert the code to create the navigation menu button when the screen width becomes too narrow. Add the following code right after the opening:
     
    

Recommended Articles