Summary: How to use jsFiddle for building wireframes and rapid prototyping.
Recently, I needed to build
interactive prototypes of a web form. I do not own a license of a professional prototyping tool (like
Balsamiq,
HotGloo,
UXPin), so I tired several
free online options (namely,
iPLOTZ,
concept.ly,
MockFlow) and appreciated the ease of drag-and-drop; however, making these prototypes
respond to interactive events (mouse clicks, selection changes, etc) turned into a
hassle.
I also tried a couple of
desktop options, but had even
less luck with
Pencil (couldn't figure out how to make a combo box display multiple entries), Visio 2013 (
"Where is the combo box, Lebowski?"), and Blend for Visual Studio 2013 (
"You're entering the world of pain!").
I was entertaining an idea of using animations in PowerPoint, when it struck me:
Why not use jsFiddle?
If, after reading the previous sentence, the first question that popped into your mind was "What the heck is jsFiddle?", you may not realize that
saying "What the heck!" is really worse than saying "What the hell!". But nonetheless, for those just coming out of a coma:
jsFiddle is a free web-based tool that allows you to quickly test HTML/JavaScript/CSS. But wait, there's more!
Here is what a jsFiddle screen looks like:
You enter HTML, CSS, and JavaScript code into the corresponding panels, click the
Run button, and see the result of your work in the window appropriately named
Result. It's that simple.
Let's summarize what
jsFiddle has to offer:
- It's free (as in "it ain't cost sh*t").
- It's web-based (no crap to install).
- It's not using Adobe Flash, like most other online prototypes do (they still do, don't they?).
- It uses HTML, CSS and JavaScript (you already know these, right?).
- It uses a standard web programming model (no need to learn proprietary controls).
- It supports pretty much every popular JavaScript/CSS framework (yay to jQuery! yay to Bootstrap!).
- It can incorporate any custom JavaScript/CSS framework (assuming it has a public URL).
- It keeps versions of your changes (version control by default).
- You can send a URL of your prototype for a review or do a live demo (with some quirks, though).
- You can collaborate with others on a prototype (although, I haven't tried).
The bottom line is that using jsFiddle, you can
quickly build a
prototype and implement the functionality that is only constrained by the limitations of the same technologies your applications uses (JavaScript, CSS, HTML). In the other words, there are no practical constraints. It's almost too good to be true. Why haven't I thought about it before?
Anyway, if you want to build a wireframe or a quick prototype using
jsFiddle, do the following:
- Create an account (if you don't have one).
- Log in and open the editor.
- While in the editor, under the Fiddle Meta section on the left side, enter the title and description of your prototype (wireframe). If you do not want to make it public (discoverable via search), leave the title field blank.
- Add your HTML, CSS, JavaScript.
- Click the Run menu option to preview the functionality.
- When you are happy with the result, click the Save (or Update) menu button to keep the changes.
- The public link to the fiddle can be found in the Embed Code section of the Embed screen (to open the Embed screen, click the Embed menu option).
If you close jsFiddle and come back, you will find your fiddles in the
dashboard (to access the dashboard link from the editor, click your account name in the top right corner of the page). The dashboard shows your public and private fiddles (proper descriptions will make it easier for you to locate private fiddles):
Now, a bit of
jsFiddlespeak, if you do not mind.
Visibility: You may have noticed somewhat non-traditional use of the term
public. As I mentioned above,
public means that a fiddle can be found via a search, and
non-public means that to access a fiddle, someone must know the fiddle's URL (non-public fiddles are still open to public).
Baseline: Every time you save a fiddle (via the Save or Update menu option), jsFiddle will create and retain a new version. You can access a specific version of the fiddle by appending the version number to the fiddle's URL. For example, assume that your jsFiddle profile name is
jdoe and you make 13 changes to a fiddle with ID
qdn9f737, the URLs of the version history will look like these:
https://jsfiddle.net/jdoe/qdn9f737/1/
https://jsfiddle.net/jdoe/qdn9f737/2/
https://jsfiddle.net/jdoe/qdn9f737/3/
...
https://jsfiddle.net/jdoe/qdn9f737/12/
https://jsfiddle.net/jdoe/qdn9f737/13/
The non-versioned URL will correspond to whichever version you
set as base (the first version by default) and will look like this:
https://jsfiddle.net/jdoe/qdn9f737/
You can define any version as base by opening this version in the editor and clicking the
Set as base menu option (in certain cases, you may need to save the version first).
Finally, a few tips to help you get most out of jsFiddle (these are mostly notes to self, but others may find them handy).
Use the
gear buttons (in the right top corners of the corresponding panels) to
configure the HTML, CSS, and JavaScript
settings. In particular, you can specify the version of HTML (such as
HTML 5 or
HTML 4.0.1 Strict) to use and а JavaScript framework (such as
jQuery 2.2.3 or
AngularJS 1.4.8) to include. You can only pick one option from the
JavaScript Frameworks and Extensions list, but you can include additional dependencies as external resources.
To include an
external resource (other than the framework or extension selected in the JavaScript Frameworks and Extensions list), click the
External Resources header in the left pane of the page, paste or type in the URL of the framework file (normally, the resource's CDN address) in the
JavaScript/CSS URI field, and click the plus sign. Here are the URLs of the common CDNs:
If you want to
share your prototype, but do not want others to see the JavaScript/HTML/CSS code, uncheck the HTML, CSS, and JavaScript option under the
Tabs heading in the Embed options (notice that the source URL in the Embedded Code section ends with
embed/result/):
To make the prototype look better when viewed in the the
full screen mode, you may want to limit the maximum width of the page. Enter the code similar to this in the CSS panel:
html {
max-width: 1200px;
margin: 0 auto;
background: #eee; /* Fills the page */
position: relative; /* Fix for absolute positioning */
}
Have fun!