THAT Agency Redesigns ME Madrid

Posted on Apr 24, 2008 by Damien to Projects

THAT Agency recently updated the online presence of Sol Melia’s ME Madrid, an Experience hotel located in beautiful heart of Madrid, Spain. Full screen imagery and an intuitive navigation as well as an easy to use online booking system, ME Madrid’s new face on the web matches the hotel’s aesthetic to a tee.

ME Madrid is an extraordinary hotel and the challenge of mimicking this style was all up to THAT Agency’s capable team. Utilizing flash elements and constructed on a solid PHP platform ME Madrid wraps the user in a sensory experience to behold.

Catering to both English and Spanish, ME Madrid reaches a wide and essential demographic.

Tags: Website redesign

Word-Dredging Techniques

Posted on Apr 18, 2008 by Jonathan to Copywriting

It’s nothing privy, I just have a thing for words; and because today is National Literature Day (it’s not), I’ve filled this post with some word-relevant odds-and-ends. They’re designed to facilitate creativity, alleviate writer’s block, and inspire.

• A kettle of hawks, an army of frogs, a destruction of cats—supposedly all collective nouns. Those ones, they check out. But a vomit of goblins? A cuckpowder of bullfinches? Really? No thanks Wikipedia, I’ll pass.

• Do you ever find yourself yammering away on the phone, flying 85mph along the interstate? If someone sends you a text message while you’re driving, do you attempt to peck a response? All of that is bad—very, very bad. The same applies to using a computer for the purpose of writing something creative. There are so many distractions—MySpace, e-mail, anything Google, blogs, YouTube, Quake 3—that using your standard word-processor has the same potential of a 10-car pileup.

And so I present Dark Room. A distraction-free writing environment.

It’s simple, it consumes the entire screen, and personally, I think it really pulls off that 1980s monochrome monitor guise with impeccable panache. All exaggerations aside, it’s a swell little program and you should check it out.

• The thesaurus on my desk at work is beaten, discolored, and smells like a wet dog. Sometimes that’s just not what I’m in the mood for; there’s no way it could possibly facilitate creativity. That’s why I’m a fan of Visual Thesaurus, a service that maps the relevancy of words’ synonyms, and good ol’ Thesaurus.com, a more extensive and visually-lackluster word authority.

• High Dynamic Range Imaging (HDRI) has nothing to do with words; instead, it is a composite of techniques that has recently blown up all over the web. If you’ve somehow managed to evade this not-so-new and eerie style of photography, then HDR crème will fix that for you. I don’t like it for the same reason I don’t like 1080p televisions, because it’s uncomfortable to look at; it either too accurately represents the real world, or it fails miserably at it. Regardless, if this was 1600s Salem, I’d claim witchcraft.

Crude Copy

Posted on Apr 10, 2008 by Rick to Copywriting

A little under a year ago I took a trip up to Chicago and slept on a friend’s hardwood floor. It wasn’t a very inviting prospect; a few layers of comforter and a sofa-cushion, packed up against a brick wall of an old firehouse-turned-loft. There are no other words to describe how I felt, towering over my new bed, other than bummed. It may have been the combination of long days and even longer nights, but I have never sleep as comfortably, or as sound, as I did on that small, awkward cot.

What I gathered from the experience is that first impressions are misleading. If I had never slept on that floor for a week, I would have never known its true comfort and, instead, mocked which ever poor sap had to sleep in that misfortune.

Now, I won’t deny that I have the potential to be a dork. A fun time to me is a cup of coffee and a game of Scrabble; but when it comes to copy, particularly print ad copy, the smallest mistake sparks a figurative powder-keg within me.

Of what little I remember from that trip to Chicago, the one thing that remains as clear and as prevalent as the first time I read it, was this blunder:

Do you see it? If not, read it aloud.

Thank you is are bigger when you give our south…

(Note: Apostrophe ≠ Plural)

Copy, in fact, any printed text, can not and will not be perceived professional if it is not clear and typographically precise. It is your initial greeting, handshake, and pitch to a potential customer. If it’s sloppy, then you’re sloppy.

If I hadn’t already purchased a ticket from SouthWest, this ad would have ensured I never would, and diverted me to another airliner.

The good news is that if current airline trend stays its course, we might not have to worry about ever seeing that ad again.

Color emotional response – Part II

Posted on Apr 6, 2008 by Taylor to Web Design

Like anything else in this world, presentation means everything. There is probably nothing worse than visiting a site that not only fails to grasp this concept, but also completely throws out all the rules of design and causes an immediate ache behind your eyes. Color is everything. Color has the ability to invoke certain emotions. This means that using the wrong color—or waaaay too much color—can drive a potential customer in the wrong direction.

First, understand that color theory can be a tricky thing to get a good grasp on. You have to consider everything, from tint to hue to value and saturation and more.

Moreover, a good color emotional response has to do with all of the color on your site—the background hues, the color of your text—everything. Choose wisely when you choose a color to get the color emotional response you are looking for.

The most important tenant of color emotional response is to choose colors for your audience. You want colors that will appeal to your audience in an emotional way. For example, if you are selling flowers on your site, choose greens, reds and yellows, which are similar to the color of many flowers. If you are going with an outdoors product, then light blues, deep tans and greens would be best as these colors reflect the natural environment you are playing on for your product. This is the best reflection of color emotional response. Using color to target your audience will not only help them feel at home on your site, but will also help them to be more inclined to purchase the product or service you are touting.

Also, remember not to overdo it. While there are many people out there who enjoy working with bright, bold colors, most people don’t want to have to sit in front of these colors on their computer screen. Tone it down a bit. For example, if you want your site to reflect the strength and aggressiveness of a color like red, it’s fine to use it, but tone it down from a true red to make it a bit softer. This will save your viewer’s vision and make them want to stay on your site longer.

Tags: colors

Populating Data Without Refreshing the Page Using AJAX

Posted on Apr 4, 2008 by Jonathan to Web Development

I recently encountered a situation with a website we were working on and, yes, I know that there are hundreds of lines of code out there that do exactly what I am about to discuss, but to me, this is probably the simplest solution and could be easily configured to do what you need it to do.

What was needed you ask? Well, a simple thing really. The client wanted their request form to be a little intuitive. If their users selected an option from the dropdown that was the U.S, then show the U.S. States; if not, then show a textbox for the user to input their area, city, whatever. Granted there is no Database associated with this site, nor did they want one created. So I wrote this little piece to make it do just that.

So to begin let’s grab some stuff you need.

1. The ajax.js code. I grabbed it from here (http://clientside.cnet.com/cnet.gf/docs/files/mootools/1-11/Remote/Ajax-js.html) and add it between the tags.

2. Next, let’s add the JavaScript; also between the tags. This will do the actual work.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<script type="text/javascript">
	var handleSuccess = function(transport)
	{
		if(transport.responseText !== undefined)
		{
			document.getElementById('WHEREYOUWANTTHEINFOTOSHOW').innerHTML = transport.responseText;
		}
	}
	var handleFailure = function()
	{
		document.getElementById('WHEREYOUWANTTHEINFOTOSHOW').innerHTML = "";
		// IF YOU WANT, YOU CAN WRITE SOME HTML BETWEEN THE QUOTES TO SAY THAT THIS FAILED.
	}
	function doSomething(sel)
	{
		var request_country = sel.options[sel.selectedIndex].value;
		var sUrl = "getSubInfo.php?sub=" + request_country;
		new Ajax.Request(sUrl,
		{
			method: 'get',
			onSuccess: handleSuccess,
			onFailure: handleFailure
		});
	}
</script>

This code actually received the value of the selected option and sends that value to a php page runs through a function and the information gets returned; which in this case is either the US State drop down or a textbox.

3. Now the php page we were just talking about. As you can see I removed much of it for protection, but its pretty straight forward. It grabs the value that was sent, checks if the value is equal to one (which will show the states) and, if not, will show the textbox. Simple? Yep. You can copy this and save it as getSubInfo.php

**** Note that I removed security features and such from this code. You should add some of your own so that people are not injecting into your code; although this is really nothing sensitive.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php
$sub = $_GET['sub'];
function getMySub($sub)
{
	if ($sub == "USA")
	{
		print("State<br />
			<select name="state" size="1">
				<option  selected="selected">Select</option>
				<option value="1">state list</option>
			</select>");
	} 
	else 
	{
		print("State / Area <br /><input name="state" type="text" size="20" />");
	}
}
echo getMySub($sub);
?>

4. Now for the HTML of it. This is pretty straight forward. Write out your select statement as usual, but add an onChange call to handle the dynamic content retrieval. Add this to your page.

1
2
3
4
5

<select name="request_country" onchange="doSomething(this)">
	<option  selected="selected">Select</option>
	<option value="USA" >UNITED STATES</option>
	<option value="AFG" >AFGHANISTAN</option>
</select>

So all in all, this was a pretty simple thing to accomplish. Its nothing major; just thought I would share it with you all.

Tags: AJAX, jQuery populate, jQuery tutorial