Features

The creation of ,and colloboration on, interactive website wireframes is ProtoShare's main function, but there are other powerful uses for the tool. We'l bring you examples of this over the next few weeks. Today we'll discuss a popular feature: live site review. We've heard from many users how they find using the IFrame component an excellent way to review and discuss live sites.

As you know, sometimes the first step in building a new site, or doing an overhaul of a current site, is to analyze and discuss how the current site works - or doesn't work. It's very easy to do this by using ProtoShare's IFrame component:



    •    Create a page in the Site Map called "Live Site Home" (for example) and click Edit Page.
    •    In the Editor, drag the IFrame component onto the canvas and click the Refresh button.
    •    Type the live site's url into the Source URL field under Settings.
    •    Re-size the IFrame box to fit your live page.
    •    Customize your view by selecting Scrolling styles and Frame Border options in Settings.

Now you are ready to open this page in Review and share with your team. Although you can navigate through your entire live site from one page in Review, you'll probably want to create a page in the Site Map for each of the main sections of the live site. That way your topics and comments will be specific to each page under discussion.

You can also use the IFrame to keep tabs on the development process after you finish your prototype. You can display the development site while it's still in progress and even click between the Wireframe and Comps tab to get your HTML and CSS styling perfect. This is an excellent way for the developers to share their work with the team and for project managers to make sure everything is on track. IFrame: a great tool for reviewing live sites and sites that are still in development.

Relax. Take it easy. You're about to enjoy the soothing sounds of ProtoShare's Navigation component. What was once a long involved process, with numerous revisions and reworkings of HTML and CSS copied and pasted across dozens of pages, is now just a simple drag and drop. ProtoShare's navigation component automatically picks up the navigation from your site map as soon as you drag it onto the canvas. Boom - there it is. Excuse me while I put my feet up on the desk.
 
Ok, that's much better. As I was saying, not only does the navigation instantly fill in, but it also automatically updates everytime you revise your site map. Deleting, adding or changing locations of pages does not phase the navigation component: all links and paths are automatically maintained. But, if you do want specific pages for the nav, you can do that as well. Just click on the component to display the Properties tab, open the Page Selector by clicking the Starting Pages field and use Shift-click to select the specific pages you want.
 
Hang on a second while I stretch out in the office hammock. Normally I would be worried about setting up different styles of navigation on the page, wondering whether it should display horizontally or vertically. But the List Style setting allows me to easily shift between horizontal, vertical or plain text menus. Not only that, but the horizontal and vertical menus automatically include drop-downs and fly-outs as needed. It's almost decadent, isn't it?
 
So, how about you? Are you feeling relaxed yet? Oh, you're wondering about your headers and footers and other incidental nav areas? Well, no worries there. You can drag out any number of navigation components onto a page, set each one to a different root page and quickly configure them to suit your needs.
 
Tip: To have distinct header and footer navigation, create a Footer page in the site map. Drag the pages you want to be in the footer into the Footer page, so they show up as sub-pages. Set just the Footer page's visibility to "Hidden from navigation".
 
In the editor, drag out a navigation component to the canvas and click on the component to display the Properties tab. Next open the Page Selector by clicking the Starting Pages field and select Footer from the Page Selector. Finally, select plain text from the list style, since it does not include drop-downs or fly-outs. There you go, a perfect footer.
 
Ok, I'm going to take my mid-afternoon siesta now. What, you want to know where you can get a hammock too? I can see the navigation component has already started working it's relaxation magic on you. I'll get back to you on that after nap time....

Between the feedback we've received from our clients and the discoveries made by our own internal usability team, we have picked up some good tips on how to best use ProtoShare™. We'll be passing these on to you as often as we can.

First of all, we've found that running the dev plug-in Firebug on Firefox causes ProtoShare to be slightly sluggish. So it's recommended to disable Firebug when developing. This is very common with web applications. Even Google advises shutting off Firebug for Gmail.

If you are using ProtoShare on Internet Explorer 6 or 7, the site will run slowly if you have the Internet Explorer Developers Toolbar enabled. You can disable the developers toolbar temporarily to eliminate the problem using tools > manage add-ons > enable or disable add-ons on your IE menu. Be sure to disable both "IE Developer Toolbar" and "IE Developer Toolbar BHO."

And while we're on the subject of IE,  just a reminder that the Build part of the tool is currently only supported by Firefox on the PC and Mac. And you've probably heard that with the 1.0.1 upgrade on June 26th, ProtoShare will be compliant with Firefox 3.

People seem to be excited about the IFrame component. We like it, too. It's a great way to show any live site in a wireframe - even one you may be developing. The only downside to the component is that certain sites don't like being put in IFrames. For example, both CNN.com and NYTimes.com won't play nice. Unfortunately, there is nothing we can do about this. But, we won't hold it against them.

Do you ever wish you had more screen real estate in Review? You may not know that the border bar between the comments area on the left and the wireframes on the right is resizable. You can drag it to the right to resize either panel. And double-clicking on the border bar in Review hides the left column entirely. Click the double arrow icon in the far left bar to re-open it.

Lastly, a number of people have had questions about the navigation component. By default, it picks up the global navigation, but you can easily change this in the Starting Pages setting in the right hand Inspector panel. You can have any number of custom navigation components on a page, each one set to a different root page. This works great for creating distinct headers and footers.

And make sure you read our post about templates and wrapping templates.

That's it for now. If you have any tips to pass on or any questions for the ProtoShare team, email us at tips@protoshare.com. And remember - you can always find a ton of good ProtoShare information in the Help document, the video tutorials, and the FAQs.

As you've probably discovered by now, topics and comments in the Review area of ProtoShare can be assigned multiple statuses: Open, Closed and To-do. This is a great way to track the progress of your project. But what exactly does closing a topic mean? And when should you close a topic? What's the point of marking something as "To-do"? Well, there are no hard and fast rules on how this should work, we leave it up to the individual user. But, I'd like to take a few minutes to discuss how I've been using the statuses on internal projects at Site9/ProtoShare.

When I finish a new wireframe for a page, I create a topic to announce there is something new to review. Then I sit back and watch as new topics and comments trickle in from the other members of the ProtoShare team.

Once the topic has been thoroughly discussed, and the team has reached a conclusion, I do one of two things. If there is no action to be taken, I'll mark the topic as "Closed". But if there is an action associated with a topic, I'll mark it as "To-do".

There's a very handy way to see how many "To-do's" you have on the project. Just click on the Site Map tab in Review, and use the "View Topics" dropdown box to display the number of Closed, Open, or To-do topics on each page. A tip: it's a good idea to assign a status to all your topics at some point, or the "View Topics" display isn't that effective - especially if every ticket is marked as "Open". Learned that one the hard way.

When I, or someone on the team, takes care of the action associated with a To-do topic, I go back into ProtoShare and close it. Once every topic is closed on a page, we consider that page "done" and are ready to move onto the next step of the project - which is usually creating and posting comps. Then we start the process all over again with the comps.

We've found this method saves us a great deal of time on new projects. When we can't resolve everything in ProtoShare, we call an actual meeting. It's almost become a novelty. But if we do have a meeting, they take less time and are more efficient because everyone is already informed of opinions. Again, this is just my way of doing it. I'm sure you will find your own ProtoShare path to success.

I love templates. I use them all the time. I'm one of those people who likes to find the most efficient way of working - I hate to rebuild or retype things. Templates are perfect for this. Build a page once and reuse it over and over - and still have the ability to make changes to the templates on individual pages. Sheer bliss. 

But they can get a little confusing, because there are so many options. To get started, check out the few basic Example Templates on ProtoShare by clicking on Manage in the main navigation and then selecting Templates. You'll see example templates for Home, About Us, News, Our Products and Blog. All there for you to use and abuse. They can be a good starting point if you're building a wireframe for the first time, so apply one to a page and go to town.

Here are some of the wonderful things you can do with templates:

• Apply templates to any number of pages and use them as they are - or modify them to meet your needs.
• Duplicate a template and make changes to the new one and keep the original pristine.
• Detach your page from the template, if you want to change the template on just one page  
• Create your own templates from scratch or save an already-made page as a template. 
• Save any page or template as a wrapping template. 

Wrapping templates are where it gets really good. All of the example templates employ a wrapping template, if you want to see one in action. A wrapping template is where you put your global content, the stuff you want on every page. For example, a header and footer. You'll probably want your logo and navigation and maybe a main graphic on every page. If you use a wrapping template, you'll only have to build it once. Ok, get ready for this one: you can even have wrapping templates with wrapping templates - if you want certain sub-pages to have a side navigation, for example. You'll soon find that wrapping templates are very powerful and a great time-saver. You can read all about templates and wrapping templates in the Help document.

Note: If you delete any of the example templates or wrappers, like the dodo, they are gone for good.