Prototyping with HTML & jQuery

I was recently tasked with creating a prototype for a web application and it has turned out to be a much better experience than I expected. The project started off a bit different than usual due to the lack of creating a concept in Photoshop or Fireworks. I almost always begin designing with graphics that can then be approved or modified based on feedback from clients or coworkers.

So with that said, I wanted to share a few of my thoughts on how my experience with leaving Photoshop at bay and only working with a text editor has worked out.

I began the project with a set of mockups that were delivered along with a deadline that was going to be a tough one to pull off. Right away I knew that it was time to fall back and try out some advice I read in a recent article that recommended dropping the use of a graphics program and jumping right into the code to help save time.

Now usually I would put together a visual concept and deliver that to the developers that are working on the project. This would normally happen before I would actually begin coding out the HTML and CSS. This time though I was being so pressed for something to see in such a short time frame that I decided to jump straight into the HTML/CSS and to use jQuery in order to give examples of interaction on any given page.

jQuery has been a lifesaver and I am now a huge fan! I have to say that even though I am not yet fully comfortable with JavaScript the framework has been a joy to work with. While using jQuery I have been able to demonstrate interactions on pages that would have taken much more time with graphic concepts.

With only a very basic understanding of JavaScript, I have been able to get a grip on jQuery and in a very short amount of time. I have also been able to keep my HTML and CSS very clean by first creating the document and styling and only using jQuery to show examples of user interaction.

I doubt that I would move to something like this on a full-time basis but this time around it has been a great experience and if it fits the project, I would highly recommend it. I also read, watched, or heard (can’t remember which) a statement made by Jeremy Keith (JavaScript Hero) where he said that it’s always better to understand the underlining technology (JavaScript in this case) than to only rely on frameworks. Although he does go on to say that if doing prototypes you should use whatever gets the job done.

This statement really made a lot of sense to me and is the reason why I will be spending more and more time learning the fundamentals of JavaScript but I have to say with quick prototypes jQuery is hard to beat.

Big ups to the jQuery team and if you haven’t checked it out yet, there’s no time like the present.