Two Important Web Editor Features

HTML

Web editors offer features that you can’t get from a text editor. But often the one web editor feature people look for is the price–free. I’ve been trying out web editors for nearly twenty years, and while I have one web editor that I still use that’s free, most of the ones that I really like I’ve spent some money on. And over 20 years, spending $50 or $100 on an editor seems like a good investment. There are other web editor features that I look for instead of just price.

One of the best things about doing web design is that you don’t need any special software to do it. The tools you need are either already on the web or you can use an editor that comes with your operating system. So they are free. In fact, many people write all their web pages in Notepad. When I’m in a hurry I’ve been known to just open up vi (a Unix text editor) and slap out some quick HTML tags myself.

Most of the time, when I’m doing work on web design I like to use a web page editor. My current favorite is Coda because it integrates easily with Git and lets me preview in any of the browsers I have without a lot of effort. I use this editor almost every day.

Web editor feature
There are many possible web editor features

I should say that I have been building web pages since 1995, and I can often write a complex CSS property faster by just typing it out than by using a visual or WYSIWYG editor. But that’s not true for everyone. Some of the other editors I use include:

  • Komodo Edit–a free text editor for Windows, Macintosh, and Linux that is based off the much more powerful Komodo IDE. But although I still like this editor, I use Coda more and more often instead.
  • Macaw–one of the first responsive web page editors I ever used. It’s a visual editor and made it fun to fiddle with my designs.
  • Pinegrow–another visual editor, this one also has the feature of including WordPress template editing.
  • Dreamweaver–I’ve used Dreamweaver since the 90s, and it’s changed a lot over the years. Now, of course it’s owned by Adobe.

I’ve used dozens of other editors, but those are the ones I come back to day after day. I was thinking about what makes these editors my go-to tools for web design and development, and I came up with these two features that I use all the time.

Most Important Feature: HTML

This might seem like an obvious feature, but a lot of web editors out there, especially the WYSIWYG ones seem determined to make it nearly impossible to view and edit the HTML. That drives me crazy. Sure, if it really is what-you-see-is-what-you-get then it shouldn’t matter, but the fact is that CSS and HTML still aren’t so consistent that you can guarantee a page will look the same no matter where you view it. Sometimes you need to go tweak the HTML or the CSS or both.

My favorite editor, Coda, is an HTML text editor first and foremost. It has syntax modes for many different languages including things like JavaScript, Python, PHP, Perl, CSS, and many more. And when it comes down to it, these languages are all written in text editors, so the difference is how they are displayed (color coding, indenting, etc.).

But visual editors need to have access to the HTML as well. And the best ones do. Macaw and Pinegrow each allow you to edit the HTML with separate windows. Generally you edit the HTML in blocks, rather than the entire document itself, but you still have access to it. Dreamweaver has a code editing mode that you can switch between.

Do you think HTML editing is important in a web page editor? Or do you rely on the visual editor 100%?

Previewing is an Important Feature, Too

If you’re like me and you prefer a text or code editor, having a good preview is important as well. But even if you use WYSIWYG you should be able to preview in different browsers and possibly even mobile device emulations. Previewing is a web editor feature that is often overlooked in favor of more of the bells and whistles because it seems like an obvious feature.

But with responsive web design and the need to develop sites that work on many device widths, sizes, and capabilities, being able to preview what you’re doing quickly and without a lot of fuss is critical.

I like Coda because I can hit the preview button and it will show me my pages, including PHP and other dynamic designs, right in a webkit browser in the editor. I can resize the preview pane and see how it responds once I’ve added RWD features. Then when I’m confident it will work in that browser, I can open my page in any web browser I have on my computer.

Dreamweaver offers a connection to mobile devices through the Creative Cloud. All you do is click on the preview icon and it will give you a QR code you can scan and view on any device. You can also send the URL to other people to have them preview your designs. This is a great quick collaboration method. And this is in addition to the built-in preview modes to do edits in a page sized for an iPhone 4 or a Google Nexus 10 or any other size you want to define.

Do You Agree? Are These Important Web Editor Features?

Do you have a feature you can’t live without? It can be something as simple as color coding or something fancy like RWD-builders. What makes an editor something you can’t live without?

Leave a Reply

Your email address will not be published.