Building a Prototype Web Application

This past week I have been putting together a fairly simple prototype web application. Ultimately I will build it with a back-end database but right now it is about a dozen static HTML pages. This will allow others to look at the design and suggest changes or refinements before we spend a lot more time and money on the finished internal application.

Putting together static HTML pages is something I did many years ago while working as a consultant. Back then I would hand code all of the HTML as automated tools didn't really exist. Sure I could use something like Dreamweaver from Adobe but the underlying code was difficult to maintain in a non-Dreamweaver environment. That was close to 20 years ago and so I did a quick survey of HTML tools to see if there is something that would work for me.

I must have gone through 30 different tools and none really worked. Some had a steep learning curve and wouldn't quite create the look I wanted. Others were just plain awful. Ultimately I decided I didn't need anything too fancy and used a word processor to create my initial design. Then I had it save my file in an HTML format. That sort of worked, but not quite. Next I pulled out GIMP and did a lot of layout work with the graphics. Then I did an few Internet searches and brushed up on my cascading stylesheet (CSS) skills. Once I had a design I liked, I tweaked the look by hand editing the HTML using my favorite text editor: vi.

Now I am building out a few follow-up pages simply by copying the original page and making a few edits. I don't need to build more than a dozen pages to help my colleagues understand what I am trying to build and so this process works fine. If I needed to build a more complex prototype with a lot more pages, I might want to take the time to learn one of the more complicated tools. Until then, my current process seems to be working fine.