Website makeovers: How to choose the best tools for your project

by Lamont Wood

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.

So website makeovers are the order of the day, but tools that sufficed to publish a headline, a few JPEG files, and some text are now laughably inadequate, especially with today's emphasis on HTML5, CSS3, and JavaScript. For tools that can indeed handle today's web technology — from simple-but-elegant sites to huge sites built on content management systems — Adobe has the landscape covered:

• Adobe Dreamweaver is primarily for professional website developers who live and breathe programming or for designers and project managers who have learned enough HTML to feel comfortable. Although it provides plenty of designer-friendly tools and templates, the major appeal of Dreamweaver is how it delivers full access to the code, with immediate feedback (through a split screen) of what the results look like. The same content can be published for a desktop browser or for mobile devices like the iPhone, iPad, or Android smartphones.
• Adobe Muse is a new tool primarily for designers who want to design and publish websites without writing code. With a graphical design interface baked in, Adobe Muse generates HTML code for publishing directly to the web. Muse sites can be hosted on the integrated Adobe Business Catalyst hosting platform or uploaded to a third-party hosting provider. Adobe Muse includes widgets, which are pre-built site features like slideshows and lightboxes, that you can drag and drop onto pages. However, Muse currently lacks support for developing sites that target mobile devices, such as the iPad, iPhone, and Android smartphones.
• Adobe Edge, currently in public preview on Adobe Labs, is used to create web animations. The files it produces are typically added to a website using a tool like Dreamweaver. The beauty of Edge is that the animations are based on the latest open standards such as HTML5 and CSS3. With no plug-ins required, animations work on the latest PC and Mac browsers in addition to mobile devices where Flash technology is not universally supported.

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
• Passion

Project scope

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.

User skills

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.

Between these extremes are coders who are quite comfortable with web design concepts, and web designers who are skilled not just in creating their designs using tools like Adobe Photoshop and Adobe Fireworks but in using Dreamweaver and Fireworks to generate the CSS and JavaScript that bring their designs to life.

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.

Target platform

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.

SEO

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.

Edge Preview 6 offers a new publishing export option called, Static HTML Markup, which emits HTML markup, instead of injecting Edge content into the document via JavaScript. This improves search-friendliness (SEO) and accessibility on some platforms.

Regulatory environment

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.

Passion

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."

‹ Back

---