Soliciting browser type, version, OS and cookie settings from your users

I lost track of this site and happily re-found it – tell your website customers to open http://supportdetails.com/ in a new tab when they have issues with your website and to use the form built in to e-mail you their information. Super handy.

Infographic: The size of the United States military

The National Post graphics department is amongst the best in the business. After the U.S. troop withdrawal from Iraq, they did up this infographic about what the size and placement of the U.S. military remains to be. Click the image below to see it at full size.

A Terms Of Service page done right (or at least better)

The 500px Terms of Service page strikes a great balance (a 50/50 balance, to be precise) between necessary legalese and something the layman can understand.


Very basic JSONP

JSONP allows you to make HTTP requests outside of your own domain due to the SCRIPT tag not having the same-domain limitation XMLHttpRequest does. The basic form of this workaround is as follows:

var scr = document.createElement('script');
scr.src = 'http://openexchangerates.org/latest.json?callback=formatCurrency';
document.body.appendChild(scr);

function formatCurrency(data) {
	// Do stuff with the data that's been returned.
	1;
}

Lines 1 – 3 of the above create a SCRIPT tag in the DOM, defines the URL to retrieve data from and in line 3 makes the request. To continue the execution cycle, the script at openexchangerates.org must wrap its data in a function:

formatCurrency({ "hello" : "Hi, I'm JSON. Who are you?"})

This calls the locally defined function formatCurrency(), which does whatever it needs to do with the returned data. A quick hack to make your API (assuming you control it) work with JSONP would be as follows:

// assume $json holds the JSON response
if ($GET['callback'] != '') $json = $GET['callback']."( $json )";
return $json;

I have yet to test this, but I imagine you could also be much more daring and avoid having to get the following code uploaded to your API of choice. To do this, execute the first bit of JavaScript on this page, and then execute an eval() statement on the data in the manner of the below:

eval('formatCurrency(' + returned_data + ')');

How to center text within a DIV element

This is one of those things I’m blogging about strictly so I can search it later and find the answer. Below, we use a DIV contained within a DIV to center text/images/anything on a page, which we’ve arbitrarily decided is 1024px in width.

<div style="width: 1024px;">
	<div style="width: 50%; margin: 0 auto;">
		Everything within this DIV element will be centered within the 1024px outer DIV element!
	</div>
</div>

Reference: StackOverflow – How to center DIV in DIV?

Doing a speed test at a shell prompt

Optimum Online has a couple of test files publicly available for download to see what kind of speeds you can achieve. The following points to a 64 MB file, which is a nice size to discover what your sustained transfer speed is.

$ wget ftp://ftp1.optonline.net/test64

Referring to a PHP object property using a variable

This is one of those really simple things that I use infrequently enough that I tend to forget: If you’ve tried using $object->$field_name to address a property of a PHP object, you’ll know that PHP isn’t happy with that syntax. Instead, use:

return $object->{$field_name};

UX Movement – Why headlines attract more user attention than images

I feel obligated to repost this invaluable bit of knowledge from the excellent UX Movement website.

UX Movement – Why Headlines Attract More User Attention Than Images

When websites show content, they’ll usually use a headline and image. Headline and image quality is important in getting the user’s attention. However, the headline will always get the most attention no matter what. Here’s why.

Look at this image. How relevant is it to you? What is the context behind the image? One could make guesses all day, but the fact is that nobody knows for sure.

Now look at this headline. How relevant is it to you? What is the context behind the headline? You know what the context is immediately after reading it.

You can easily visualize the image with the headline alone. But you can’t make out the headline with the image alone. Users won’t understand the image without the headline. But users will still understand the headline without the image.

With the headline and image put together, users get the full picture. They get both the story context and the emotion.

When users see both together, they will naturally pay more attention to the headline because it has the context and details of a story that they can relate to. Users are looking for information, and a headline gives them more information than an image. However, the image can appeal to users’ emotions more. And that can reinforce the headline and give users the extra boost to click-through. Both are important, but the headline is most important.

Placement & Visual Weight

How can you apply this newfound insight to the way you design content? Since headlines attract more attention than images, you’ll want to place your headline before your image. This way users can immediately get to the headline without having to go through the image.

Putting the image first wastes an extra visual fixation that doesn’t give users any useful information.

The image is more meaningful to users after they understand the context from the headline first.

Another thing is to make sure that your image doesn’t have more visual weight than your headline. When an image is too large, users can easily get distracted. This slows them down from their task of getting information. To avoid this, balance the weight between your headlines and images, and let your headline do most of the talking.

When your image is louder than your headline, users waste their time staring at the image.

Replicated Research

If you’re still not convinced of the claim through objective reasoning, take a look at Jakob Nielson and the Poynter Institute’s research. Their studies “used different methodologies, tested different users and different sites, had different goals, and were conducted at very different stages of the growth of the Web” and they all concluded the same results. In Jakob’s own words:

When different people keep finding the same results year by year, it is time to take the findings seriously and to base Web design on the data and not on wishful thinking.

The results are in and the time to treat headlines with more respect is now. You may love looking at your image, but the user is looking at your headline.

Why the Apple iPhone isn’t manufactured in the United States of America

Today the New York Times has a long article that essentially investigates why Apple and other hardware companies manufacture their wares abroad. The pat answer of “because it’s cheaper” is certainly accurate, but the piece also touches upon the reasons of a lack of worker flexibility, a lack of an appropriately skilled population, uneven support via subsidies from government, and a supply chain that just isn’t available in North America anymore.

New York Times – Apple, America and a Squeezed Middle Class

Apple employs 43,000 people in the United States and 20,000 overseas, a small fraction of the over 400,000 American workers at General Motors in the 1950s, or the hundreds of thousands at General Electric in the 1980s. Many more people work for Apple’s contractors: an additional 700,000 people engineer, build and assemble iPads, iPhones and Apple’s other products.

But almost none of them work in the United States. Instead, they work for foreign companies in Asia, Europe and elsewhere, at factories that almost all electronics designers rely upon to build their wares.

Apple executives say that going overseas, at this point, is their only option. One former executive described how the company relied upon a Chinese factory to revamp iPhone manufacturing just weeks before the device was due on shelves. Apple had redesigned the iPhone’s screen at the last minute, forcing an assembly line overhaul. New screens began arriving at the plant near midnight.

A foreman immediately roused 8,000 workers inside the company’s dormitories, according to the executive. Each employee was given a biscuit and a cup of tea, guided to a workstation and within half an hour started a 12-hour shift fitting glass screens into beveled frames. Within 96 hours, the plant was producing over 10,000 iPhones a day.

“The speed and flexibility is breathtaking,” the executive said. “There’s no American plant that can match that.”

Read More

What if middle-class jobs disappear?

I don’t believe this piece offers us new insight on the turmoil in labour markets today, but I think it does a good job of summarizing the why’s and touching on possible outcomes. One interesting note I’ve read before and again here: Holders of undergraduate degrees had their wages fall more (by percentage) than even those with only a high school diploma. That says something about the type of job displacement occurring.

The American – What If Middle-Class Jobs Disappear?

There are two widely circulated narratives to explain what is going on. The Keynesian narrative is that there has been a major drop in aggregate demand. According to this narrative, the slump can be largely cured by using monetary and fiscal stimulus.

The main anti-Keynesian narrative is that businesses are suffering from uncertainty and over-regulation. According to this narrative, the slump can be cured by having the government commit to and follow a more hands-off approach.

I want to suggest a third interpretation. Without ruling out a role for aggregate demand or for the regulatory environment, I wish to suggest that structural change is an important factor in the current rate of high unemployment. The economy is in a state of transition, in which the middle-class jobs that emerged after World War II have begun to decline.

Read More