I’ve been using Tari “GoodPage”:1 for the past week to redesign the House-Mouse site. Unlike other CSS editors, GoodPage edits a page’s style sheet **and** its HTML, which makes it easier to create a modern web site. It can also show a live preview of the web page you’re editing so you can see the results of your changes without having to switch to a web browser, thus it consolidates three major parts of web page design. With GoodPage you do have to edit your HTML and CSS code directly, but I prefer doing that anyway.
GoodPage offers many ways to view your web page, but the ones I’m finding most useful are:
* HTML source code
* style sheet CSS source code
* structure (a graphic, 2D hierarchical view of the web page contents)
* list of individual css selectors (handy to look at a specific selector, rather than being overwhelmed by the entire style sheet)
* brower preview of the web page
The main window can display any two of those views side by side, so you can preview your web page in the left pane while you edit the html (or the style sheet) in the right pane. Or edit the html source and the stylesheet side by side. Or whatever combination you need at the moment. It’s handy not having to switch between windows, or to switch between programs for editing or previewing.
GoodPage offers a bunch of handy little tools to make development easier. For instance you can select an element in the web page preview (like a div, a paragraph or an image), and view its CSS properties in the other pane, then edit them and immediately see the change. This is great for debugging things like figuring out why there’s too much space above an element: you can not only see that top margin (or top padding) is too big, but which style sheet and selector are setting that property. And from there you can just fix the problem. Another nice feature of the side-by-side views is that you can select an element in one view hit Command-L, and a blue arrow appears to point out the corresponding item in the other view. So you can select a paragraph in the page preview and instantly see the html source for that paragraph in the other pane. Nice, it saves scrolling thru the source looking for it.
The developers have sucessfully leveraged the features offered by Mac OS X, and the program is a pleasure to use and is visually pleasing as well. I’m a sucker for aesthetic and useful, which is why I use a Mac.
As nice as it is, my biggest frustration with the program is that it comes with no documentation. None. The developers feel that GoodPage is so intuitively obvious to use that a manual just isn’t necessary. Unfortunately they’re wrong, and it’s taken a bit of stumbled around the program to figure out how to use it. In addition to only using a fraction of its features, I also feel that I’m not getting the most out of the features I am using. Using the program is like using some piece of wonderful alien technology that does some really cool things, but you just have to puzzle it out yourself and learn how to think like the aliens. For instance I can’t see what the big deal is with Structure View, but I get the impression that with it you can edit a page without knowing HTML, but I’ll be darned if I can figure it out. Still, what I have been able to discover has made me so much more productive that even after using it for just a few days, designing CSS web pages without using GoodPage would be so much harder.
With a price of $99 (early adopter special), it’s more expensive than the shareware alternatives, but cheaper than Dreamweaver. At that price it should include decent documentation, a tutorial, and more than the minimal CSS reference it comes with. Some sample templates would be also be great.
GoodPage works they way I do (at least what I’ve figured out so far) and it lets me focus on design without the distractions of switching to other programs, or searching through various style sheets for a given selector. This is an early version (1.1), so now that Tari has released this solid and useful tool I’m hoping they put their energy into writing a manual and perhaps creating a tutorial to show people how to use it. After all, what good are all those wonderful features if nobody can figure out how to use them?