The introduction of a completely new design can be aggravating for existing users, particularly when features that they’ve taken the time to learn are suddenly relocated, or removed altogether.

To avoid disorienting users, we reused the existing site format while updating the visual design and improving elements such as spacing and contrast. This way, Reason’s readers benefit from the enhanced features made possible by the new publishing system, without the inconvenience of relearning how to use the site.

For example, Reason, like many other websites, structures content with a static three column layout. The left hand column is dedicated to navigational links, masthead information and advertising. The center column contains the featured content well and links to categorized content, and the right column promotes additional highlighted content, with space for advertising.

The old version of the site was well organized with plenty of white space, but the design was flat and lacked visual interest and depth. The new design is more appealing, has a more natural visual hierarchy, and does a better job of keeping content separated without feeling unnecessarily boxy.

We sent over two design variations, making sure to reuse their currently branded blue whenever possible. Their feedback follows…

“Can I see this with a completely different color scheme?”

Hearing this might make a designer cringe, but it’s very important to make sure the client is happy.  Fortunately, the project was still in the early stages, so alterations were relatively easy to make.

After a brief consultation, we agreed to work on some new variations while keeping within the same basic palette. This would mean shifting the use of color around while adding shades and tints to create more variety. This type of consultation helps keep everyone happy by taking the middle ground. We aren’t creating designs with wildly conflicting colors, and the client doesn’t have to hear a flat out refusal on our end.

We submitted the above mockups, two of which rotated color usage in sections like the highlight column (bottom right corner), and one of which used a monochromatic scheme (third mockup from the left).

When only one color is used for a design, the overall feel can often be flat or what I’d consider “overly emotional”. A design that only uses red can make you feel too hectic or heated without a cool compliment for balance. Similarly, a design that only uses blue would make you feel too serious or cold without warm oranges or reds. When it came time to show our client the revisions, we made sure to bring this up as a possible issue.

In the end, they went with the primarily orange/gold design, giving the site a bright and light feeling while still leaving room to use the complimenting blue for their logo and headings.

Here is the map.

The benefit of using HTML, CSS and Javascript instead of Flash, is that the map will function in just about any browser without having to install additional components. Mobile browsers such as Safari on iPhone, older browsers, or browsers without Javascript enabled, can still use the map. Here is how it works.

The map consists of three layers.

The bottom layer contains the full map as a background image. This loads when the page is opened, along with the top layer which contains the maparea linked to a transparent GIF that matches the size of the map. The layers are positioned over one another with CSS.

div#usmap{
position: absolute;
top: 0px;
left: 0px;
}

div#mapareas{
position: absolute;
top: 0px;
left: 0px;
z-index: 99;
}

The middle layer is where all of the animation takes place. When a user mouses over one of the mapareas, jQuery prepends the preloaded image for an individual state and positions it in the middle layer. Some images also have a corresponding mask to maintain the illusion that the state is popping up away from the page. The individual state images were created by cutting apart the main US image, and the positioning is done with jQuery’s css method. This can be somewhat time consuming for complex maps.

$("#usmap").prepend(img);
$("#usmap").prepend(imgmask);
positionimage();

.state-copy {
position: absolute;
z-index:2;
}
.state-mask {
position: absolute;
z-index:1;
}

Then jQuery calcuates the current size and zoomed size, and executes the animation.

$(".state-copy").each(function(){
var width = $(this).width();
var height = $(this).height();

var zoomheight = height * 1.2;
var zoomwidth = width * 1.2;

var	centerheight = (zoomheight - height)/2;
var	centerwidth = (zoomwidth - width)/2;

$(this).animate({
top: '-=' + centerheight,
left: '-=' + centerwidth,
width: zoomwidth,
height: zoomheight
}, 100);

});

This method will work for just about any similar image that you want to animate.

To help explain what we mean by color distribution, take a look at this little map we created using IWF.org as a base.

On occasion, we start layouts by grabbing all the content the client would like to see on the main page, making it black, and dumping it all into a new Photoshop file. Next, we make textual hierarchy changes by pumping up the weight and size for headings and subheadings. After some spacing and alignment changes its ready, but start collecting color only after these steps have been completed

First, we establish any existing colors which will need to be incorporated into our palette due to existing branding. In the example using IWF.org, the red from the logo needed to be added.

We needed to pay attention to an additional client request, which was that we keep the site feeling open and bright. Yellow or yellow used as a gradient is good for this.

You can add two colors to the palette by choosing one with a rich hue (aka saturation), in this case blue, then branch off by grabbing a tint of the same hue.

We also always grab something fairly neutral to use as borders, or for headings and backgrounds which require less emphasis than areas with brighter hues. For IWF.org, we chose a medium gray that is used on all borders and dividing lines.

Now the color palette is ready. Most, if not all of your color usage will be dictated by the palette. You can deviate, but only by shifting the base hue with shades and tints. Start by identifying which elements should use the same color. For example, all links within the main content area need the same color. All first-level headings need the same color as well.

Now you can experiment by using the colors in your palette in these positions. Any colors that are too light can be used for text as long as there is a background behind it with good color contrast to make everything readable.

Remember to use white as a color as well, not just for backgrounds. Any of the colors in your palette can be used for a background, which means any text on top of it can be white (depending on readability).

Since The American Spectator has been around for 1967, keeping the established identity was an important part of the design process. We retained their look by re-using the existing color palette and by keeping the established logo simple in a basic white on red header. Further distributing the red, we threw it into the date-bars, content category headings, third column headings, and buttons. Using the black in the large featured post area serves as the focal point, drawing the eye with an over-sized image and further distributing color. We continued this with the bold black post headings and the background for the active state of the nav list in the right column.

We were also tasked with keeping a good chunk of the content available on the main page without a ton of scrolling. To accomplish this, we kept the spacing between posts on the homepage to a minimum. This expands of course when you click through to read the full article. To create visual separation of content, we used thin borders on the bottom of each post and kept the article headings big compared to the accompanying text.

Along with the re-design, this site has been built on a newly built backend framework which allows for much greater content control by the editors. Additions to the backend are super simple now as well, so any client changes/requests can be managed quickly and efficiently.

We began by creating several mockups in Photoshop, utilizing some existing media to develop cohesive looking examples. With these, they were able to give us great feedback, helping to push the designs forward and moving closer to a design which met their needs.

A few color tweaks, a section or two added to the right column and the design was complete. Reliably serving up high quality video to a potentially massive visitor base was crucial, so we went with the Amazon S3 grid for this. So far this has been the perfect solution as well as an inexpensive one.

Currently, we are re-working the center column a bit to allow for smoother work flow, but the same basic feel will be retained.

Some notes for the CSS geeks

Notice how the text changes color on hover for the “send us your videos” and “Drew Carey Project Archive” areas in the right column? This was accomplished by using an <a> which has this image applied to it using the background declaration. There’s a :hover state for the <a> which shifts the background image up by sixty eight pixels.

Some earlier concepts:

Dancing Mammoth implemented blogs, wikis, speed tests, comments, real time graphs and carrier data into Broadbandcensus.com and designed the clearinghouse Clark imagined.

The first step in the creation of the site involved gathering data for the “What are your broadband internet options?” function. Dancing Mammoth collected data from the FCC and maps from the U.S. postal service. Data was also gathered from individual carriers websites, this data is usually buried deep in the sites, or worse yet, involved some programming knowledge to scrape the data from the sites. We did the scraping and we did the hours of manipulating data to create a tool where users could search their market by zip code.

The website also continues to learn about broadband markets by surveying its users about location, carrier, promised speeds, and an individual’s rating of his service through a census. The survey data, in combination with the search function previously mentioned, a user can automatically correlate carriers to specific zip codes, along with promised speeds and any comments about that location and carrier.

The second part of the census involves a speed test. Broadbandcensus.com has worked closely with Internet2 and Virginia Tech to implement a modified Java-based NDT (Network Diagnostics Tool) client.

Based on the location provided by the user in the census, the site calculates the closest online NDT server accepting connections. The speed test takes approximately 30 seconds and roughly 50 data points are collected during this time, which measure everything from total speed to where bottlenecks in the network are occurring. Once this data is collected it allows the site to display real time percentages of user ratings and percentage of users getting their promised speeds. This is crucial when trying to find the right (only) carrier in your market and makes it a great research tool for consumers.

Broadbandcensus.com is now a publicly available resource that provides real data to consumers about broadband in the U.S. and facilitates consumer research and competition in the broadband carrier sector.

Technologies:

• Custom ORM Framework written in PHP/MySQL
• Java
• Javascript
• Wordpress
• custom wiki software

Data:

• 37,000 zipcodes
• 30,000 Federal datapoints
• 95,000 relationships
• 110,000 objects
• 1500 providers (and growing)

The Requirements:

• Visitors will be added to a Virtual Waiting Room prior to advancing to website content.
• Visitors will be advanced according to First In First Out.
• Page must indicate current position in line via a client provided Flash object.
• An administrator must be able to control flow of traffic.

The client expected light traffic to their video chat feature, so we decided that capturing queue data in a single table was the most efficient way to go. We could then poll at a some set interval to determine a visitor’s place in line, and take action based on the result.

The client-provided Flash object required use of a bit of javascript, so I decided to go ahead and implement the polling with the jQuery library’s ajax functionality — I ♥ jQuery. Here’s what the javascript function looks like:

function updatePosition()
{
	$.ajax({
		type: "GET",
		url: "queue/index.php",
		data: "sess=<?php echo $session_id ?>&random=" + new Date().getTime(),
		dataType: "xml",
		success: function(xml){
			var ky = "";
			var val = "";
			var action = "";
			var pos = 0;
			$("response", xml).each(function(){
				$("action", this).each(function(){
					action = $("key", this).text();
					val = $("value", this).text();
					if(action == "forward")
					{
						// Forward
						forwardToUrl(val);
					}else{
						//Update
						pos = val;
						thisMovie('queueCountdown').update(pos);
					}
				});
			});
		}
	});
}

If you’d like to review all the sample files, you can download them here, but no warranty is expressed or implied.

jQuery sends the visitor’s session id (as well as a random string — always send a random string when making ajax GET calls or IE will give you cached content) to a script that checks the queue and returns some XML with the action and associate value. Then the visitor is either forward to the content, or their position in line is displayed.

On the back end, the VirtualWaitingRoom class provides functionality to retrieve queue position, administratively advance visitors through the queue, and remove records for abandoned sessions.

The project was a success and while there’s nothing especially complex about it, this Virtual Waiting Room is a good short example of how various web technologies can come together to provide a unique solution.