Brochure sites with gorgeous graphics (no matter how slick) and text (no matter how riveting) don't cut it anymore. Website owners want animations, slideshows, light boxes, and other interactive elements — with all the features running as smoothly on smartphones as on desktops. In other words, they want to keep up with the digital Joneses.
In this article, I examine how to decide which of these tools to use for your web makeover project. To make a decision, you'll need to consider several aspects of your site project, including project scope, user skills, target platform, search engine optimization (SEO), regulatory environment, and passion.
I interviewed several designers and developers to find out how they choose the best tool for their projects. All the web pros I spoke to seemed to agree that Dreamweaver can be used for any type of web project — from a quick one-pager to a serious database-driven shopping destination. But for small business sites, especially so-called menu or brochure sites, Dreamweaver may be more than you need. Other tools may help you get the job done faster and have a gentler learning curve.
Adobe Muse is excellent for creating smaller sites without the need for ecommerce or CMS integration. A visual designer can use Muse to create a complete, visually compelling, multi-page site in a matter of hours. For large more complex sites, that require database integration and frequent changes, the general consensus is to use Dreamweaver. "The code that Adobe Muse generates is good enough. But you would hit a wall if you used it on a large catalog site where you'd want to make changes across the entire site or where every little thing needs to be optimized for millions of hits," says James Fritz, Milwaukee-based concept designer at Lynda.com.
As for Edge, its ability to display animations on virtually all web devices is a big plus. Keep in mind, though, that the file size of Edge animation is often bigger than an equivalent animation generated by After Effects or Adobe Flash. "I see it for larger projects like movie sites or highly interactive, informational projects," says Joseph Labrecque, software engineer at the University of Denver.
A given web project often involves a designer and a developer, who may have radically different skills. In many agencies for example, the developer writes the code to produce the design provided by the designer and typically knows code intimately. The designer may know little about coding and, in some cases, may come from a print background.
Dreamweaver, obviously, is the first choice for a skilled coder because it grants full access to the code and scripts for adding sophisticated features quickly. But with Adobe Muse, a designer with no coding skills can produce a mock-up with exactly the layout and many (if not all) the features that are desired. If the design is fully functional, it can be published as-is. If custom coding is required, you need to use the embedded HTML functionality in Adobe Muse. While any HTML/CSS can be opened and edited in Dreamweaver, the output of Adobe Muse is not designed for (or intended for) downstream editing and the edited code cannot be brought back into Adobe Muse, so any post-export editing eliminates the ability to use Adobe Muse further.
"There is a large segment of the design population that really did not grow up coding," notes Scott Citron, a New York–based graphics designer. "What ultimately separates good from bad websites is not the technology behind them but the design — and Adobe Muse lets you focus on the design without getting hung up on the mechanics."
Many designers with print backgrounds are familiar with Adobe InDesign, a digital publishing tool that shares many features with Adobe Muse. "If you know InDesign, you can learn Adobe Muse in less than an hour," says Fritz.
User skill is an issue with Edge in that HTML5-based animation expertise is still scarce, and Edge makes you productive by automating the animation process. Many of its interface elements will be familiar to designers who already know Adobe Flash Professional.
Adam Bell, head of dataTV in Los Angeles, appreciates the familiar user interface of Edge. "To create HTML5 animations, we used to just poke at text files and guess at the results," says Bell. "But with Edge, you get to see the results immediately." Examples of what he has done with Edge range from banner ads to multipage sites.
If you're using Dreamweaver, it's up to you as the coder to fully understand all the idiosyncrasies of the various desktop and mobile browsers you're targeting, but you have complete control of the code to address whatever incompatibilities are encountered. "With Dreamweaver, you can see your pages live on whatever devices you want to test on, and they update as you update the code," notes ShaRon Sachse, a designer in Santa Monica, California.
Meanwhile, Edge is a good choice when planning special effects for the mobile device audience since Flash is not fully supported on such devices. And because Edge uses a stage and timeline metaphor, as do other animation tools, this eases the learning curve for many. "I can build animations on the same timeline as Adobe After Effects," notes Sachse, referring to Adobe's video post-production tool.
On the other hand, due to its reliance on the latest web standards Edge isn't always the best choice for internal corporate applications where older, noncompliant browsers that that won't display HTML5-based animations properly may be the norm. In these cases, Edge will produce fallback graphics that can be viewed on those older browsers. Meanwhile Flash, which Adobe continues to support, remains the first choice for more sophisticated desktop applications and games.
As mentioned earlier, Adobe Muse currently lacks specific features for targeting mobile browsers, but as for web browsing, you can rest assured its output is compatible with IE7-9 and the latest Chrome, Firefox and Safari browsers.
For commercial sites, significant effort goes into search engine optimization, in hopes of influencing the way search engines index and rank site content on a results page. One SEO consideration is the use of HTML block tags (such as H1 and H2) to help search engines prioritize the structured content on the page. Additional metadata tags can be added to the source code to influence SEO ranks include alternate text (ALT) tags to describe images, keywords to highlight page content, and title tags to display descriptive page names in the browser and bookmarks.
With Dreamweaver, the job of setting up the styles that ultimately define the header and other tags often falls on the developer (typically with input from the designer). But the person who actually adds content tags such as keywords and page titles might be more familiar with the content on the page and SEO best practices. As a full-featured web tool, Dreamweaver has all these capabilities and more. Most popular CMS systems like WordPress, Drupal, and Joomla also make it pretty easy to add or change content tags once a site is further developed.
With Adobe Muse, you can create search engine–friendly code. For example, you can add keywords and ALT text for images as well as define paragraph styles and apply HTML block tags such as H1 and H2.
The web may look like a regulation-free Wild West, but government and education sites in many jurisdictions are required to maintain accessibility, and e-commerce sites risk lawsuits if they don't. Accessibility means that a visually impaired person can use a web page with the help of software called a screen reader, which reads aloud (or passes to a Braille device) the text in a page's HTML file. Graphic elements are, of course, lost to the visually impaired. More importantly, text that is presented as images will not be translated by the screen reader.
To maintain accessibility with images, HTML includes the ALT attribute of the image (IMG) element. It also includes the AREA element, which is used to denote clickable map areas, and the INPUT element, which is used to invite user input. The screen reader will read the ALT text, which should (if used correctly) replace information that the user cannot see.
No web or graphics tool can read image bitmaps and generate ALT text automatically. As with SEO, you must build tags into your code. It is typically the job of the developer and content expert (also sometimes known as the producer) to create this content in Dreamweaver or some other tool, such as a CMS.
Adobe Muse can also be used to generate many of these tags. However, Muse output is not fully accessibility enabled, and therefore not recommended for larger, more sophisticated sites where 100% compliance with accessibility is required.
When it comes to creating websites, choosing the right tools is important. So is your inspiration. When a tool itself is inspiring, you have the best of both worlds. Dreamweaver and Adobe Muse both have devoted users. But when it comes to pure passion for the latest and greatest technologies, Edge appears to be the favorite at the moment — at least among the users I talked to for this article.
"The first time I saw Edge projected onscreen, I realized the magic was back," says Tom Green, professor of interactive multimedia at Humber College in Toronto. "I had the same feeling of wonder, joy, and excitement that I experienced in the early days of Flash."
Sachse agrees, "Since I found Edge, I have not been able to put it down. I am so ecstatic about this program. The possibilities are endless. I've even done my own Looney Toons–like animation. It really is that good."
Lamont Wood is an author and technology journalist who has been published in seven countries for clients such as LiveScience.com, Scientific American, Red Herring, The Chicago Tribune, Computerworld, Information Week, Omni, Byte, The Comdex Show Daily, and others. His newest book, Out of Place in Time and Space: Inventions, Beliefs, and Artistic Anomalies That Were Impossibly Ahead of Their Time, is available on Amazon.com.