Jump Start Websites With Jumpchart

Wednesday September 5th 2007, 11:15 am

Written by: Brian Benzinger

Related Articles:

Pegtop PStart: Pergtop's PStart is a cool small application that you can stick on a jump drive or keep it on your computer that will allow you...
9rules welcomes Solution Watch: I can barely believe this, everything has been happening so fast these last few days. Paul Scrivens, has recently accepted Solution Watch to jump aboard...
Guide to Writing a Business Plan: Business Plans, they are intimidating. There was a time that I wanted to create a Web Design company with my brother. We felt we had...

Article Tags:
jumpchart, information, architecture, content, planning

Bookmark this Article:
Post at Del.icio.us and Add to BlinkList

Diagrams play a very important role in planning and communicating a site’s architecture. They help you visualize a project before developing and piecing things together, leading to smarter design decisions. Unfortunately, for a client, Information Architecture and diagrams can be very intimidating, not to mention appear impractical. Because of this, many web teams end up leaving a client out of the whole process and resort to other means of learning what they want on their website. The end result? A mess of emails, Word documents, links to websites, and so on. Jumpchart, currently in private beta, hopes to put an end to all of this.

Jumpchart provides an easier way to plan and visualize content with clients. Forget wireframes and flowcharts and instead allow clients to browse through an interactive sitemap with pages and sub-pages of content. Let them illustrate their needs and add all the content you need in one simple location. Meanwhile, discuss and make changes as needed until the content planning stage is complete. I don’t necessarily see Jumpchart as a way to replace your existing Information Architecture process, but I do feel it makes a nice addition by allowing you to quickly gather and perfect content with groups of people. Invite the whole team: designers, developers, copywriters and clients; and make better decisions easier and faster.

Jumpchart’s interface feels in many ways like a content management system or website builder. You create a site, add pages and sub-pages, fill in content, and attach files to pages just like you would in a website builder. Jumpchart also produces a preview website, or as they put it, an interactive sitemap, which you can browse through and send to clients. You can even down the entire website in pure XHTML and CSS. You cannot, however, change the design of the website that Jumpchart creates - not a major loss considering the client only needs something to help visualize the end result. Users can leave comments on pages, and if permitted, edit content and reorder the site’s navigation. Additionally, each site gets its own RSS feed containing information about recent content changes, page additions, and navigation reordering by other users.

Jumpchart uses Textile Markup Language for editing content, but something tells me my clients won’t want to learn a language to fill in their own content. They’d rather use a WYSIWYG editor. That’s what the average person is familiar with and that’s what will allow them to copy and paste content without losing formatting. My preference? I’m a Textile kind of guy, so I’m happy with their decision. Besides, it gives Jumpchart more flexibility. To explain, after uploading an image, Jumpchart lets you insert that image in your content by adding (image_name). Additionally, linking to other pages within Jumpchart can be done by inserting, "Page Link":[page_name]. Again, maybe a little much to expect a client to write out. You can also build basic non-functional forms with Jumpchart’s custom syntax, enabling you to easily mock-up contact forms, registration forms, login forms, or whatever you may need. You just type out the form elements as they are: [input], [checkbox], [textarea], [submit] and so on.

Just last week, Jumpchart introduced a new feature, Snippets. When you create a site snippet, you are essentially creating content that is meant to be repeatedly used throughout a site. For example, you can create a snippet for a newsletter form and include that form on any page with the syntax [[newsletter_form]]. It saves you from typing the same thing over and over again and also makes it easier for other collaborators. It also enables you to add blocks of content to pages which can be globally changed throughout the site by editing a single snippet.

What I like most about Jumpchart is the simplicity in the product. It helps save time collecting and formatting content and gives clients something to visualize before having the real thing. However, I don’t feel Jumpchart is the best solution for large scale websites. It works well for small and medium sized sites that require a minimal amount of content planning, but if you have a site containing possibly hundreds of pages, things could get dicey. Jumpchart can improve on this by allowing me to search or filter through pages and perhaps offer a one page dashboard showing recent activity. Maybe even collapsible page navigation would help save room.

On the same topic, check out WriteMaps to create and share simple sitemaps online. Rev2.org has more on Jumpchart.

31 Comments

Leave a comment - RSS feed for comments on this post. - TrackBack URI

# 1. heri on Sep 05, 2007 at 2:54 pm

i use rapidweaver, a small mac software, for Information Architecture. It wasn’t meant to do so, but it’s fast and gets the job done.

# 2. Brian Benzinger on Sep 05, 2007 at 3:10 pm

Heri, RapidWeaver looks nice. It looks to have a similar feel to Jumpchart with the left hierarchical navigation and snippets area. I know it’s a full fledged web builder, but as you said, it still works for basic IA. I’ll have to check it out. Thanks!

# 3. Joe on Sep 05, 2007 at 3:24 pm

Heri,
I was unfamiliar with Rapidweaver… Pretty cool. It does remind me of Jumpchart in some ways. Still, I think the most important thing that Jumpchart adds (shameless plug) is the ability to collaborate. I only spent a minute on the Rapidweaver site, but I didn’t see any mention of collaborators.

Of course, you can ask your client to buy a copy, and have them ftp to the same server… There are a lot of ways to do the things that Jumpchart does with varying levels of complexity. We’re hoping that we’ve made it easy enough that the old ways are obsolete. Before Jumpchart we were using Dreamweaver to build CSS mocks… It was a step in the right direction. Like Rapidweaver, at least once the mockup was done it was useful… You could actually use it to begin building your site.

Do you have a workaround for the collaboration thing that’s working for you?

-Joe

# 4. Acompanhante on Sep 06, 2007 at 4:42 am

This is a godd idea.

# 5. Randy on Sep 08, 2007 at 3:57 pm

BackPackit.com from THOSE guys, does something very similar but this looks a great deal smoother. Suprising that there are so few because it’s a huge tool.

# 6. Joe on Sep 09, 2007 at 5:31 pm

Randy,
Good point about backpackit… You’re right, you probably could get creative and use it to do something similar. Sharing pages would work similarly, and messages could serve as the main content area. Still, I think you would miss out on being able to create subnav, export css, and create forms.

As a long time backpack user, -I even tried to demo a site to a client using backpack, and Writebaords… The fact that it was so frustrating was one of the things that led us to build Jumpchart.

If you have any cool Backpack website wireframes to share, I would really like to check them out for comparison…

# 7. kevin on Sep 11, 2007 at 8:53 pm

brian, good find! And you pointed out at least 1 major issue.

I agree 100% with the Textile concern - this site needs to offer both to be a “sell”. My clients would never, ever attempt to learn textile (nor would I ask them to) to markup their pages.

So, I see two solutions:

a) either offer both options (textile or wysiwyg (html))
b) wrap the textile markup behind the look and feel of wysiwyg editor - getting you the best of both worlds.

overall, this site has potential.

Another site I use to collaborate is www.conceptshare.com - great tool that I use frequently.

But the feature to edit/share collaboration on content, etc is huge (can’t do in conceptshare - not really the goal of it either). Is there a workflow feature? That would be another ++. I often have clients send over 2 or 3 editions of a MS Word doc that I need to save out and process weird chars for, etc. Having a workflow would make this huge. Oh, and this also leads back to the Textile issue - I’d need to be able to grab the html. I assume this is a no brainer.

Thanks for the interesting post.

# 8. joe on Sep 13, 2007 at 5:10 pm

Kevin, We’ve heard a few people asking for wysiwyg. We’ve been listening, but aren’t ready to move yet. So many of the editors around have problems in different browsers. I agree that a point-click system would be easier for some users though. To be honest, -we probably won’t implement it until we’re sure it’s actually adding to the ease. At this point, I’m just not sure. As far as the exporting html thing… of course. That’s the best part of Jumpchart. -Spitting out CSS/xhtml when you’re ready to start building.

# 9. Sin Jin Lee on Sep 20, 2007 at 11:43 am

Jumpchart sounds like a cookie cutter version of what 37 signals already offers. Like a couple of the added features but would take a little more to lower my switching costs from backpack.

# 10. Joe on Sep 22, 2007 at 5:12 pm

Sin Jin Lee, I think you might have hit on the ability to create pages full of content as a Backpack analogy. I think there are some similarities. Backpack is great at letting you store miscellaneous types of content in an organized fashion. Jumpchart is specifically about planning websites. There are some similarities, but with use, you would see the difference. They’re targeted at totally different uses… I think you might be able to cobble together a use pattern for Backpack that achieved a lot of what Jumpchart does, -like wise you could use Jumpchart somewhat the same way you use Backpack… In both cases it would be a struggle, and you would be missing the real benefit.

# 11. kid's clothing on Sep 26, 2007 at 8:49 am

Great article, I really like the idea of the Snippets feature.

# 12. Rick Marks on Oct 28, 2007 at 6:29 am

Another useful tool for prototyping web apps was positively reviewed, with some comparisons to Jumpchart, in WebWorkerDaily, at this link:
http://webworkerdaily.com/2007/10/25/another-approach-to-free-collaborative-site-prototypes/#more-1251

# 13. noclegi polsce on Nov 14, 2007 at 5:15 pm

Jumpchart is good thing. Thanks for taking care of this. Much appreciated :)

# 14. Ryan Ward on Dec 16, 2007 at 8:21 pm

Interesting concept for businesses, but, I’m going to say that a wysiwyg is something that you could sell a client on from a useability perspective.

# 15. Phantom on Dec 19, 2007 at 11:28 am

I agree with Ryan, useability perspective is the key in selling. My experience made it easy to sell people even stuff they can’t use, or make usefull. In my opininon, if it’s usable, you must make your customer to buy it.

# 16. San Diego Bob on Dec 24, 2007 at 6:08 pm

Too bad it’s in private beta. I would like to test it on some of my smaller sites…

# 17. Wreck on Dec 30, 2007 at 3:55 am

Bob you can openly join, there’s a free account that lets you do 1 project with 10 pages, 2 users and 1MB of space so there’s nothing to loose.

There’s 3 paid plans, Simple, Super and Deluxe if you find you need to run multiple projects.

Definitely give the free one a go.

# 18. Harley on Jan 12, 2008 at 6:16 pm

Free one is ok, but I’m still cheap :-). I need the paying (Deluxe) so if anyone wants to buy with me, will share fifty fifty.

# 19. ionworx web design on Jan 23, 2008 at 11:09 am

Try MODx (http://www.modxcms.com)- it has a frontend editor called “QuickEdit” that can be used with clients to build content directly on a staged or live site.

# 20. funzig web design blackburn on Jan 28, 2008 at 8:02 am

MODx also features snippets…

# 21. ArticlesGarage on Feb 18, 2008 at 1:13 pm

Communication is the biggest problems these days and I know how difficult it is to communicate with clients…from the simple fact of what kind of business they run to the complex projects of website design and maybe marketing. I have always wondered if there is a better way to communicate with clients easier and I am so happy someone thought of that too.
I will definitely see what can do and test if it will make my tasks easier.

# 22. DUI on Feb 20, 2008 at 12:18 pm

It does look like a website builder huh Brian? Any idea when this will get out of private beta?

George

# 23. Timmy on Feb 25, 2008 at 3:07 pm

It looks like a more complex and sophisticated tool than just a simple website builder.

# 24. Logo Designers on Mar 02, 2008 at 4:19 pm

Rapidweaver sounds interesting - Ive heard of it before but im not a Mac user. I am guilty of using heavy email, word docs, etc to keep clients informed….Im gonna give it a go with Jumpchart and see what happens…

# 25. Axel on Mar 18, 2008 at 4:49 pm

I just watched Jumpstarts video tours, after finding your blog. It looks so easy with all the dynamic stuff. Exspecially the export to “simple” HTML makes it an easy to use tool for everybody. Great Pick.

# 26. Axel on Mar 18, 2008 at 4:52 pm

Well I just noticed…. It should be Jumpchart not Jumpstart. Even so I think Jumpstart would be the better name. ;-)

# 27. bob smith on Mar 24, 2008 at 10:17 pm

this is such a good idea

i wonder why no one else has thought of it before now

it is very usefull

thanks for helping our socity

bob smith

# 28. Aventura Paternity Lawyer on Mar 27, 2008 at 12:26 pm

This seems like a really good system. Kind if like Wordpress, but on steroids - shh, don’t tell Congress ;-)

Websites are getting easier and easier to build. Now I just need an tool that helps with graphic design. For me, that is the hardest part.

Sandy Fox