Tag Archives: Dreamweaver

Adobe Releases Dreamweaver, Edge Updates for Web Developers

Adobe today announced some new features for Dreamweaver CS6, Edge Animate and Edge Code preview, which are available today for Creative Cloud subscribers. Several of the new features are integrations of technology and services that we’ve seen before, such as web fonts via Typekit, the type service Adobe bought late in 2011.

The other major news is the first public preview of Adobe Edge Reflow, a tool for building responsive website layouts. “Responsive” layouts flex and change depending on what device you are on, ensuring a good user experience across personal computers, mobile devices and tablets.

I’ve seen the product before today in demos and it is geared toward web designers more than developers—the user interface is polished and designed to build the code. There is no expansive code view, although you can read the generated CSS in some places. That code can then be exported and used in programs like Dreamweaver or Edge Code.

The release is a public preview and Adobe welcomes feedback at https://github.com/edge-reflow/issues.

The update to Adobe Edge Code includes a Live Development preview which pushes changes to a web browser immediately for testing. I like this new feature quite a bit. There’s also now a “Quick Edit” option to edit code in context rather than moving to the original file. Code hinting for HTML and CSS, a longtime feature in Dreamweaver and other mature code editors, is now in Edge Code.

Adobe Edge Animate’s new features include support for some CSS3 technology including gradients (radial and linear) and CSS filters. The addition of CSS filters is particularly interesting because they promise amazing control over HTML elements, including the ability to apply drop shadow, brightness/contrast changes, blurring, color saturation and other functions you normally associate with Photoshop. The spec for CSS filters was created by Adobe, so it makes sense they would pursue this. Unfortunately, CSS filters are supported only by Webkit browsers at this time, excluding Internet Explorer and Gecko browsers such as Firefox—but I bet they will build in support soon.

The other major enhancement added to Edge Animate is a user interface for previewing web fonts from Adobe’s Edge Web Fonts service. This free service is powered by Typekit. This is a nice improvement for web designers but most web developers have no trouble integrating Typekit fonts by adding the code snippets and setting up kits on the Typekit website. This kind of change, like several others in today’s announcements, serve creative professionals more than web developers.

The Edge Web Fonts interface is also new in an update to Dreamweaver CS6 going live today. The Dreamweaver update does have a few new features for web developers, including the option to apply fluid grid layouts to elements by class as well as ID attributes. The interface for working with fluid grid layouts has also been improved. These are the kinds of things that can really make a developer’s life easier.

There aren’t many new updates today, but the Creative Cloud paradigm drives more updates than we’re used to but with fewer features. Most new features I’ve seen today are improvements and they fit with Adobe’s goal of providing tools for the latest web technology (web fonts, responsive web design) for creative professionals. Web developers and programmers will probably be less excited by today’s announcements, but there’s some goodies for them too.

Dreamweaver CS5 Review

dw_box

This review supplements Dreamweaver CS5 First Impressions, which I wrote just after CS5 was announced. That article explains most of the new features in Dreamweaver CS5 like other reviews, but the goal of this article is to share my experience in the field with Dreamweaver CS5 and to tell what works and what doesn’t work for me.

What CSS can do for you

Dreamweaver CS5 got quite a few new features focused on making CSS easier to use, and they have changed some aspects of the way I work with CSS. I still do a lot of hand-coding and don’t care to use the CSS Styles panel and its new features. I do like the Inspect button, which will put the Design view into Live View and color various properties of the CSS elements such as margins and padding. You can turn CSS rules on or off as well in the CSS Styles panel, which helps you see how the webpage is affected by specific rules and properties.

I love the Inspect feature for specific situations but most of the time my troubles with CSS happen with properties that aren’t easily seen, such as position, display and float/clear. I try to do a lot of my CSS positioning without absolute positioning when I can avoid it, and CSS1 and CSS2 tricks like floats aren’t really designed for the task. I wish Dreamweaver could solve these situations, but Inspect doesn’t provide easy solutions.

Handling CMS-generated websites

In my “First Impressions” article I mentioned Dreamweaver CS5 handles dynamic websites generated by PHP-based content management systems (CMS). At the time I couldn’t figure out how to get Dreamweaver to work with a website of mine that uses ExpressionEngine, and a little research suggests Dreamweaver CS5 actually doesn’t work with ExpressionEngine. Joomla!, Drupal and WordPress are the three CMS’s that Dreamweaver CS5 will handle dynamically—and there’s no support for the ASP-based CMS products out there, though there aren’t many.

Dreamweaver CS5 has taken an important first step toward working with dynamic websites but there’s a lot more to be done. Other dynamic systems, such as e-commerce products which are coming up more and more in my work, aren’t covered by Dreamweaver and I don’t do anything more than the design and production in that application. If you run Joomla!, Drupal or WordPress often, then I’d purchase Dreamweaver CS5 since it works beautifully with those products. Other CMS’s—like ExpressionEngine—don’t gain anything new.

The Inspect button is my favorite new feature, but the redesigned Site Definition dialog box is a close second. It makes creating new sites and handling multiple remote servers and environments much easier, though I think this says more about the weaknesses of the previous interface than the strengths of the new one in Dreamweaver CS5. Improvements like these are doubly important because interfaces like the Site Definition dialog box are used very often and if they aren’t well-designed they really grate on you. The other great new interface improvement from Adobe recently is the new File Import interface in Photoshop Lightroom 3, and that one proves that a lot of time and effort can be saved with a flexible and simple interface.

About the HTML5 Pack

Adobe released a Dreamweaver CS5 HTML5 extension a couple weeks ago that adds some HTML5-specific elements to Dreamweaver CS5. HTML5 has become a buzzword now that Apple is throwing it around as a replacement for Adobe Flash (which it really isn’t, at least not yet). I’m sure many web designers will switch from XHTML to HTML5 and Adobe has tried to embrace HTML5 even with the uncertainty around web video and whether it threatens its Flash products.

The HTML5 Pack should be a no-brainer for designers wanting to learn HTML5. The pack includes a couple HTML5 starter layouts accessible from the New Document window, but these layouts are fairly simple and don’t have many HTML5 elements other than the semantic additions such as

and

Dreamweaver CS5 First Impressions

dw_box

Dreamweaver CS5, just announced today as part of Adobe’s Creative Suite 5 (CS5), has actually been doing duty in my web design business for several months now—I’m a beta tester for several Adobe products including Dreamweaver. Perhaps the best compliment I can pay Dreamweaver CS5 is that it has performed like a shipping product from the first day I got it. Dreamweaver CS4 users will not find too many differences between that application and Dreamweaver CS5, but there are some major improvements in handling CSS and working with dynamically-generated webpages, such as those created by PHP-based content management systems (CMS).

Dreamweaver CS5 is included with the Design Premium, Web Premium and Master Collection suites as well as a standalone product.

Improvements for CSS

Cascading Style Sheets (CSS) have been the primary method for controlling websites’ designs and Dreamweaver has emphasized it for a few years now. The application gets a few new CSS-related features with every release, and Dreamweaver CS5 is no different:

  • A new Inspect button produces colored overlays that help visualize the margins, widths, padding and other properties of the CSS box model. If your paragraphs or divs have any of these properties, click Inspect and then hover over the elements with your mouse to reveal these properties. The CSS Styles panel will also highlight the particular rules you are hovering over, which is handy.
  • CSS styles can now be disabled or enabled in the CSS Styles panel—hover over a property in the panel and click the icon, and Dreamweaver CS5 will comment out the rule in the CSS code. I find this to be more useful than the Inspect feature, because you can toggle properties and get immediate feedback on what they do. Designers who constantly check their CSS changes in browsers or Live View can now disable CSS properties and see the results in Design view or Live View.
  • The CSS-based starter layouts have been redesigned to use simpler CSS classes and include more comments in the code and the actual page text. Ironically, there are significantly fewer layout templates in Dreamweaver CS5 than in its predecessor. I don’t use these canned layouts myself because I prefer to build mine from scratch, but intermediate and beginner CSS users will benefit from their educational value and even expert CSS users can get a jump-start on a project with these layouts.

dw_cssenableYou can click the “no-smoking” icon in the CSS Styles panel to enable and disable styles. The colored overlay on the paragraph shows the width, padding and margins for that element.

Improvements for PHP-based CMSes

The most game-changing improvement in Dreamweaver CS5 is its support for PHP-based content management systems such as WordPress, Joomla! and Drupal. The new Dynamically Related Files feature basically compiles all the CMS-related PHP files and use them and Live View to generate dynamic pages just like the CMS would. You can navigate pages like you would in any other browser, work with JavaScript-powered navigations and move from page to page on internal and external servers. Dreamweaver CS5 even can bring data into pages from external databases.

dw_cmsThis image shows the prompt to “discover” dynamic files (inset left), the list of files after discovery (inset right) and Dreamweaver CS5’s ability to render a dynamic page (background). Click the image for a better view.

I tested these new CMS-related features at Adobe in January and they work very well for the common PHP-based CMSes like WordPress. I want to do some further testing for my upcoming review because I actually prefer to use a paid PHP-based CMS called ExpressionEngine and my first attempt to use Dynamically Related Files with an EE-based website did not work. I will figure out what I did wrong and report back in my full review.

PHP coders will enjoy the new custom class code hinting and site-specific code hinting available in Dreamweaver CS5. Dreamweaver now provides hinting—even for code that hasn’t been saved yet—for PHP core functions, objects and site-specific hints for customized code like those for blog themes and content management systems.

dw_sshintsYou can get code hinting on a site-specific basis, based on its CMS…

dw_phphints…and you can also get PHP code hinting.

Other than that…

…there aren’t a lot of major features beyond those for CSS and CMS handling:

  • Those who read and liked my piece on Adobe BrowserLab will be glad to hear Dreamweaver CS5 has an integrated BrowserLab preview. BrowserLab, like similar services, will take a snapshot of a webpage previewed with one of a variety of web browsers. The service is now improved because there are more browsers available and you can also freeze JavaScript interactions in Live View and preview them with BrowserLab.
  • New support for the open-source version-control application Subversion lets users move files and synchronize changes with the remote depository. You can also revert to previous versions of a file.
  • One change that I particularly appreciate is a redesigned Site Definition dialog box. Every website designed with Dreamweaver is first set up in this dialog box and it hasn’t always been user-friendly. There’s not really many improvements to this other than a new look and feel, but some new prompts and the ability to start a site without having every detail filled in makes this dialog box an improvement over the one in Dreamweaver CS4.

My first impression

The quantity of new features in Dreamweaver CS5 is not large, but what is included are improvements vital to the way web designers and developers work today. Dynamic websites powered by content management systems are all around us and Dreamweaver needed to address the lack of tools and interface to handle these sites. The Webkit-powered browser within Dreamweaver and introduced in CS4 was a catalyst for the improvements in Dreamweaver CS5, and interaction has now become as manageable as images and layouts.

DVD REVIEW: “For A Beautiful Web” DVD Series

andyclarkedvds

The three-disk “For A Beautiful Web” DVD series is a very nice resource for web designers, with roughly two hours per disk on three important topics: CSS, microformats and web accessibility. Presenter Andy Clarke, a web designer based in the UK, knows his stuff and presents things clearly and also with a bit of his own opinion on how CSS and other design elements can improve one’s workflow, which for me was a welcome addition to what could otherwise have been a merely informational resource.

My favorite disk was Designing with CSS: I know CSS pretty well but Andy suggested a different approach to conceptual design and advocated building mock-ups with CSS-based layouts instead of the usual graphical design that others (including myself) produce in Photoshop or something similar. This was a new idea to me and one that I want to implement this year for my web design business. The DVD was not just monologue on workflow but also a survey of basic and advanced CSS techniques and applications. The working webpage he used to illustrate his points was well-designed, well-executed and illustrative.

Designing Web Accessibility was also very useful. Designing with Microformats was interesting but I got the impression that microformats are not yet widely used. This was the disk I was most interested in since I had heard very little about microformats previously, but after viewing the disk I’m not sure if I have a very good reason to look into microformats further.

I should also note Andy Clarke’s presentation. He is definitely a very skilled web designer with strong CSS chops, and his presentation skills are good—I was able to follow the DVDs easily. But I thought Andy was too methodical, slow and a little monotonous in his delivery. Sometimes there were long pauses in the monologue that broke up the flow. I think if Andy could bump up his energy level and fluidity of his speaking it would help make the series more engaging and fun to learn with.

“For A Beautiful Web” DVD Series:
Designing Web Accessibility
Designing with CSS
Designing with Microformats

Presented by Andy Clarke
Published by New Riders
US$39.99 (Designing with CSS US$34.99)
Rating: 8/10

Adobe Releases InContext Editing 1.5

Adobe recently released Adobe InContext Editing 1.5, a new content management tool that allows clients and other users to edit website content in a browser and without coding skills. Contribute has traditionally been Adobe’s only product to allow this kind of editing capabilities, but Dreamweaver CS4 introduced InContext Editing last year and Adobe is developing it further.

From the press release:

“Adobe InContext Editing 1.5 is a fully hosted online service that extends the productivity and profitability potential of Adobe Creative Suite 4. InContext Editing enables the less technical client to easily update their Web site content from any browser without installing any additional software. In addition, this new hosted service gives professional Web designers the ability to enhance their business with long-term cost effective maintenance programs they can offer their clients, while enabling them to also have more time to spend on what they do best – design work.”

Editable regions are created in Dreamweaver with the same process used to create editable regions for Contribute, so InContext Editing can actually serve as an online substitute for Contribute (though Contribute has more capabilities). InContext Editing is available through a web application similar to what’s found at Acrobat.com, and web designers can set up websites at the InContext Editing Administration Panel found at http://incontextediting.adobe.com/.

Key benefits from the new InContext Editing 1.5 release include:

  • Ability for professional Web designers to assign editable regions to a Web site from directly within a browser;
  • Simplified administration controls for Web designers to easily safeguard design integrity;
  • Web-based editing capabilities for Web designers’ clients to make updates from virtually anywhere.

A free preview of InContext Editing 1.5 is available now at http://incontextediting.adobe.com/. More information about this hosted service can be found at http://www.adobe.com/products/incontextediting/. I’ve requested some extra materials from Adobe and I hope to speak with someone on the development team, so stay tuned for more information.

Adobe CS4 and ROI: Is Productivity The New Killer Feature?

cs4lineup

Last fall Adobe Systems released Creative Suite 4 (CS4) to good reviews, which was good news to Adobe since CS4 represents the bulk of their creative pro software products and includes industry standards such as Photoshop, After Effects and Flash. Adobe stayed true to their traditional upgrade cycle and released all the CS4 products simultaneously, 18 months after CS3 was released.

But over the past few years, the 18-month product cycle has forced Adobe to release upgrades that haven’t had as many groundbreaking features as those in the late 1990s and early 2000s. Many CS4 applications saw more improvements in efficiency and productivity as fewer new tools and cool technologies have been included. In my reviews I considered this shift detrimental, but according to third-party research commissioned by Adobe productivity may very well be the “new killer feature” that delivers tangible savings to CS4 users.

The methodology

Adobe commissioned Pfeiffer Consulting, an independent technology research institute, to benchmark the productivity capabilities of CS4 and compare them to CS3 to measure productivity gains. More than 125 benchmarks were conducted across the design, web, video and digital imaging (Photoshop and Lightroom) segments and tested a variety of large and small real-world tasks and assignments including:

Dave Burkett
Dave Burkett
Dave Burkett.

Dave Burkett, Adobe’s Vice President and General Manager for Creative Suite – Design and Web Segments, said the goal of CS4’s productivity capabilities was to improve “deep usability”—refinements of the small steps designers execute every day in their daily work. “When developing Creative Suite 4 we paid close attention to our customers’ needs and pinpointed common tasks that matter most to them. We then focused on adding features and improving upon existing features in order to make those tasks more intuitive and less repetitive. Put simply, it now takes less clicks to achieve the same results.” Andreas Pfeiffer, who conducted the research, wrote that “the cumulative effect of small productivity gains in everyday operations is almost universally underestimated.”

The benchmarks were performed by professional designers and measured by researchers. No scripting or automation was used. The research does not take into account the time and money spent in training, installation and continued learning after the initial purchase, since such investments apply to previous versions of Creative Suite and don’t affect the measurements in productivity. For more information about the benchmark methodology, visit www.pfeifferconsulting.com.

roi-chartPfeiffer’s benchmarks were quite thorough and takes very small time savings into account. All text and graphics ©Pfeiffer Consulting 2009.

The findings

Pfeiffer found that “CS4 increases efficiency in a vast variety of operations, including many routine, everyday production tasks.” In particular, the following CS4 features provided substantial time savings:

  • InDesign CS4’s Live Preflight,
  • Dreamweaver CS4’s Live View and Live Code,
  • Photoshop CS4’s Adjustments and Masks panels,
  • Tapeless video support in Premiere Pro CS4, and
  • CSS export from Fireworks CS4.

As an example, Illustrator CS4’s multiple artboards feature allowed designers to consolidate related projects in one file and become more efficient when experimenting with color palettes and designs. I’ve been using multiple artboards myself in my design business: handling one or two Illustrator CS4 files is a lot easier than handling one file for every illustration. I work with a lot of logos and brands, which often have several versions for size and color, and multiple artboards help me organize my clients’ branding. Burkett commented that multiple artboards, according to the research, can save designers three hours per month.

indesign-charts
The research on InDesign CS4 shows Smart Guides and Live Preflight can save a load of production time. All text and graphics ©Pfeiffer Consulting 2009.

Other examples, such as InDesign CS4’s Live Preflight, save time and money fixing printing errors by intercepting them early—research found that Live Preflight helped designers find and fix errors twice as fast than with InDesign CS3. Live Preflight is one of my favorite CS4 features because I haven’t had to mess with preflighting at the end of a project like I used to—violations are flagged immediately and I can fix them right away. Photoshop CS4’s Adjustments panel and Dreamweaver CS4’s Live View and Live Code features were shown to offer similar speed improvements.

CS4 was also designed with multiple media content delivery in mind, and is the first Creative Suite to fully integrate Macromedia software (Flash, Dreamweaver and Fireworks) so Pfeiffer also analyzed cross-application features such as Photoshop Smart Object support in Dreamweaver CS4, Flash CS4 Professional’s abilities in handling After Effects and InDesign content, and Dynamic Link technology that integrates assets between the CS4 video applications.

So how much money does productivity save you? Pfeiffer’s analysis estimates show a substantial sum:

  • $5,753 saved with CS4 Design Premium compared to CS3 Design Premium
  • $10,563 saved with CS4 Web Premium compared to CS3 Web Premium
  • $11,404 saved with CS4 Production Premium compared to CS3 Production Premium
  • $4,020 saved with Photoshop CS4 and Lightroom 2 compared to Photoshop CS3 and Lightroom 1

Burkett commented, “Ensuring that time- and cost-saving benefits were built into our Creative Suite offerings was always a priority, but is even more vital right now given the current economy. Users can now complete everyday tasks in significantly less time, allowing designers and agencies of all sizes to come in under budget, deliver ahead of deadline and maximize time spent on the creative aspects of the project.”

ps-chartsPhotoshop CS4’s OpenGL support and speed has always been one of its most promoted features, mostly because of its efficiency potential. Pfeiffer’s research supports this, but my view is that your mileage may vary. All text and graphics ©Pfeiffer Consulting 2009.

My view

I think CS4 is a major step ahead of CS3 when it comes to efficiency: it’s clear that many improvements in CS4 had efficiency improvements in mind. I’ve always thought this shift toward improving efficiency occurred because it’s become harder and harder to pack the upgrades with cool, exciting new tools when their toolsets are quite mature already. But it appears productivity might have been Adobe’s game plan all along.

As with many such objective findings in the industry, your mileage may vary. Photoshop CS4’s Adjustments panel was found to decrease the time making adjustments in half, but I actually do not like the feature: the new keyboard shortcuts are difficult and the panel is either too small to make adjustments or so large the panel strip takes up too much space. As another example, the research found Fireworks CS4 and Dreamweaver CS4 cuts down CSS creation and management time by over 80% but the CSS generated by Fireworks was not clean enough for my tastes and I still do quite a bit of coding in Dreamweaver.

fw-dw-chartsFireworks CS4 and Dreamweaver CS4 have various new improvements in CSS creation and editing that appear to save a great deal of time. However, my experience suggests not everyone will reap such productivity gains. All text and graphics ©Pfeiffer Consulting 2009.

But I am a fan of many other efficiency improvements, especially InDesign CS4’s Smart Guides and Live Preflight features and Dreamweaver CS4’s Live View feature. Flash CS4 Professional’s new object-based animation system, which was also cited as a major time-saving feature, can be difficult for experienced Flash users to get used to but does make sense in the long run. Ultimately, consumers should remember that Pfeiffer’s benchmarks were performed by experienced users of both CS3 and CS4—designers new to CS4 will have a harder time duplicating their level of efficiency—but, given training and experience, the time and cost savings could be substantial.

SIDEBAR: The Visionaire Group and Fast & Furious Show CS4’s Time Savings

Adobe is praising The Visionaire Group for leveraging the productivity benefits of CS4 in order to maximize the online campaign for the movie Fast and Furious. Universal Pictures, the studio that produced Fast and Furious, attributes the movie’s recent #1 position at the weekend box office to the online experience that sparked the enthusiasm of young car enthusiasts and hard-core moviegoers. An engaging Web site, rich-media advertisements, a downloadable desktop widget and a custom iPhone Web site were just some of the campaign’s key elements. J.P. Richards, vice president of marketing, said, “Our goal on Fast and Furious was to develop the most compelling creative content and Adobe Creative Suite 4 delivered way beyond my expectations, while doing it in half the development time.”

In an article published on Enhanced Online News, several CS4 features are called out including Flash CS4 Professional’s 3-D tools, a faster Adobe Media Encoder, Dreamweaver CS4’s Code Navigator and integrated Flash and AIR development with the Adobe Flash Platform.

Today’s economy

In the current economic climate, such findings are sure to command attention. “In today’s economy more than ever, investments in software need to be justified by clear business reasons,” said Andreas Pfeiffer of Pfeiffer Consulting. Adobe certainly showed good timing in paying close attention to efficiency and time-cost savings just before the recent economic downturn. According to Burkett, productivity improvement was a primary objective of the CS4 product line and it’s the first time product teams scrutinized this objective in such detail: “We took a new approach with CS4 and decided very early on in the development cycle to better understand how real-life projects could be enhanced with productivity improvements.” Customers were consulted to help pinpoint the most effective ways to improve workflow, and during development the product teams worked to improve raw performance and reduce steps required to complete a task. In some cases, the goal was to make it so users wouldn’t have to access a single panel to execute a command, although I’ve noticed that in some applications (such as Photoshop CS4) more commands have migrated to panels.

Even though productivity improvement was a primary goal, no metrics were developed internally to measure the applications’ success; despite this, Burkett and his team were pleased with the results. “We’re happy that these benchmarking tests were performed,” said Burkett, “as they allow us to gauge just how much of an improvement CS4 is over previous versions.” For more information on Pfeiffer Consulting, visit www.pfeifferconsulting.com. For more information on the CS4 ROI study, including the benchmark data, visit www.adobe.com/go/cs_productivity.