Quplo’s “Redesign a Website” Feature

Last month I evaluated a preview of a new Web prototyping tool called Quplo and wrote about it here.  Since that time, Quplo beta has gone live, and the development team has added several new features and bug fixes.  Perhaps the most significant of these is a feature they call “redesign a website”, which imports external HTML from a URL, cleans it, and creates a new sheet.  This gives designers an alternative way to create prototypes, and comes in handy when clients have an existing Website they want tweaked.

To test Quplo’s redesign capability, I chose the GNU Compiler Collection Web site, because it’s simple and contains mostly text.  Importing the main page was quick and painless.  Quplo created a sheet called “Redesign” with the HTML.  The following message was inserted at the top:

<!-- This page contains the HTML from http://gcc.gnu.org/
 We've added a <base href=...> element to the <head> section.
 CSS and images below it will load from the original site.
 Put your custom CSS above it to mockup the site. -->

What this means is that resources like CSS files and images are not imported with the site’s markup.  They are requested from the server of the original site when you view your mockup.  Slightly further down the sheet is a comment that denotes the cutoff point for your new CSS.  Anything above that line will override the original site’s CSS.

<page url="/">
 <html>
 <head>
 <meta content="text/html; charset=iso-8859-1" />
 <!-- Place custom CSS above this line. -->
 ...

After the import, it’s time to start making changes.  First, I decided to alter the menu headers on the right-hand side.  Instead of a thin, dark border, I wanted a dark background color.  I added my custom CSS link above the cutoff line.

<page url="/">
 <html>
 <head>
 <meta content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" type="text/css" href="custom.css" />
 <!-- Place custom CSS above this line. -->
 ...

Then I added a new sheet called CustomCSS with the overriding style.

<page url="/custom.css">
td.td_title {
 border-style: none;
 color: #3366cc;
 background-color: #d2d2d9;
 font-weight: bold;
}
</page>

The next thing I did was add a splash of color to the News and Status sections by adding the background-color attribute to the existing inline styles.  I also changed the padding to create an even border of color around the text.

<td style="width: 50%; padding: 8px; background-color: #20b0f0;" valign="top">
<td style="width: 50%; padding: 12px; border-left: #3366cc thin solid; background-color: #f0b020;" valign="top">

Finally, I moved the GCC logo from the right-hand side to the left by removing the deprecated align attribute and adding an inline style.

<img src="img/gccegg-65.png" alt="" style="float: left;" />

Here are the final results:

GCC Site Before
GCC Site Before
GCC Prototype After
GCC Prototype After

And there you have it.  My apologies to the GCC team and anyone with any design sense whatsoever.

While not groundbreaking, Quplo’s new Web site redesign feature is a time saver that fits within their model of designing prototypes quickly.  Give it a try if you have access to the preview, or sign up today.

GCC Website content Copyright (C) Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110, USA.

Advertisements

Test Driving the Quplo Preview

What Quplo Is

Quplo (pronounced “CUE-plo”) is a Web prototyping tool that fits in a niche somewhere between pure visual design and building your app.  It’s completely Web-based and requires no downloads, and the results can be viewed instantly.

What It’s Not

Just to be clear, Quplo is not a Balsamiq Mockups clone, nor does it try to be.  The emphasis is on interactive prototypes and not static images.  Unlike Balsamiq, Mockingbird, or Microsoft SketchFlow, Quplo has no drag-and-drop graphical designer.  At its core is a syntax-highlighting text editor that supports HTML 5, CSS, and Quplo’s own built-in language.  Quplo complements, rather than competes with, wireframe drawing tools.

Similarly, Quplo doesn’t generate wireframes in the rough, handwritten style commonly seen in prototyping.  As such, it does nothing to protect you from the false perception of completeness that customers and nontechnical managers may have when viewing your prototypes — you’ll have to deal with that yourself.  On the other hand, it gives you complete control over your prototype’s interface and behavior.

User Interface

The UI is intentionally sparse, with little more than the editor itself on the left and a syntax reference list on the right.  One nice touch is that the editor can be expanded to fill the browser window, which maximizes screen real estate when writing markup.  Presentation is clean and easy on the eyes, with soft-looking gradients throughout the site.

Quplo user interface

Compatibility and Performance

I tested Quplo in Firefox 3.6.3 on Windows 7 and XP.  Performance was good in both operating systems.  I did notice a bit of choppiness scrolling in the text editor at times, but it had no effect on the overall experience.

When I attempted to view the site in Internet Explorer, I got a rather humorous surprise:

Quplo in IE

I’m certainly no IE fan, but I’m not sure how I feel about this.  At least it fails gracefully.

Update:  Martin Kool from Quplo commented to explain the rationale behind not supporting IE at this stage, and that it will be supported before they go live.

Rich Editing Functionality

The online editor is slick and carefully tailored for editing markup.  Line numbers are shown by default.  Syntax highlighting and auto-completion are fast and don’t interfere with typing.

Quplo’s Built-In Language

Quplo supports a tag-based language that’s an unusual hybrid of declarative tags and imperative actions.  It offers simple functionality like looping, variables, and conditionals, but perhaps more importantly, it also lets you reuse sections of markup with a templating system consisting of “layouts” and “parts”.

Subscription Model

Quplo is available on a monthly subscription basis under a number of plans.  Plans vary in storage space, maximum number of users, number of prototypes, and several other bullet-point features.  Daily backups and export capability are part of each plan.  Closing your account deletes your prototypes, so make sure to export copies if you decide to end your subscription.

Support

The people at Quplo are extremely helpful and responsive when it comes to questions, and they’re active on Twitter, email, and their own blog.

Conclusion

Quplo is a promising new prototyping tool that’s currently in beta.  While most of the functionality could probably be substituted with a combination of other tools (offline text editor, JavaScript, server- or client-side includes, Google docs, etc.), Quplo distills everything you need to build interactive prototypes into a single, easy-to-use online service.  I’m considering integrating Quplo into my design workflow for my next project, and I look forward to the initial release.