Yoan Blanc’s weblog

I recently started to play with Polypage (24 ways: Easier Page States for Wireframes) and quickly wanted to get more from it. I removed the toolbox and put the switches into the content itself, look at the demo.

First, if the states toolbar is useful, when I gave a wireframe made with that to a colleague, she started using that as a real page telling me: “My password doesn’t work. What do I have to do?”. Okay, let’s enable state switching from links and forms.

<a href="#logged"
   class="pp_not_logged">log in</a>,
<a href="#not_logged"
   class="pp_logged">log out</a>.

At the beginning all states are off. The state logged is off, so log in is displayed because of .pp_not_logged and log out is hidden because of .pp_logged. Clicking on #logged will toggle this state to on hiding .pp_not_logged and displaying .pp_logged.

Generally a log in process goes through a form:

<form method="GET" action="#logged">
  <input type="submit" value="Log in">
</form>

same than before, submitting that form will toggle the logged state.

I was happy with that until I needed more, a different version of the page: like a web one and a mobile one where, more or less, only the width of the body changes. Every active state is reflected in the body of the page.

body {
 width: 960px;
}
body.state_mobile {
 width:320px;
 font-size:90%;
}

With something like the log in/log out HTML, you can toggle this state but I want to show an alternative way of doing this.

<label>
 <input
  type="checkbox"
  onchange="$.polypage.setState('mobile', this.checked)">
 mobile
</label>

The drawback is that you’ll have to make sure the initial state of your checkbox is correct based on the value stored in the cookie.

And with all that, you can hide the polypage options toolbar.

$('body').polypage([],
                   {closed: true});

The main issue I see with HTML wireframes is that you don’t have the magical cursor that exists with paper prototyping. Using paper you can adapt very smoothly and quickly to any action made by the person that is testing your application.

Happy wireframing! You need (for the moment) a modified version of polypage to do what I presented here:

• polypage.tgz;
• or on github.