A Web Designer's Guide to Coding Apps
A couple of weeks ago, we ran a reader's poll asking how you code. Nearly 3,000 of you responded and today we're going to take a look at some of the options open to designers. There's several "classes" of development applications that we're going to look at today: complete packages (like Dreamweaver, that have everything under one roof), simpler text editors (like Notepad++ that feature some aspects of Dreamweaver but with a much simpler interface and feature set) and plugins or single workflow editors (like CSSEdit).
Introduction: Web Design Coding Apps
Before we start, it's worth saying a bit about what this article intends to cover. There are a LOT of applications out there that a web designer has to pick from when trying to decide what to use to code a project. So many that it can often be hard to really understand what sets one apart from another... or heaven forbid, accidentally picking the wrong app and wasting time on it. This article seeks to bring clarity to the options that are available, and why you might choose one instead of another.
It's worth noting that this article will not try to convince you that one particular app is better than another. There are pros and cons of each app (or combinations of apps), and you'll ultimately be the one that decides which one works best for you. The main criteria that one must consider are:
- Ease of Use
- Feature Set
- Whether or not you need to collaborate with other people on the same program
We're going to specifically be looking at these issues from the point of view of a web designer... which is to say that we're not going to be looking at any uber-technical features, boutique language support, or any other information that you'd need to be an System Administrator to understand. Put simply: we've tried to write a guide that we would have liked to see ourselves when we were hunting for our own coding apps.
Getting the Lay of the Land
For many years, Dreamweaver has been seen as the premier development application on the market, so it's worth beginning any discussing of coding apps there. Dreamweaver is one of Adobe's flagship apps and a popular one at that. It's the coding side of Adobe's web packages and compliments other applications such as Fireworks and Photoshop nicely. It is, to put it simply, a simple code editor mixed with a file manager. Another popular (or at least, a personal preference of my own) app is Microsoft Expression Web which has a similar function and interface to Dreamweaver.
A glimpse into the Dreamweaver interface.
Whilst Dreamweaver seems like most designers' tool of choice should they decide to develop their own site, there's a ton of alternatives including other popular apps like Coda, Komodo and Notepad ++. However, each of these apps has it's pros and cons. There's a ton of different features that can be overwhelming to news users even if some of them can be beneficial to you in the long run. For some, living entirely under one room during their site's development is a pleasing experience that's preferable over any others, but, it comes at a cost. Dreamweaver costs, as an individual app, about $399 or a whopping £428 if you happen to reside in the UK!
In light of Adobe's CS5.5 and the developing popularity of these applications, let's take a look at those pros and cons of these applications. We'll weigh up both complete packages, simpler text editors and plugins that you, the readers, have expressed interest in. However, this isn't just a boring roundup of twenty apps that do the same job in the same way. No. Instead, we'll be looking at a couple that really shine and how they can fit into your workflow.
Back in Brandon's poll, there were four main considerations touched upon: cost, ease of use, feature set and collaboration. Let's revisit these quickly.
Cost is probably the biggest factor for most people. The applications we'll touch on today range from free to several hundred dollars (a couple of thousand if you buy them as part of a wider package!) and this could be the single governing factor in a choice. New developers may be forced into opting for free software whilst seasoned ones are more likely to have a larger budget to invest in tools and applications. Dreamweaver starts at $399 for the unpackaged application which is a large investment for a new studio or individual.
Ease of Use
Choosing an application for any task comes down to personal preference in the end. However, there are distinct differences between some of the categories of application that we'll look at today. Generally, an extended user interface means a steeper learning curve but if you're used to a specific company's apps, your curve might be gentler. Brandon used Dreamweaver as an example: new users might find it hard to get used to having their workflow based in the application, but those who've used Creative Suite for some time may find it an easy transition.
Features correlates to both ease of use and cost, so your decision on how many features you have access to could be decided by other factors. Each user might have their own requirements from an application. Do you need a WYSIWYG editor? Do you need direct uploading to a sever? Do you need code highlighting?
A final [in this list, but definitely not overall] consideration is collaboration. If you're the only developer involved, the application you choose can be anything you need. However, if you're working as part of a team, your decision may need to be one that everyone has access to and that everyone knows how to use.
The Big Guys
The big guys are the complete packages. By "complete package", I am referring to an application that has everything under one roof. Most will include a tabbed interface so you can work on multiple files at a time, some sort of WYSIWYG interface, browser compatibility testing and a bunch of other features so your workflow is concentrated into a single application.. All these new features come with an increased cost, however.
Let's take a look at the core features that are common across these applications.
Perhaps the biggest feature that distinguishes a professional coding app from a plain old text editor like Notepad is code suggestion. As you type, the app will suggest what should fill your tag parameters so you don't have to type the whole thing out. So, for example, if your writing an image tag and open the "src" parameter, you can use the drop down menu to open a browser window and find your file that way.
This is a great time-saver when working with CSS as even just writing "wi" for width will bring up a drop down menu to complete the word for you. This seems so trivial but the milliseconds add up.
Code suggestion can be a great help to HTML beginners, especially designers who are just learning the ropes of HTML. The more experience of us will also benefit from the speed and constant validity.
Code highlighting helps a developer differentiate the various tags and parameters he's used but also spot any errors. Each tag parameter has it's own color and therefore it's extremely easy to connect parts of lines and lines of code. It's a minimal feature, but a helpful one.
Web standards are, of course, an important factor in any website's development. Dreamweaver and Expression integrates validation tools to check individual files or a whole site right from within the application making it super simple to fix errors. Note: Dreamweaver CS5.5 no longer integrates accessibility validation (I'm guessing for legal reasons). However, they do direct you to the W3C validation site.
Dreamweaver and Expression have two lines of defense against code errors. The aforementioned code highlighting will fail should there be an error (line one) and then this (line two). In addition to these methods, one can, naturally, use W3's validator too to check their sites.
There's three different views in Dreamweaver and not just a single one like on a normal text editor. The code view is focused just on the behind-the-scenes stuff whilst design view lets you work in a WYSIWYG editor (we'll get onto that a bit later). Split view halves the screen between the two views.
Designers of simpler sites may appreciate the design view as a way of seeing changes applied live. The code view's advantages have, of course, been discussed above and we'll get onto the design view a little later.
File Managers and Full Site Management
Using standard text editors like Notepad will only allow you to work on one file at a time. However, apps like Dreamweaver links them together as a full site should be. Simply set up a site and apps like Dreamweaver manages each file's relationships, making sure they work together as they should do.
Should you change a file name, all the relationships and links to them will be corrected so everything still works just as it should.
If you want to to work with sever-side scripts, some coding apps will allow you to work remotely on server-based files right within the application so you can edit even when your files aren't stored locally. This means there's no uploading/downloading when you want to make a change and you aren't forced to use whatever standard your web hosting offers (if any).
Additionally, Dreamweaver is a tabbed code editor meaning your files are shown like a browser. Each file has it's own tab and it's super simple to switch between. When you edit a file, an asterisk is shown on the tab so you can tell that it's not saved allowing you to, well, save it. To put this feature into some context, your biggest use will probably be switching between a stylesheet and your HTML files.
In Dreamweaver CS5.5, you can use the Multiscreen preview feature to design simultaneously for PCs, tablets and phones. Plus, there's built-in support for web technologies like CSS3 and jQuery mobile integration furthering any web developers ease to produce mobile-compatible websites.
Built-in Cross Browser Compatibility
Adobe BrowserLab is a time-saving and efficient way of testing for cross-browser compatibility when you're working with Creative Suite. Right from within the application you can test across multiple operating systems and browsers without needing to actually have the OS and browsers to hand. No need for additional hardware or software purchases!
Saving money is one thing, but the ease of accessing compatibility tests from a single application that stays up-to-date is a huge time-saver and one that, with code suggestion and other Dreamweaver features, can save you some serious time in the long run.
Expression Web also has a similar system in place.
Simplicity is not it's strong point
Unfortunately, we must move onto the cons of using a more UI-heavy application like Expression or Dreamweaver. The biggest is that they are not a simple text editor that's easy enough to get started with it. It's got a full user interface and that's not necessarily a bad thing. In fact, it's needed to have all the great features that we've just discussed.
Whilst having all the features is great, this means that Dreamweaver is a steep learning curve and it can be difficult to pick up the basics with an interface full of various options. Newbies might not appreciate being thrown into everything it once.
Naturally, Dreamweaver is not a tool for beginners. It's an expensive application and it's likely most will start with more basic tools before moving onto Adobe's offerings. But, even then, the most advanced developer might be a tad confused with an alien interface that they haven't experience before.
Our friend WYSIWYG
Ninth grade students might appreciate the ease provided with WYSIWYG editors, with it being similar to most desktop publishing applications, but seasoned developers can recognise it's downfalls. The reality is that WYSIWYG editing is not the same as a code-browser relationship and trying to develop purely in design view can bring up problems.
I've seen many people use WYSIWYG in other apps, such as Microsoft's FrontPage, and they turn up with irrelevant and unneeded code snippets throughout their web pages that limit a file's capability to be shown properly on all browsers.
By all means, use design view as a guide but the browser (or in this case, BrowserLab) is always the best guide.
Staying with the WYSIWYG roots, Dreamweaver can sometimes add in unnecessary and irrelevant code in other circumstances. Using non-code methods of adding styling and other details can result in Dreamweaver working now exactly how you want it. For example, styling via the properties bar can end up filling your HTML files (not your linked stylesheets) with a bunch of new styled titled chronologically as "style1", "style2", etc.
The "Complete Package" Apps
As I said before, Dreamweaver seems like the tool of choice for many. It comes packaged as part of some of Adobe's Creative Suite bundles and therefore, since it's on your system anyway, might be a preference. Dreamweaver also integrates with some of Adobe's other applications like Fireworks where you can export to HTML and then edit in Dreamweaver.
Dreamweaver embodies all of the pros (and the cons) that we've just stated above including Adobe's BrowserLab for built-in cross browser compatibility.
This is really down to personal opinion, but some might see Dreamweaver as just an overpriced text editor. I, for some time, used Microsoft Expression, but never used most of the in-built functions. In fact, I only really used it just as a tabbed text editor. Both are useful applications, but there are free alternatives available.
Dreamweaver starts at a high price tag ($399/£428; how that exchange rate works is strange) as an individual application. It's all down to personal preference. If you want to pay to be in Adobe's ecosystem then it's worth it, but otherwise you might want to get started with a trial and see if it works for you.
- Code highlighting and suggestion with automatic tag closing
- Integration with other Creative Suite applications
- Built-in BrowserLab for cross browser compatability
- High price tag making it a difficult first choice
- Steep learning curve for new developers
Microsoft Expression Web
Similar to Dreamweaver, Microsoft Expression Web has a tabbed interface and all the key pros that we mentioned just before including code highlighting, suggestion and completion. Expression Web also embraces web standards and includes several validation tools to help with debugging any issues with your code.
Whilst Adobe's BrowserLab is naturally not included in Expression, a similar application is: SuperPreview. SuperPreview supports Internet Explorer, Firefox and Safari so you can test compatibility of your sites within the application (or rather, a sub-application).
Additionally, Expression has the ability to import Photoshop files directly maintaining layer structure.
- Code highlighting and suggestion with automatic tag closing
- SuperPreview cross-browser compatibility
- Bu~ilt-in validation tools
- Additional media tools provided with the "Ultimate" package
- Whilst Photoshop importing is there, there's no other apps that directly integrate into Expression
- Fairly high (starting at $149) price tag for new developers
- No Mac OS X version available
Microsoft's FrontPage is now a discontinued product, but it used to be part of the Office Suite meaning you might still have it somewhere on your system. FrontPage was pretty much the predecessor to Expression and might be some people's first contact with front-end coding especially with it sharing the install base of some older versions of Office.
The tools are very much the same as Expression with a tabbed user interface and code highlighting. FrontPage also connects your files together as a site to work on them together. If you've got it installed somewhere, it's a simple editor that might be worth trialing out.
The last stable release of FrontPage was over seven years ago in 2003 so it's not something you'd want (or should want) to purchase now. If you are looking to invest in an app that is authored by Microsoft, the succeeding Expression is the one I'd direct you to.
- Tabbed, site-centric interface
- Code highlighting and completion
- Last stable release was seven years ago
- Web standards have changed since 2003
Coda is a single-window coding application that prides itself on having everything under one roof: editing, previewing, managing, FTP uploading, terminal accessing and publishing on Mac OS X. I must admit I had this application penned in under the simple editors heading, but I realized the power of this application even though it's under a simple and easy-to-use interface.
Describing the UI of Coda is a little difficult because it depends on how much experience you've had. New users will most certainly find it difficult to get involved with coda, but the more advanced ones will appreciate the simplicity compared to rival applications. Grab a look at the comments of the Mac.AppStorm review to appreciate how much other developers recognize the application's quality.
Coda is different to other apps as it puts everything together under one roof as an integrated and seamless experience that advertises itself as text editing, Terminal, FTP and other applications together. It's a one stop shop for your entire workflow to be based in.
Coda is a popular choice for many Mac web developers and it has a solid five star rating in the Mac App Store. It's good looks and good work comes at a steep price of $99, which some newbies might not be able to budget for.
- Seamless, integrated experience eliminating the need for many applications working side-by-side
- Tons of subtle features
- Built-in previewing in the same single window
- Beautiful CSS editing that switches between text and GUI modes
- High price tag
- Mac OS X only
Simpler editors generally don't have as many bells and whistles as the three apps that we've just looked at. They mainly lack the WYSIWYG design views, the cross browser compatibility automation and some other features that are nice, but not required.
Code Highlighting and Tabbed Browsing
Two features that these applications do mainly have are code highlighting and tabbed browsing. These are valuable features since the former allows fast debugging of errors thanks to visual observances whereas the latter means it's easy to switch between files.
Simple editors are just that, simple. Or at least, simpler. Naturally, there is a lack of some features that is a disappointment but that comes with the cleaner, simpler interface that results in a gentler learning curve. The simpler of text editors allow developers to just jump in without needing to learn how to use a ton of features before they can use an application properly.
When we look at these applications, they pretty much have one view: a canvas for your code. If you do want to venture into another application, you'll need to a single view with fixed-width fonts and little preference to a specific coding language.
With the smaller number of features and lack of some of the key points we looked at for the "complete packages" comes a lower cost. These applications generally range from free to well under a hundred dollars especially since some of these apps are developed themselves by smaller teams or individuals rather than the larger ones of Adobe or Microsoft.
The Simpler Editing Apps
When I say "simpler editing", I certainly don't refer to the caliber of coding possible with these applications, but rather the feature set included in these applications. In fact, the same results can be achieved in one of the above apps or one of the below ones.
When coding some of my own designs, back in the days of using Windows, I have been known to use the stock Notepad application that ships with Microsoft's OS. Notepad++ builds upon that in a separate application by providing a simple, uncluttered interface to code in.
Notepad++ adds several enhancements that Notepad doesn't offer including line numbering which is especially useful should you be coding in something other than plain old HTML. Additionally, with this application, you can zoom in and out of text which is an invaluable feature especially if you resort to squinting at the screen after an overnight session.
New users will appreciate Notepad++'s uncluttered interface that allows unseasoned developers to jump right in and get started. However, they may also appreciate the subtle advantages that not even apps costing several hundred dollars offer such as side-by-side editing across two files, each with their own range of tabs.
A couple of the features of the more featureful applications including code highlighting which is great in a free application. Notepad++ bills itself as free in both terms of "free speech" and "free beer".
- Tabbed editing with side-by-side views
- Code highlighting and completion in a...
- ...free app!
- No built in validation tools or any other of the "bells and whistles"
I switched to Mac OS X just over a month ago and searched for a free editing application to get me started. TextWrangler was one of the first I came to and it's turned out pretty useful up until now. In fact, i'm using TextWrangler to write this very article. TextWrangler is a very simple text editor with code highlighting (although that's it, there's no completion or suggestion). It's more of a blank canvas to your code rather than one that tries to infiltrate it with features of it's own. TextWrangler is also the little brother to BBEdit, a similar editor that has a project browser to work on multiple files in a site together.
This particular application is very minimalist and focuses on the code itself. It's certainly not the best editor but it's one suited for simple editing, especially if you're just starting out. And of course, TextWrangler is free which is always an advantage.
- Minimalist and simple interface
- Code highlighting
- Features such as line numbering and heading navigation that other free applications don't provide
- Free (at least in TextWrangler's case)!
- Code highlighting is the extent of it's help: no suggestions or completion
- No tabbed interface
TextMate is another highly popular Mac OS X text and code editor with one of those tabbed editors that i've been raving above in this article. In many respects, TextMate is very similar to TextWrangler and BBEdit. However, you'll appreciate the variety of additional features that are thrown in, including code suggestion and clipboard history.
TextMate is similar to the other applications in this system in that it has a single view that you need to either fit into the various aspects of your workflow, or use together with companion applications (apps like CSSEdit). However, all that comes with the advantage of providing a gentler learning curve to new developers who only need to deal with one minimalist view whilst presumably using their browser to preview.
- Minimalist and simple interface
- Code highlighting and suggestion
- Clipboard history and other subtle features you'll recognize through the app
- Code highlighting is the extent of it's help: no suggestions or completion
- ~$65 price seems a little steep in comparison to applications like the free TextWrangler
- Mac OS X exclusive
E-TextEditor is kind of the TextMate or TextWrangler of Windows providing a similar code highlighting, tabbed editing experience that you'd find in those OS X apps.
The biggest difference to other applications is, however, the "Personal Revision Control" that reminds me very much of the Versions feature in OS X Lion. PRC (as I've named it) keeps a history of your revisions so you can revert to an older copy of your code, should you need to.
However, unlike some of it's Mac-based brothers, E-TextEditor comes with a costly $46.95 price tag.
- Minimalist and simple interface
- Personal Revision Control so you can revert back to older files easily
- Tabbed interface, code highlight - basically, the stuff that every app on this list has!
- High price tag of $46.95
Espresso is another one of the big players in Mac OS X code editors. It's another minimalist, streamlined editor that looks beautiful, unlike some of the other applications we've covered in this every-growing list. Espresso has the standard interface elements like a sidebar for navigating your site's files but all in a single, streamlined window.
Espresso is up there with Coda as some of the application that are widely regarded as the best on the platform, but they actually approach the task in two different ways. Certainly not in a bad way, or do the disadvantage of users, but Coda crams everything under one roof. Espresso is a lot simpler. Espresso is similar to the couple of applications immediately above in that it's very simple but, in this case, beautifully simple in both form and function.
In comparison to the other simpler applications, Espresso has an attractive take on web development and is as useful to seasoned and new developers alike.
- Great UI
- Many behind-the-scenes/hidden features
- Live preview
- Fairly high price tag turning away some smaller developers
Smultron is another Mac OS X text editor with a simple file manager tagged onto the side. It has all the basics of a good code editor including syntax highlighting and a good find & replace system that works across multiple files, extremely useful if you rename a file and need to change it's outstanding replacements.
Smultron is light and simple, just like Notepad on Windows. It's entirely customizable too so you can change around the coloring of your syntax and other properties from a single preferences panel.
We've looked at several Mac-only applications today but this is the simplest example of a coding experience that I've seen on OS X. It's a great starter application for new users and it's price matches that being less than $5 and available through the Mac App Store.
- Light and simple interface
- Even simpler file manager for easily switching between files
- Amazing $4.99 value
- Multi-document find & replace
- Doesn't seem to be any code suggestion, validation or other aspects that we love from apps like Dreamweaver
Single Aspect Apps and Plugins
Using another term that I've ungraciously coined for lack of a better term, single aspect applications is relating to those apps that work together and collaborate with other applications by focusing on just one aspect of development. For example, we'll look at an app focused solely on CSS editing.
Plugins allow you to enhance your experience with other editors by changing around the functionality and making it overall easier to edit. These aren't apps to choose over the other mentions in this roundup but rather ones to work together.
These applications all focus on just a single aspect of a workflow and they are specialized to that extent. For example, a CSS authoring application will focus on just your stylesheets but there's a better chance you'll have more guidance and an overall better experience by using individual apps together.
Naturally, if an application only focuses on one specific aspect of your workflow and not all of them (in the same way as Dreamweaver or Coda) it's going to be cheaper. Where Coda costs $99 and Dreamweaver $399, applications like CSS-Edit will only $40.
The "Single Aspect" Apps and Plugins (a.k.a. the miscellaneous stuff)
From the people that brought you Espresso is CSSEdit. This particular application focuses styling on your websites and the styling of others. CSSEdit includes inspection tools to inspect other webpages so you can learn (but not copy, of course) from other websites.
CSSEdit boasts a visual editor so you can actually see your styles while you build them and naturally, the ability to edit the raw source. Instead of using a text editor to build your CSS, CSSEdit builds your CSS step-by-step in a guided way rather than just letting you write it on a blank canvas from scratch. It's more paint by numbers that means there's little chance your CSS doesn't validate.
New users will appreciate CSSEdit's approach to styling since there's little errors to set you back, should you use the visual builder that builds your website brick-by-brick.
- Useful drag-and-drop visual builder
- Realtime live previewing without the need to save
- Super simple validation and debugging built in
- Can't view visual and source editors at the same time
- $40 cost (for just your CSS)
- Mac OS X only at this time
Snippet is a personal code library for your own use that allows you to store code snippets to use later. Imagine Snippet as a blog: you can tag snippets, search them and even sync them to online services.
Your snippets can be from anywhere. You can save snippets from your own code, from other projects or ones you find online (of course, don't steal code ;)). If you're interested in hearing more about Snippet, be sure to check out Mac.AppStorm's review of the very application.
- Simple idea to save time
- Ability to tag and search code snippets to access them even faster
- Steep $12.95 price tag which is a turn off for new developers who might be interested in the simple application
RapidCSS is another CSS authoring application, this time for Windows. RapidCSS is a customizable editor that has multiple panels you can choose from. Whilst it doesn't have the same visual editor that CCSSEdit does, it does have a panel that allows you to work on each selector separately.
RapidCSS also has many of the standard features of these editors like syntax highlighting which hopefully, by now, you realise are advantages whichever application you choose.
This app is not unlike CSSEdit as it does focus on styling but doesn't have many of the features that I love in that particular Mac app. It is also less suited to newer users that have little experience with the language.
- Roughly $30 price tag
- Steeper learning curve for new users
- $40 cost (for just your CSS)
Sometimes you may need to work on a server, especially if you're working in a language like PHP whilst working on a WordPress theme or similar framework. FileZilla is an FTP client allowing you to seamlessly transfer files locally and online so you can keep two copies up-to-date.
Additionally, FileZilla will detect when your local files have been modified and prompt you to replace the online copy so you can edit locally but preview online.
FileZilla (or any FTP program) allows you to replace the functionality built into the larger applications if you're going down the route of using a combination of single focus apps.
It's not really beneficial to go over a ton of different applications as they all do a similar job, but searching for FTP clients and finding one that suits you shouldn't be that hard.
- Modification detection
- Simple drag-and-drop interface
- Free and multi-platform!
zen-coding is a plugin for text editors that has a powerful abbreviation engine to increase your productivity. It works with several of the editors that we've looked at today including Notepad++, Espresso, TextMate and Coda.
zen-coding's abbreviation engine is pretty simple. You type an abbreviated form of your code and it expands into a better, semantic layout. For example, typing
is expanded into a new, semantic block of code.
zen-coding is pretty unique and can't be compared to other applications. It fits seamlessly into your workflow that's based in other applications and can enhance the productivity of even the most advanced developers. Oh, it's also free and open-source!
- Faster workflow with code abbreviations
- Plugin for most popular applications (including the ones we've mentioned today)
- Can be hard to master, especially with new users
Which one is best? It really depends on who you are and what you do. Dreamweaver and Expression are great applications, but they're costly and might not be the best way to start off as it's a significant investment. They can also be a steep learning curve if you're new to development. In turn, the simpler applications work great but you are more advanced (or maybe work in their companion apps), you might need to go with something more advanced and more costly. Most of the applications have free trials, so give a few of them a try and then come back and share your opinions.
There's a ton of alternatives out there. The ones that we've looked at today are based on your response to our aforementioned poll and my own experiences on both Windows and Mac. You might have read some of my other posts here at WebDesignTuts+, but I also regularly write for Envato's AppStorm blogs so I'm particularly interested to see what other applications you use. Please be sure to share them in the comments!