Adobe Dreamweaver CS6 in Review

When first opening Adobe Dreamweaver CS6,
don't let the familiar User Interface (UI) fool you into thinking
that there are only moderate changes in this new version. Unlike
other programs in the CS6 Master Collection Suite, the changes in
the Dreamweaver CS6 UI are minor, yet the new
features within Dreamweaver CS6 are significant. If you are
thinking of upgrading your current version of Dreamweaver, this is
the one that will fill all your web designing needs.

User Interface

The first notable change to the UI's document pane is the
streamlining of the Document Toolbar. The Multiscreen Dropdown Menu
button has been replaced by a compact Multiscreen Icon.
The new Document Toolbar not only provides a sleeker appearance to
the UI, but more importantly, it's a practical improvement. The
combining of the different functions, and especially the removal of
the Browser Navigation bar from the "optional toolbars
dropdown" menu, allows space for the Document Toolbar and the
Style Rendering Toolbar to reside side-by-side. For those designers
that like to simultaneously utilize all the toolbars, this
seemingly small change provides additional workspace in the
Document Window.

Another change to the Document Toolbar: the new Live
[live view preview] button is located next to the Code/Split/Design
buttons, and is now the single gateway to: Live Code, Live View,
and Inspect.

New links have been added to the Application Bar. Under
Sites, the Manage Sites dialog box (Sites/Manage Sites)
has a new, sleeker look. Although many of the functions remain the
same, this version makes it easier to initially setup a new site.
Within the main setup menu are two Business Catalyst (Adobe's web
hosting program) buttons. The new Business Catalyst Site button
enables you to create a temporary site within Business Catalyst;
and the Import Business Catalyst button lets you import Business
Catalyst sites to work on within Dreamweaver.

Another new link under Sites, on the Application Bar,
is a gateway to Adobe's PhoneGap Build Service (which replaces the
Dreamweaver CS5 Mobile Applications link). For those who have a
PhoneGap Build Adobe account, this is a quick and easy way to
connect and upload your Dreamweaver files. Also, new to the
Application Bar, under File, is a link to create web pages
using the new Fluid Grid Layouts.

Three new icons have also been added to the Status Bar, which
help you easily design for three different standard screen sizes
for mobile phones, tablets and computers.

New CSS Features

Dreamweaver's new CSS Transitions Panel (located under Windows)
allows website designers to use CSS Transitions to achieve effects
that were once only accomplished in Flash or JavaScript. CSS
Transitions are easy to use effects that allow designers to add
visual flair to a website, by letting elements smoothly morph from
one style to another. Currently, a popular use of CSS Transitions
by web designers is to animate (enlarge or rotate) images in a
photo gallery.

Another new CSS feature is the ability to apply Multiple CSS
Classes to a single element. Dreamweaver CS6 makes it possible to
add Multiple Classes directly into your document. It also gives you
multiple ways to utilize the same feature from within the property
inspector: directly from either the CSS or HTML panels.

Image Optimization

Dreamweaver CS6 has redesigned its Image Optimizer. As with the
previous version, if you import an image file that is not web
compliant (for example an image that was only saved in a Photoshop
PSD format), you can still drag and drop the image into your web
page and Dreamweaver will convert the file so it can be viewed on
the Internet.

In Dreamweaver CS6 a scaled-down version of the Image
Optimization box pops up. You can still optimize your original
image, but the optimizing controls are limited. This redesigned
Image Optimization panel allows users to optimize on the fly. The
quality-slider also provides a preview of how the image will appear
when uploaded to your server, along with the new file size.

There are some downsides to this feature. If, for example, you
use the same optimized image on different pages within the
same site, changes that you make to the image on one page will
affect the images on all the pages. This can be even minor
changes, like resizing. The easy workaround is to open the image in
Photoshop, make the changes, and reload it to your site under a new
file name.

Fluid Grid Layouts

Each month a new assortment of mobile devices flood the
marketplace; accompanied by advertizing, urging customers to
embrace the new, improved and redesigned [smartphone, tablet,
laptop]. The consumers' overwhelming need to "keep
current" with the innovative is a web designer's dread. As
always, Adobe remains the leading futurist in regards to turning a
quandary into an advantage. This is most apparent with the addition
of Fluid Grid Layouts to Dreamweaver CS6.

If you are teetering on the edge of upgrading to Dreamweaver
CS6, the introduction of Fluid Grid Layouts is the "must
have" new feature that will erase all doubts. Fluid Grid
Layouts is ground-breaking technology. In the past, to accommodate
the numerous size differences of devices that we view websites on
(to view the site as designed), separate pages needed to be created
from scratch. With Fluid Grid Layouts, one design is designed with
options to easily expand or contract certain page elements,
depending on the device it is viewed on [desktop/laptop,
smartphone, tablet].

Like the name implies, the new Fluid Grid Layouts [File/New
Fluid Grid Layouts] feature's magic is in its grid design fluidity.
This new feature gives designers the option to create
"grid-based layouts," that automatically adapt to screen
size changes of up to three different devices by choosing: the
number of columns for each device; the gutter percentage (space
between columns), the percentage of the targeted width's viewing
area for each device.

Same design viewed in a full screen and on a smartphone

Moving the grid lines on the left adjusts the margin within the
Div, and moving the grid line on the right adjusts the width of the
grid. You can also align the Div with the grid. Until you get used
to their functionality, it's easy to confuse what each line
adjusts. As with all things Adobe, the more you use a function or
feature, it quickly becomes second nature.

Lastly, when first saving your new Fluid Grid Layouts page,
notice that it adds a CSS (Boilerplate) file and JavaScript
(respond.min) file. For the Fluid Grid Layouts feature to work, it
is imperative to keep both of the newly created (CSS and
JavaScript) files in the same folder as your recently created Fluid
Grid Layouts HTML file.

Web Fonts Manager

Designers from the print industry are always looking for new
ways to bring their creative font innovations to their web pages.
Yet, web coders know that there are limited numbers of fonts that
are truly web-safe, and can be viewed across the majority of
platforms and browsers.

An often overlooked new feature in Dreamweaver CS6 is Web Fonts
Manager, which turns fonts that have formally been a web coder's
nightmare into a web designer's sweet dreams. With the introduction
of the Web Fonts Manager to Dreamweaver CS6, Adobe has taken the
stress out of managing non-web-compliant fonts.

Adobe offers four different available font format [TTF, EOT,
WOFF, and SVG] uploading slots. Yet, keeping with the Dreamweaver
CS6 theme of streamlining, you conveniently only need to upload
one font format from your font files, and the Web Fonts
Manager automatically uploads the other available formats.

As a web designer and a web coder, while reviewing Dreamweaver
CS6, I found the Web Fonts Manager new feature intriguing. My
extended review of the new Dreamweaver CS6 Web Fonts is available
here.

FTP Improvements

Once your site is designed and ready to be presented to the
world, you'll appreciate the enhanced performance of the FTP
Client. Located within the Files Panel, the FTP upload and download
speeds are greatly improved over past versions. Although speed may
be the first improvement that you notice, there are other new
features of the FTP Client that you'll also appreciate. The new
multi-channel support allows users to send and receive multiple
files at the same time. Also available are FTP Tool Tips
that show the percentage of completion for uploads and
downloads.

Another new FTP feature in Dreamweaver CS6 is the FTP
last-time-used memory … this feature can be a timesaver,
especially if you only work with one site and only upload to one
server. However, if you have multiple sites, located on multiple
remote servers … forgetting to check the FTP upload location
could result in disastrous results (especially when it comes to
updating an index page).

To solve this potential obstacle, Adobe has added a
Synchronizing Button that allows you to know ahead of time which
server your files will be uploaded to (for example, if you are
uploading your files to a test server or to your actual remote
server).

To Buy or Not to Buy

In our uncertain economy it's no longer practical for the
average consumer to purchase each new release of their favorite
software programs. However, if you design websites for a living,
Dreamweaver CS6, especially with its new multimedia features, is a
must-have upgrade. Adobe has not only added new practical features,
but also streamlined the familiar ones, making them even easier to
use.

To help with your acquisition decision, Adobe is now offering
Dreamweaver CS6 at several formats and price-points: yearly or
month-to-month subscription memberships; conventional boxed (or
downloadable) full versions; upgraded version; the teacher/student
version. Dreamweaver CS6 is also available within specific CS6
suites.

If you opt for the subscription version, be aware that Adobe
provides an array of subscription options to purchase Dreamweaver
CS6. You can purchase Dreamweaver CS6 as an individual subscription
(yearly or month-to-month subscriptions available). Dreamweaver CS6
is also one of the numerous programs included in the Adobe Creative
Cloud Master Collection (also available on a yearly, or
month-to-month subscriptions basis).

For those who have always wanted to give Dreamweaver a try,
there is also the thirty-days-free trial version. The different
price points and formats reminded me of the infamous Bubba
talking shrimp scene from the Forest Gump movie. However, with
the multitude of optimal purchasing plans, Adobe has made
Dreamweaver CS6 affordable, and within every web designer's
budget.