Making an existing site responsive with new capabilities in Dreamweaver CC
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.
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:
- 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.
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:
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
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:
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:
- Switch to Live view and click anywhere in the top nav bar area. Changing classes in Live view is very straight-forward.
- 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.
Bootstrap is really CSS class driven—and Dreamweaver knows this road very well. As you enter the multiple classes for the
- 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.
- 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.
- 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.
- Click once on the tag with the new navbar-brand class to identify the closing
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.
- Insert the
code to create the navigation menu button when the screen width becomes too narrow. Add the following code right after the opening: