Adobe Dreamweaver CS6 adds mobile tools but neglects core Web technologies

Adobe Dreamweaver is a solid Web development tool that includes a code editor, a visual design mode, sophisticated Cascading Style Sheet tools for creating, editing, and managing CSS, and site management features such as a built-in FTP client for transferring files from your computer to your Web server. In Dreamweaver CS6, Adobe adds tools to work with new CSS properties, to build mobile-ready Websites, and to take advantage of Adobe’s related services—Business Catalyst, a commerical web hosting platform and PhoneGap Build, a cloud-based service for compiling apps for mobile platforms.

Web fonts

For most of the history of the Web, designers have been forced to resort to a handful of fonts—those already installed on the majority of computers worldwide. Because traditional Web typography relies on fonts already existing on a visitor’s computer, designers couldn’t simply select among the thousands of beautiful fonts available.

Now, however, all major browsers support Web fonts: These let designers place a font on their own Web server and allow visitors to download it while viewing that particular website. Unfortunately, different font formats are required to support certain common Web browsers, so obtaining those different formats and figuring out the CSS code for using them can be tricky. For example, TrueType format works on many, but not all browsers, while Firefox uses Web Open Font Format, Internet Explorer 8 requires Embedded OpenType format, and some iOS versions require Scalable Vector Graphics format.

Dreamweaver CS6 helps with the second part—adding the CSS to your site code. You can find Web-ready fonts from various type foundaries, or download free fonts from FontSquirrel. Once you’ve downloaded the fonts, you can use the program’s new Web Fonts Manager to add them to Dreamweaver. A straightforward interface makes it easy to select the fonts, and make them available when creating CSS styles. After you add a font to a CSS style, Dreamweaver copies the required font files into your site, and generates the CSS code to make the font available to your site’s pages and viewers.

Unfortunately, Dreamweaver doesn’t provide any tools for working with common Web type services such as Google’s free Web font service or even Adobe’s own TypeKit. In addition, the Web Fonts Manager doesn’t have a way of defining variants of a particular font (bold or italics, for example). This means you can’t simply make text bold or italic within Dreamweaver and expect that the proper versions of those fonts will be applied. You can work around this by specifying those font variants for assorted tags (for example, apply the bold version of a font to the “strong” tag, or the italics version to the “em” tag), but this is extra work that Dreamweaver could have done by generating the CSS in a slightly different way.

Nonetheless, the Web Fonts Manager is a boon for designers, as it simplifies the process of using Web fonts.

CSS transitions

CSS transitions let you animate changes in CSS over a prescribed period of time: for example, you can animate a change in a link’s color as the mouse moves over it, and then animate the color back to its original color when the mouse moves off it. Dreamweaver CS6 introduces a CSS Transitions panel for creating these types of animations. You can animate most CSS properties including background color, font size, positioning, margins, width, height, and a lot more. CSS Transitions are limited to the few changes of state that are available to CSS: that is, you can only trigger an animation in a few cases: when you mouse over an element, when you click (or tab) into a form field, check a radio button or checkbox, or link to an anchor within a page. Dreamweaver won’t let you add animations to the page when it loads, or when a visitor clicks on something. The most common transition is a Hover transition, with which you can achieve amazing looking effects without Flash or JavaScript.

Since CSS transitions animate changes from one set of CSS properties to another, you start by creating a CSS style—this could be a tag, class, ID, or more advanced selector. Then, in Dreamweaver’s CSS Transitions window you click the new transition button to open a control panel for creating a new transition. Here, you pick a style you created from the Target Rule menu—this represents the starting position of the animation. Then you select one of the change states from the Transition On menu—this declares when the animation begins: for example, when you mouse over the element. Finally, you pick how long the animation should take, which CSS properties to animate, and their final values (for example, the color “orange”).

You can add, edit, and delete any number of CSS transitions on a page. Best of all, Dreamweaver takes care of the abundance of messy code required to create the CSS transition. CSS Transitions are fun and look great—however, while Chrome, Safari, Firefox, and Opera understand CSS transitions, most versions of Internet Explorer don’t (only the not-yet released IE 10 will be able to display them). That means that a large part of the Web surfing world won’t be able to enjoy the CSS transitions you create.

Where are HTML5 and CSS3?

While Web fonts and CSS transitions are a good first step into CSS3, Dreamweaver doesn’t provide nearly the same support for other popular CSS3 properties like box-shadow, text-shadow, border-radius, and gradients. That’s not to say Dreamweaver doesn’t provide some tools for these, but that’s an area of confusion.

Dreamweaver CS6 provides three ways of creating and editing CSS: code view, where you write your own CSS; the CSS Rule Definition window, a friendly, easy-to-use window for selecting CSS properties and values; and the Properties pane of the CSS Styles panel. The Rule Definition window is by far the easiest way to create CSS, and the one commonly used by beginners and intermediate users. Unfortunately, Adobe hasn’t updated this window for several versions of the program, so it’s missing many common CSS properties (even properties that have been around since CSS 2.1).

If you want to take advantage of useful CSS properties like border-collapse, box-sizing, and the many new CSS3 properties, you must either code them by hand or turn to the Properties pane. It’s unfortunate that Adobe didn’t take this opportunity to revamp the CSS style creation process and either come up with a unified method for generating CSS code, or, at the very least, update the Rule Definition window to include all popular CSS properties.

Moreover, many new CSS3 properties—like CSS gradients—are highly visual and difficult to create. A visual tool for creating and previewing these types of properties would be a great addition, and seems like a logical step for a company with a history of creating visual design tools.

HTML5 tools are also noticeably lacking in this release. While Dreamweaver CS6 does let you choose an HTML5 doctype for your pages, it doesn’t provide any tools for inserting or managing new HTML5 tags like video, audio, header, section, article, aside, and so on. Nor do any of its form tools let you specify any of the new HTML5 form types like the email, date, and color or form attributes like placeholder or autofocus. You can, of course, add HTML5 manually in code view, and Dreamweaver includes code hints for HTML5 to guide you, but don’t we use Dreamweaver because it’s more than just a text editor?

Mobile Web design

The incredible growth in smart phone ownership has forced Web designers to rethink how they build websites. With more sites being viewed on mobile devices like phones and tablets, designers are turning to various techniques to make sure their sites look good and perform well on smaller screens. Dreamweaver CS6 includes two new features to help build mobile sites.

Dreamweaver CS5.5 introduced support for jQuery Mobile, a JavaScript and CSS-driven method for converting standard HTML5 into amazingly app-like Web pages. Adobe continues this support by updating Dreamweaver CS6 to version 1.0 of jQuery Mobile and adding a jQuery Mobile Swatches dialog, which makes it easy to apply different swatches or designs to jQuery Mobile elements. This panel reads the current jQuery Mobile stylesheet and displays a visual representation of the different swatches available for the site. The panel is context sensitive, so depending on what type of element you’ve selected (list, footer, collapsible panel) you’ll only see the themes that can be applied to that element.

The jQuery Mobile tools in Dreamweaver are easy to use, though the program doesn’t provide a straightforward way (besides writing the code yourself) for adding certain jQuery Mobile elements like navbars, dialog box links, or page transitions. In addition, even before Dreamweaver CS6 was released, jQuery Mobile issued a 1.1 update, offering several new and important features including improved Android support. Until Adobe adds a way to update jQuery Mobile from within Dreamweaver, users will either have to download and install new versions themselves or stick with the older version of jQuery Mobile that comes with the program.

Dreamweaver CS6 has a new feature called Fluid Grid Layouts for building Web pages that adapt to browser window width. Using CSS media queries and a flexible grid system, you can present the same HTML in different ways for different devices: for example, a page can provide a single column of content for the small width of an iPhone, a three-column design for an iPad, and a complex five-column design for a desktop browser. This technique, called Responsive Web Design, is tricky because it requires you to juggle different sets of CSS styles to create layouts for each device.

Dreamweaver CS6 provides a clever visual representation of your layout and controls to preview the design for phone, tablet, and desktop. A “mobile size” button in the bottom of the document window, lets you see the layout for a phone. You can then add new layout boxes and control their position using various controls on the page. Once you’ve mastered the mobile version, click the tablet button and change the layout for that page.

There are some limitations to this tool, however. You can’t apply a fluid grid layout to an already existing page—you need to build this type of page from scratch. In addition, you can’t create nested grids, a common technique for complex CSS designs. Finally, the tool relies on the same CSS selectors being applied to each type of device using media queries. However, Dreamweaver CS6’s CSS Styles panel doesn’t indicate where one media query begins or ends, making it very difficult to identify which CSS style applies to which layout.

Other enhancements

Dreamweaver CS6 offers many smaller enhancements. There’s now a friendly interface for applying multiple classes to a single tag (a common technique among designers), an updated multi-channel FTP engine for faster, simultaneous uploads and downloads, and a revamped tool for inserting Photoshop files into a Web page. That last change may or may not be an improvement for you: while it simplifies how you insert a Photoshop file into a page, it also removes many of the tools provided in Dreamweaver CS5.5, such as the ability to resize, crop, and compare different optimization settings when importing the image.

If you use Adobe’s commercial Web hosting service, Business Catalyst, Dreamweaver CS6 includes built-in tools for adding features specific that service. In addition, built-in access to Adobe’s PhoneGap Build Service provides a simple way to take a jQuery Mobile based site and turn it into a mobile app for iPhone, Android, Blackberry, and other mobile devices.

Other areas of the program are not aging gracefully. Dreamweaver’s visual Design view which lets you add content and edit a visual representation of your Web page is great for simple designs, but often fails to display complex CSS-based layouts correctly. Dreamweaver’s server-side tools also didn’t receive any love this version (as has been true for the last two versions of the program).

Macworld’s buying advice

Dreamweaver CS6 is a powerful Web builder with great code-editing, CSS, and site management capabilities. It introduces great additions for working with a couple of CSS3 properties and for building mobile-friendly websites. However, this version seems to be slipping behind in some of the core technologies Web designers depend on. Lack of HTML5 tools, disorganized CSS creation, and an ineffective design view make it difficult to build sites using current standards and techniques.

[David Sawyer McFarland is the author of Dreameaver CS5.5: The Missing Manual (O’Reilly, 2011)]