Wednesday July 7, 2004 / Filed under: Web Design
One Site, Two Domains, Three Tools
As you may have noticed, my web site is spread over two domains, marksimonson.com and ms-studio.com. I’ve had marksimonson.com only since last fall and ms-studio.com since 2000. If I had been smart, I would have used marksimonson.com from the beginning. I’ve learned the hard way that a domain name with a hyphen is not ideal, mainly because it’s difficult to convey over the phone:
“It’s w-w-w-dot-m-s-hyphen-studio-dot-com.”
“Got it. Talk to you later.”
And then I get a phone call a few minutes later after they try to go to “www.mshyphenstudio.com”.
Now I can just tell people to go to “marksimonson.com”. Unless they don’t know how to spell my name. Still, it’s better.
What may be less obvious is that I’m using three different tools to create different parts of my site.
Tool Number One
When I started out, I didn’t know much about HTML and discovered a wonderful tool called Freeway. Freeway is more of a site editor than an HTML editor. In fact, the HTML is pretty much hidden from you. It works a lot like QuarkXPress. It even has master pages. You start out with a blank canvas and draw boxes for content and import text or graphics. You can even drag Photoshop or Illustrator files right into the layout. All the graphics and HTML are generated automatically when you preview or upload the site, much the same way that Quark generates PostScript files when printing. This is a radically different approach than other web design packages.
Depending on how you look at it, Freeway is either a crutch for folks afraid to look at code, or enabling technology for mere mortals. After all, it did enable me to get my site up and running in about a week back when I knew little about HTML. I don’t really need it anymore, but I still use it for the older parts of my site. Frankly, it’s dead simple to use, and I’m just too lazy to stop using it.
I did run into some problems when it came to the font sample pages. Originally, I did these pages in Freeway using a brute force approach: Every possible tab combination was a different web page. This worked, but it was anything but seemless. It was also a lot of work to update and maintain. When I started getting ready to release Mostra, which was going to need 30 pages, I decided there must be a better way.
Tool Number Two
Freeway has lots of “actions” for doing typical JavaScript things like roll-overs, pop-up menus, slave images, etc. But none of the these did what I wanted to do on my font sample pages. I realized I needed to do custom JavaScript programing, but Freeway is just not designed to make it easy to do that. So, I turned to Dreamweaver, mainly to have direct access to the JavaScript code.
I had used Dreamweaver some even before Freeway, and rediscovered it after being frustrated with some of Freeway’s limitations. At the time, I was getting more familar with HTML and I was able to recreate my basic site layout in Dreamweaver using tables and a some hand coding until I got it to look exacly like the Freeway-generated pages.
I spent about a week working on the JavaScript to recreate my tab system on a single page for each font family. What had been been dozens of pages in Freeway was reduced to a just a few. It worked great and turned out to be easier than I thought, mainly because I already had already worked out the basic idea in Freeway.
As it turned out, Dreamweaver was a kind of half-way house for me on the way to hand coding.
Tool Number Three
Over the last year or so, I have discovered the joys of CSS-based web design (thanks to things like Jeffrey Zeldman’s book, Designing with Web Standards and A List Apart) . So more and more, I have been coding by hand.
This is easy enough for me to do using BBEdit, but what really got me hooked was a new tool called HyperEdit. Basically, this allows me to get instant feedback as I type HTML tags and CSS styles. It might not seem like a big deal, but it’s like the difference between being a driver and being a backseat driver. Or between talking to somebody and sending a letter. Anyway, I really like it.
In fact, this whole Notebook thing came out of fooling around with HyperEdit. I started trying to see if I could recreate my site layout in CSS using HyperEdit. Before I knew it, I ended up with a blog and I used HyperEdit to create the templates.
Conclusion
I’ve gone from “wysiwyg” to hand coding, while keeping the site looking the same, regardless of the three tools I’m using. It’s an interesting approach, but I don’t necessarily recommend it. If I were starting from scratch, I would probably try to hand code the whole thing, but I’m a little busy right now. Maybe later.
Wednesday June 30, 2004 / Filed under: Web Design
Published with Textpattern
The Notebook section is driven by a new content managment system called Textpattern. Textpattern is the work of the talented and somewhat curmudgeony Dean Allen, proprietor of Textism. Textpattern is still under development, but it works just fine for me so far.
For a few other projects, I have used MovableType, a nice CMS specifically designed for weblogs. Even though Textpattern is unfinished, it’s more responsive and easier to use. This is partly due, no doubt, to the fact that TP is completely dynamic—every page here is generated on-the-fly, pulling elements from a database as needed. MT takes a different approach—actual HTML files for each page are built whenever you make changes. If a change affects every page in the site, this can take some time. With TP, no change takes more than a few seconds, even if it affects every page on the site. I’m sure there is some downside to this approach, but I haven’t found it yet.
The other nice thing about Textpattern is that it automatically takes care of a lot of the little text formatting details, like using typographer’s quote marks, real em-dashes, and so on. For someone like me who is very picky about type, this is very handy.