Sep 9, 2010

Website Wireframing Within the Browser: Good or Bad Thing?

I recently found an interesting bookmarklet while reading one of my favorite tech junkie blogs—Liquid Page, a tool that allows you to re-design web pages within your browser.  Apparently the idea for this tool came to the developer because he wanted a way to preview different layout change on his website without having to actually code them first (a live website wireframing tool)…the Liquid Page bookmarklet came to life.

Not being a designer nor a web developer, my first thought was that this would be really cool to use and test different layouts without having to ask the designers I work with to take time out “just to see what it would look like.”  We were working on our latest homepage design so I decided to test it out and then emailed the rest of the marketing team to get their opinions and wow… did I receive some mixed responses.


Greg Pabst, Web Designer and Developer
I, personally, am against giving users the ability to rearrange a site the way they want.  The team behind a website, including the designer, has a website laid out a particular way for a reason.  Rearranging the components of a website breaks the eye path and intended usability of the site.

Tony Snyder, Web Developer
As a web developer, I see a lot of value in this tool in design/layout arena. I often find myself thinking the same things the author of the tool, Alex Schreyer, does when it comes to testing different layouts. It would be really nice if I could do the testing without much coding, because I usually need to implement design changes before I decide if I like them. With this tool I can move nearly any part of the web page around without having to tweak a bunch of markup/css. This way I’m not wasting time trying different versions of markup/css and can focus on implementing the one design I like best.

Bryan Ansley, Web Designer II
Coming from a web designer that deals with html/css and the presentation of websites… I think this could work to a point. If limitations are put into place where the liquid layout is designated for preset modular areas that fit in with the layout of the site, then this may work. (Good example is iGoogle with its modular boxes.) Otherwise I think you’re giving complete control to your users to manipulate your site and completely tear down the consistency and usability that has been put into place to help the user, not cripple them.

Maureen Griffith, Corporate Writer
I see the value in it as a cost-efficient, easy way to TEST designs. I would think some designers might value it for its ease of use in rearranging elements with a simple click and drag and as a way to quickly present new layouts for web pages. For those people who are not designers, and who have a challenging time visualizing something, this would be a fast way to shuffle design elements around and see how they look in a new arrangement. It would be a more economical way for business owners to test out visual ideas on a website without having to pay for design changes that might require changing code. I would think it would be useful in instances where you might have to convince others of such things as “that logo looks best half its size and in the left corner, instead of the right” because you would not have to do a ton of upfront design/coding to prove your point.

Sara Newkirk, Marketing Coordinator
In working with the design team to implement projects, I could see how a bookmarklet, such as Liquid Page, could save time in testing how the rearrangement of content on a webpage would affect the eye path and usability of a site. My largest concern comes from the fact that most websites are not comprised of equally sized modules that would allow for easy shuffling.  Additionally, the tool does not allow for resizing up or down – so you are restricted to the size constraints of the original elements.  Overall, it gives you a good idea of how rearranging content would impact the site design/flow, but in reality I don’t know how functional it would be in making design decisions.

– – – – – – – – – – –

I can definitely see where everyone is coming from. I certainly wouldn’t want users to be moving around my website eye-paths that I took so much time to create to ensure the best conversion rate.  But if used for its purpose, I think Liquid Page has its place.  Below is a video of the developer demonstrating its capabilities.

You can download the bookmarklet here.  Tell me what you think.

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn
  • This would’ve been really handy when we were redesigning our website a few months ago. Instead of three days of back-and-forth with our designer just to get one element changed to our liking, we could have used this tool, taken a screenshot, and gotten the point across in three minutes. Definitely one for the bookmarks bar!

    • Shelby Garlock

      Efficiency is definitely something it could provide in the design process. But do you want the users of your website to be able to move elements around after all your hard work in the design and implementation?

  • Since the changes aren’t permanent, I don’t see the harm. In fact, it might even be a good thing. If even just a few enterprising users take the initiative to modify the site to their liking and then submit a screenshot to you, you’re likely to get some really interesting ideas for design, eyepath, and usability that you otherwise might not have considered.