Searching for “web design software” may seem exciting (or daunting) at first, potentially presenting a wealth of choices.
Truth be told, the vast majority of these web design programs are aimed at individual consumers or small-business owners. When software companies tout their “free design templates” or brag that “you don’t have to be a professional to create your own website,” the web design program probably isn’t for you.
Using tools that fit your specific design needs is essential to producing your best (and most efficient) web design product. We’ve compiled a short list of the top web design software programs appropriate for creative professionals, including paid products, as well as some freebies from the open-source community:
ADOBE CREATIVE CLOUD BY ADOBE SYSTEMS ($49.95/MONTH)
In case you missed the news, the latest versions of Adobe’s creative tools, including Dreamweaver, Photoshop and Illustrator, are now branded “CC” and are available only as part of the company’s $49.95-per-month Creative Cloud membership. For the purposes of this article, I’m counting them as a single product, and they should be the core of any web designer’s toolbox.
In addition to Dreamweaver CC, you get all of Adobe’s other programs for creative pros. These include the Edge family of applications, which let you create rich-media content that can run on mobile devices without the need for plug-ins. Also in the package is Adobe Muse CC, for print designers seeking an easier, less code-driven path to web development. The new CC versions of Photoshop and Illustrator can automatically generate CSS code when you’re working on web graphics.
Adobe’s decision to eliminate perpetual software licensing for these products has been controversial. But if you can live with this new business model, the Creative Cloud provides the best design tools whether you work in print or on the web.
If you just aren’t ready to take the Creative Cloud route, Adobe still offers Dreamweaver CS6 and other Creative Suite applications under a traditional software license. Though it’s an earlier version, it’s still better than the alternatives. I’ve seen no other program that does a better job of integrating visual design tools with a coding environment. The CS6 version introduced some notable enhancements, such as the Fluid Grid Layout feature to facilitate development of responsive web designs that work across multiple devices.
Keep in mind that you won’t have an upgrade path. Adobe says it will continue to offer bug fixes and other maintenance updates, but you won’t have access to new features. And there’s no guarantee that the software will work on future releases of Windows or the Mac OS.
BLUEGRIFFON BY DISRUPTIVE INNOVATIONS SAS
This is likely the best open-source alternative to Dreamweaver. Like Adobe’s Dreamweaver, Blue Griffon integrates visual design and coding tools, and it supports HTML5 and CSS3. It uses the Gecko rendering engine from Mozilla, so the WYSIWYG mode shows pages as they would appear in Firefox. It’s no match for Dreamweaver’s comprehensive feature set, and the interface is a bit clunky, but it’s a pro-level tool and you can’t beat the price.
Some additional features are available as plug-ins that you have to pay for. For example, CSS Pro Editor (about $15) builds on the basic CSS editing features in the free program. You can buy all of the plug-ins as a package for about $95. (The vendor shows prices only in Euros, so you’ll have to use a Euro-to-dollar translator for current U.S. pricing.)
As with most open-source programs, you should expect some trade-offs. You won’t have the benefit of Dreamweaver’s large user community and the corresponding ecosystem of books, training and other resources. Chances are that you won’t be as productive as you would be in Dreamweaver. So I’d look at this program only if you’re an occasional web designer, or if you’re taking issue with Adobe regarding the Creative Cloud and willing to jettison the entire Adobe product line.
Another well-known open-source alternative is KompoZer, but it hasn’t been updated since 2010. And that version (0.8b3) is still in beta. The latest stable release (0.7.10) is from 2007.
CODA BY PANIC, INC., $99 ($75 LIMITED-TIME OFFER)
As the name suggests, this Mac-only program is all about coding. It doesn’t have visual-design features like you’ll find in Dreamweaver or BlueGriffon, but it provides a top-notch coding environment for HTML and CSS, including code-hinting, validation and debugging features. You also get a built-in file browser, FTP client and MySQL editor. The latter provides an interface for MySQL databases, which are used in many content-management systems.
The program is available from the App Store, but you can download a fully functional seven-day demo version from the Panic website. List price is $99, but the company is offering a $75 limited-time offer.
This free add-on for Firefox is indispensable for anyone who frequently designs websites. It provides a set of tools for inspecting and debugging HTML and CSS elements on any web page viewed in the browser. For example, when you hover over an HTML tag, it shows which page elements are defined by that tag and how the border, margin and padding settings affect positioning.
Another must-have browser add-on is Chris Pederick’s Web Developer. Some features overlap with Firebug, but it also provides unique tools of its own. It’s available in versions for Chrome and Firefox.
TIP! Google Chrome comes with its own built-in developer tools similar to Firebug. Click on the “hot dog” menu in the upper right, then Tools > Developer Tools.