Review: The best wireframing tool yet?

When there are so many wireframe tools that help plan your website, finding the right one can be challenging. However, I think I have found a real gem.

Maybe your wireframe needs to be more interactive. Maybe you just want it to look more impressive for the client. Whatever the case, there are no shortage of tools that will do the job.

From web apps like Balsamiq and Mockingbird to desktop software like Omnigraffle or even Powerpoint, there is no shortage of ways to wireframe.

Each have their pros and cons but all seem to fall down in one fundamental way – It is hard to share your wireframes with the client. For example Mockingbird is a great wireframing tool, but clients who use IE cannot view them. Balsamiq suffers from a similar problem where wireframes can only be shown as images.

Balsamiq

These tools are all great for internal development. However, as a communication tool with the client they fail miserably.

However, while at SXSW I ran into a chap who has built a tool that overcomes this problem. The app is called Flairbuilder.

Present your wireframes to clients with ease

Like Balsamiq, Flairbuilder is an Adobe Air application. This means it is cross platform unlike many of my previous software recommendations.

Building in Flairbuilder is similar to other wireframing tool. It is quick, easy and fairly intuitive.

Flairbuilder

Things get interesting when you have finished and want to show the client. At this point you have a couple of options.

You can email the saved file to the client and tell them to open it using the Flairbuilder online viewer.

Flairbuilder free view application

Alternatively you can upload the finished wireframe to your own server and send the client a URL which automatically loads that file into the viewer. e.g.

http://www.flairbuilder.com/viewer/?url=http://www.boagworld.com/sample.fbp

Because the viewer is built in flash it is accessible to anybody with the plugin and provides a consistent viewing experience independent of browser or operating system.

However it isn’t just Flairbuilder’s sharing capabilities that makes it so good. It is also the functionality of the application itself.

Everything you would expect and more

Flairbuilder does everything you would expect from a wireframing application. You can add, edit and remove pages. You can insert boxes, text, form elements and other screen objects. These can be dragged around the page and edited to your hearts content.

However, Flairbuilder is not designed primarily as a static wireframing tool. It is designed as a powerful prototyping application. Elements are not static. You can add events to them in order to make them interactive.

We are not just talking about linking pages together either. In Flairbuilder it is possible to…

  • Show and hide elements
  • Display popup windows
  • Create carousels and slideshows
  • Build working tabs
  • Insert usable accordions

The list goes on.

In short Flairbuilder is the most powerful wireframing tool I have yet to encounter.

A reasonable price

What makes it even more amazing is the price. Admittedly it cannot compete with Mockingbird which is currently free. However, for the additional functionality you get over something like Balsamiq (priced at $79) the $99 price tag seems very reasonable.

Any drawbacks?

With me heaping all of this praise on Flairbuilder you might be under the impression I am being paid for this review. I am not. The creator did give me a free copy, but he did so without ever asking for anything in return. The reason I am writing this review is because I am honestly impressed with the product.

However, it does have one drawback. It can become slow when dealing with large wireframes. When you start adding in a lot of imagery (not something one often does with wireframes) it seems to slow the whole system down considerably. This can prove very frustrating at times.

An image heavy wireframe

That said, a recent update seems to have gone some way to improving the problem and I am sure more updates will follow shortly.

Finally, if I was being super picky I would say the application has a small learning curve when you start. This is hardly surprising with so much power under the hood. However, this could prove problematic if you are new to such tools.

Do I recommend Flairbuilder?

So do I recommend this application? Absolutely. At least, I do if you want a tool that can build complex wireframes and prototypes that need to be viewed by a wide range of people.

If on the other hand you just need something simple for your own reference then a free product like Mockingbird maybe the way to go.

Reviews: Noded and Support Details

This week we have two reviews for the price of one. First we review the freelancing book ‘Noded’ and then take a look at a useful web application called ‘Support Details’.

Noded – The Untouchable

Hello, my name is James Callaghan. I’m an in-house web designer and developer / generalist working for Marshall Aerospace at the Airport in Cambridge and also work freelance.

Before I start, do you know what a Noded Team is?

The entire book, all eighty six pages of the book, attempt to explain what Noded is. During the first few chapters it attempts to cover definitions and examples, which I found a little hard to take in. It took me a few attempts to learn what Noded is, reading a few pages again and again.

With what Noded was vaguely drilled into my head, continuing on, the book focuses on freelancing with tips and advice on many maters such as setting up a business, planning things to managing time. This was of huge interest to me and the book became slightly easier to read.

Though out the book Andreas and Jaan describe their methods and tips on various subjects relating to Noded Working and Freelancing.

Noded Website

One section I did enjoy to read was “A space to work” that explains how important it is to find the right place to work. “As a web worker you can work from any place you fancy – a library, coffee shop, or park bench”.

Most of the time however, it’s nice to have a more personal place to work from.” I’m under the same opinion as Andreas and Jaan – “crappy office, crappy output”, “inspiring office, nice quality output”.

A subject that makes me very sore with my recent data loss that I can say I already adhere to is the tools for the game and why you should use the cloud over your hard drive. With explanations how applications force you to use their logic and structure and therefore are really tiresome and in the end the application is abandoned; instead suggests using cloud based web-apps that are far more flexible and forgiving, examples include: Email, Calendars, Get Things Done (GTD), Project Management, Synced Files, RSS Feeds.

On a more back office subject the book explains why working an 8 hour day is dead to tips on how to break away from the traditional meeting.

I take the same approach as the book, my ideas and creativity cannot materialise on command. They come at the most in-convenient times when I’m not working such as in the show, out on a ride on my bike or whilst out walking my dog. The book suggests using a tool and allowing people to contribute in advance of the meeting, following up with a simple 15 minute meeting to make a decision on the project or simply brief everyone involved.

An idea I am looking forward trialling in the real life! “The 8 hour workday is dead. We don’t believe that being

“being at work” for 8 hours accomplishes more than working for 4 hours, 2 days or 5 minutes. Work is about accomplishments, not measuring time. It is about being effective versus being efficient – doing your job faster and better versus simply doing more work”.

Not sure how to approach my manager on this one though, it is all about the hours here but way to think of it is:

“when you buy a music track that you really like, does it matter whether the artist spent two hours or two months writing the song? Probably not. Does a bowl of pasta taste better if the chef spent more time on it than if he spent the right amount of time on it? Probably not.”

In short, the book has really given me some great tips and methods as to how I should approach my freelance work but also provided me with some great ideas how to handle projects and work within the organisation I work in.

As I read through the book I found myself wanting to know more about something that had be written so instead of getting distracted whilst reading the book, I created a “list” of the pages with references and URLs I wanted to know more about.

The question I asked before reviewing the book was:

“do you know what a Noded Team is?”

If you answered at all, I suggest grabbing a copy of this book and truly discovering what Noded is all about. If you didn’t here is a dictionary definition included in the book.

“Noded Network, a Node Team. A group of individuals, often but not necessarily geographically far apart, that come together to form temporary or recurring project teams. Unlike ‘distributed teams’ Noded teams work for a wide range of clients and any member of a Noded team can take the lead to bring in work, manage work and choose their team members.”

Lastly I would like to say that I have really enjoyed reviewing this book and would like to take a moment to thank Paul and the team for producing such a great podcast but also to Ryan for his time and patience with me as it has taken me quite some time to produce this review. I’ve had to teach my brain how to read again, but also how to write a review that makes sense.

Support Details

My name is Nora Brown; I wanted to let you and Boagworld listeners know about a really handy site I’ve come across. I’m a freelance web designer who does a lot of sites for writers, artists, and small business owners – not necessarily the most tech-savvy folks. Sometimes they don’t even know that they’re using a browser, much less what specific version of IE they might be using.

So to help diagnose problems, I direct them to www.supportdetails.com. From this website, they can simply email you, and it sends you all the details of their browsing environment. You can even give them a link with your email address pre-filled in. An added bonus is that it includes their IP address, so you can create a filter in Google Analytics to exclude their own site visits from their stats.

Support Details website

Again, that’s supportdetails.com. I hope you find it useful.

Reach a point of zen in your code

Zen Coding is set of plugins for various text editors that enable you to code much faster than you normally do.

My name is Ezequiel Bruni, and I’m a Canadian designer based in Mexico.

I just wanted to let you all know about a tool which is pretty awesome (and will make your life easier).

Zen Coding is set of plugins for various text editors that enable you to code much faster than I bet you normally do.

For example, let’s say you want a div, with a heading, and three paragraphs inside. In each paragraph element, you want a span element as well. Each element needs classes and ids, you get the picture. It’s tedious, even with copy and paste.

What if I told you that you could do all of that with just one line of code? Sound interesting?

Zen coding allows you to do that, and it’s pretty darn awesome.


To see how it works, go to http://code.google.com/p/zen-coding/

Zen Coding supports:

And there is partial support for:

I’ve personally tried the Aptana plugin, as well as the gedit plugin on Linux, and I’ve gotta say, it’s beautiful. The way I code is certain to change, and I recommend Zen Coding to anyone who does a lot of HTML/CSS development.

I hope you check it out, it’s awesome.

Why you will regret using Vimeo.

You better watch out, you better not cry, you better not pout, I’m telling you why… vimeo will ban you.

I was sitting enjoying some mulled wine and a mince pie when my iphone beeps with an incoming email. I debate as to whether I should check it. After all I am on holiday. Surely it could wait. However being the workaholic, I had to check.

Bloody good job I did.

The email read as follows:

We see that you are using Vimeo for uploading commercial content.

We’re sorry, but as stated in our Terms and Conditions of Use, on
our Community Guidelines page, and on the upload page itself, Vimeo is for noncommercial use only, and we cannot host this content for you. Please take 24 hours to move your videos to another hosting service.

My immediate reaction was disbelief. After all I had read their guidelines which state:

You may not upload commercials, infomercials, or demos that actively sell or promote a product or service.

I didn’t believe any of my videos fell into this category.

My second reaction was ‘crap I only have 24 hours to sort this out. There goes my relaxing evening’.

Update: I have since been able to negotiate a week to sort out my hosting.

I quickly fired off an email asking for clarification:

Could you please clarify which video you feel breaches your terms and conditions.

After a reluctance to make it clear which videos were the problem, they finally came back with this list. (note I am in the process of moving these videos elsewhere).

Now I could possibly understand their position over the ecommerce sales post. Although it was intended to demonstrate good practice in ecommerce, it could be seen as a case study and so a sales tool.

However, the other three include a review for a firefox plugin and two that provides marketing and sales advice.

Excluding any talk of commercial products

Apparently Vimeo does not just wish to exclude content that is commercial in nature. They also wish to exclude content that relates to commercial subjects.

My understanding is that Vimeo are excluding:

  • Reviews of commercial products (even by third parties)
  • Advice that could be applied to a commercial organisation even if it could equally be applied to a not-for-profit.

However, them blocking 4 videos was the least of my problems.

The most insane bit of all! No player if you have ads

But that is not the end of the story. They also ban the use of their player on any website that includes an ad of any kind (even Google Adwords).

Their guidelines state:

You may not upload videos containing ads before or after the video, unless given prior written permission from an authorized member of the Vimeo staff. Videos with any advertisements in them, including links to commercial sites, regardless of content, will be removed.

My videos do not contain ads. However, the site does and that seemed to be enough.

This means that although they are only deleting the four videos above, I cannot even embed a video from Vimeo because I have ads.

Here is what Vimeo wrote to me:

Vimeo players cannot appear on domains running ads, its a decision we made in the beginning and have been going back and forth with allowing or disallowing it, but so far we cannot allow it unless it is with one of our partners. What keeps Vimeo different is it’s content enforcement, which in turn helps foster a nice and caring community.

Let me be clear. I am not just talking about videos I create myself but any video produced by anyone. If you create a great video and host it on Vimeo, I cannot feature it on Boagworld without breaking their terms and conditions.

Surely this is insanity!

A hit and miss affair

It would seem these problems are widespread. When I tweeted about the email from Vimeo Paul Annett referred me to this post he made in the vimeo forum.

In the post he points out that Vimeo seem to quietly ignore high profile websites that break their guidelines. He also asks Vimeo to clarify their position on commercial content.

Vimeo replied with this gem:

The content policy on commerciality is largely based on intent. We ask our users to ask themselves this question: “are you uploading these videos to make a profit?” if the answer is yes, then it most likely won’t be allowed on vimeo.

You really can’t get a lot more wooly than that. I was certainly surprised to discover my content was consider commercial as I did not see it that way myself (and still don’t). Ultimately what matters is what Vimeo thinks not what I believe. And the statement above certainly makes it no clearer how they judge.

Throwing away money

What astounds me about this is that I am paying client of Vimeo. Obviously, I will now be cancelling my account. However, if they had offered me a business account then I would have taken it. I would have gladly paid to avoid the hassle of moving all of my videos.

However, Vimeo seemed more than happy to lose my business and actively ignored any appeals to ‘come to an arrangement over payment’.

A final kick in the teeth

After becoming increasingly frustrated by the email correspondence with Vimeo I eventually decided to download all of my videos and host them elsewhere.

Unfortunately I discovered that several of the videos were impossible to download. I asked for help and was informed that this was a known bug. However, they had no intention of holding off blocking my website from playing Vimeo videos.

Fortunately I had backups of all but one of the problematic videos. However, that isn’t really the point!

The bottom line

So the bottom line is this. Don’t host with Vimeo whatever your content. You cannot guarantee how it will be perceived by Vimeo and if they do take exception to it, there is no upgrade path.

Read what lessons can be learnt from my experiences with Vimeo