When it comes to building a website, however small it may be, you can be certain that you will go through several modifications before arriving at the final structure as well as copy. Now imagine you are working in a team and each person has their own ideas. You can at least double to number of alterations that the website would go through.

Once your team is satisfied, you present your final proposal to the client and he wants to modify further. He wants to add a few more pages to the About Us section. “Oh, and the homepage needs more images”, says the client.

As the developer, how do long can you go on tweaking things without losing it? Well, that depends on your tolerance level and on how much the client is paying you for the project.

But maybe Jumpchart can push your tolerance level a little further and get you to a few more changes.

Overview

Jumpchart is a simple online collaborative wireframe designed to make planning websites simple, fast and more efficient.

I agree with every single word of that. Here are the key features of using Jumpchart:

• Extremely easy to use.
• Helps you keep pace with the ever-changing thoughts of your client.
• Allows you to invite others to collaborate.
• Allows collaborators can comment.
• Sends email notification and RSS feed of changes made.
• Helps you format content without requiring to know HTML.
• Exports your site as HTML+CSS and for WordPress.

Who will find it useful?

Jumpchart is available for free as well as a paid service. In the free version, you can create only one project with up to 10 pages and you can invite one more person to work on that project.

Depending on how much you are willing to pay every month, you can have from 5 to 30 projects and invite many more people to collaborate with you. As a paying user, you get the option of exporting your site for WordPress also.

OK, but who will find Jumpchart useful?

• If you are a web developer, you can use Jumpchart to wireframe a website you are building. In an hour or two, you can have a presentable prototype of the site that you can demo to the client. If the client wants to reshuffle the navigation, or change it completely, no problem. Drag and drop the pages to restructure the navigation. Once you and the client are happy with the structure, export the site as HTML and do what ever is needed after that.
• If you want a simple website and can’t afford to pay a web developer, you will find Jumpchart useful. Get yourself an account and start adding pages. Jumpchart uses Textile to simplify the markup of the content. This will allow you to format your content to look the way you want it. Once you are happy with the site, take an export of it and upload it to your domain.

How to Use Jumpchart

Sign Up

The first thing you need to do is to sign up for a free Jumpchart account. If you want, you can upgrade to a paid plan later on. Once you submit the signup form, you will be taken directly to your account and you can get started with Jumpchart.

No need to wait for any confirmation mails.

The signup form.

Get Started with an Example

After logging in, you will see a list of all your projects. To start with, your account will already contain one example project. This is a very nice example and I suggest you play around with that before creating your own project.

The default sample project is a nice way to get familiar with the app.

Adding Pages

Pages are the building blocks of a website. So let us start by seeing how to add a page to your site.

Adding a page.

Near the top right corner, you will find the links to add a page or a sub-page. A page doesn’t need explanation. A sub-page is like a regular page except that it will be placed hierarchically beneath the page you are currently viewing. When you click on ‘+ Add Page’, you will need to specify the name of the page; and it will be added at the same level as the current page.

The power of Jumpchart lies in how easy it is to reorganize your pages. It is never too late to realize that a sub-page should have actually been a top level page or visa-versa. To change the position of a page, you need to drag the handle in the left navigation and drop it wherever you think the page should be.

Reorganizing pages is easily achieved.

Editing the Content

Textile

To edit the content on a page, simply click on the floating ‘Edit’ link that appears to the left of the content. It will replace the read-only view of the page with a text box with a formatting bubble on the left.

A nice touch to access formatting.

Jumpchart uses Textile to provide simple content markup for those who don’t know HTML. Check out this list for more formatting options.

Attach a File

While building a wireframe, it is often useful to be able to add a few images to the page. You can do so by clicking on ‘+ Attach file’. You need to provide the name of the file and upload the file. Once the file has been uploaded to the server, you can reference the file with the filename and insert it anywhere in the page.

Easy file attachments.

If you upload an image, it will show up directly in the page. For other types of files, a link will be provided to the file you uploaded. In case you don’t have the actual image but still want to put something so that your designer knows that an image will come there, you can put a placeholder, by inserting ‘[photo]‘ in the code and a placeholder for an image will show up.

When you get the actual image, you can replace the placeholder with the actual image.

Page Settings

In the new version of Jumpchart, you can add additional information about the page. You can specify the description for the page and also specify the layout of the page. The description will not be visible in the page. It will come in the meta section of the HTML page which is one step towards making the page search engine friendly.

The layout of the page could be either a single column or two column layout.

Change your layout preference in the settings.

If you choose a two column layout and click on Save, the content area reloads and you can then edit the content for both columns independently.

Use the various options and rearrange your content as you desire.

Views

Jumpchart provides two views other than the editing view of your site. The first one is called Wireframe View. You can get this by clicking on the ‘Wireframe View’ link near the top right corner of the window.

View the entire structure of your site.

It provides a fully functional view of your site. You can choose to make it public so that everyone can view it. Otherwise, you could share the link to it with your client and get their feedback.

The other view of you site is called ‘Sitemap View’. This view is extremely useful if your site consists of several pages. It provides a hierarchical view of your site. You can very easily check if any page is in the wrong place or if you have missed out that very important page.

The sitemap view gives you similar functionality.

Export

Once the content of your site is complete, you can export it by clicking on the ‘Export’ link near the top right corner of the window. You have a choice of exporting only the current page or the whole site as ‘clean’ XHTML/CSS. Another great thing about Jumpchart is that their export is indeed clean. The markup is completely separated from the design.

So after you export the site, just by modifying the CSS files, you can pimp up the looks of the site.

Jumpchart also provides an export for WordPress, but that facility is available only to premium customers.

Jumpchart does a nice job of creating clean markup.

Collaborate

Apart from the ease of use, Jumpchart has a very handy collaborative angle to it. You can invite other people to work on your project. Lets say you have hired a copywriter and instead of getting her to mail you the content, you can invite her and she can enter the content directly.

You can also invite your clients as a ‘view only’ user to the project without fearing that they will screw up thing. A view only user can’t edit the content.

Start collaborating.

But wait a minute … why would I want to give access to a user when she can’t make changes to the project? Well, even though she can’t make changes, she can leave comments for each page. When you login, you can read her comments and make the necessary changes.

All users you invite can leave comments.

Conclusion

This pretty much sums up everything Jumpchart has to offer. Aside from a few features, like being able to add keywords to a page, there isn’t too much I would want to add to its feature list. Jumpchart is a tool for creating wireframes and it does a great job of it.

And thats enough.