TypeMetal’s Approach

Most HTML editing apps can be grouped into one of two basic design camps:

  • Source Code Editors, that present raw HTML source code for users to edit. The best of these provide syntax-coloring, completion, snippets, templates, project management, and other genuinely handy assistive features, but ultimately they leave page authors to wrestle directly with HTML syntax — which isn’t rocket science, but can be a needless distraction from the substance of the content you’re sitting down to write. In a source code editor, previewing a rendered page as site visitors will see it typically happens side-by-side, in a separate view or window from where the actual writing and editing is done. You’re writing markup over here, but you’re shown what the result will look like over there.
  • Layout-Focused WYSIWYG Editors, that present a canvas where users can position text boxes, media, etc. wherever they want, using whatever fonts and other styling they wish, with the app then generating whatever HTML, CSS, and supporting images are necessary to make a published page look the way the user requested.

Each has its place. The former will probably always be where a certain amount of nuts-and-bolts HTML development is done — particularly template development, and work that involves scripting. The latter can be of great help to users who just want to get pages of content up, without having to learn even a bit of HTML, but in worst-case scenarios the challenge that’s posed to such apps can produce bloated and overly complex code.

My chief design goal for TypeMetal has been to strike a useful balance in the under-explored territory in between. I wanted to be able to write and edit content with the intuitive ease of a conventional word processing UI, while having my cake too and producing elegant, minimal, standards-compliant HTML that conforms exactly to the element usage conventions I want.

The point of this approach is not that “HTML is hard” — by design, TypeMetal empowers you to get as technical as you want with your content, and you’ll absolutely benefit from, and be rewarded for applying, knowledge of HTML’s element set when you do so. The point is that sometimes it’s helpful to have the mechanics of HTML fade into the background for a bit, so you can put your focus on the ideas you’re expressing. When I write using TypeMetal, as I’m doing right now, I still think about the HTML elements and CSS-triggering “class” names I can choose from, and which are most appropriate to apply for the context I’m in, but the thought is in the background — a fleeting, select-and-apply step that I get into and out of more quickly than I can when hand-assembling HTML. This puts me back in my train of thought while I still have it, instead of luring me into HTML’s abundant opportunities for becoming distracted by the mechanics. (“Should I put this element tag on a new line? Indented? How many spaces should I put here?” And on and on…)

I wrote TypeMetal with a deep appreciation of, and the goal of producing, elegant, well-crafted HTML that will meet users’ highest standards. There are worthwhile rewards of styling flexibility, semantic expressiveness, and pleasing conciseness to be had, for those who go to the effort to craft lean, modern, streamlined HTML, and I wanted to empower myself and others to obtain those rewards with greater ease than ever before. TypeMetal is a highly technical HTML-building app when you want it to be, but also lets you treat it as a simple, distraction-free notepad when that’s what you want. To me, this strikes a novel and very useful balance that I’ve long been looking for. I hope others will delight in using TypeMetal and find that it fills an unmet need for them too.