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:
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.
The Public Void 