Website design

100 Creative Twitter Backgrounds Featuring Illustration

Wed, 28 Oct 2009 06:33:22 -0700

If you’ve ever created a Twitter account and customized it with some text, you would have discovered that the amount of text that you can display to describe yourself is very limited.

This is where designing, creating, and publishing a creative Twitter background and using it as your billboard comes into place.

Many designers and creatives utilize actual illustrations and images that will attract the viewers’ attention. By capturing a reader’s imagination in the process, illustrative backgrounds will most likely remain within their memory for a longer period of time.

Here are 100 creative Twitter backgrounds that feature illustration, that should inspire your own Twitter designs.

Farrhad

Elite Styles

Emily Chen

Lee Maplesden

Anousone

Vonster

Scott Clark

Rogie King

James Ridlo

Twestival Jozi

Krftd

Jwhedon

Andy Sowards

Brian Paulwicz

Lea

Kiam Dean Art

Paul Boag

Jason Later

Tony Chester

Melissa Scroggins

Brad Smith

Sallid

Brian Sweeney

Aaron Miller

Lorenzo Gabba

Andrew Murphy

Matt Davis

Holey Coww

Jen Parks

Think Design

Evan

Graphic Identity

Niko Bellic

Adam Kayce

Lizette Gagne

CSS Girl

Sean Carter

Djuro

Yahoo

Mr. Tweet

Ed Dale

Technorati

Silver-Solutions

Vectips

Just Tweet It

Dark Motion

Elitists Snob

Divvoted

Leeanne Lowe

Best Deals (Amazon)

Sean Boone

Deuhlig

Camiseteria

Web Designer Depot

Djambzov

Giographix

Local Hero Design

LouPage

Paul Miser

Gareth Hardy

Gerri Elder

Must Have Menus

Mail Chimp

Maggie Summers

Blink Interactive

Nikolina

Sophie Miller

Nicholas Patten

_a_n_d_y

American Hell

Desizn Tech

Bryan Lagos

mrGTB

Adrian Herritt

Sneh Roy

Cyan Banister

Michael Parenteau

Juvincent

Simona Buzatu

Jan Cavan

Patrick Ruddell

Nalora Burns

Kevin Dove

Natalie-Anne

Lynn Chyi

Satyakam Misra

Spurrachel

Travis Bucholtz

Charity Michot

LBOI

Jonathan Nelson

Weird News

Koko Hinson

Riku

Jolly Lizard

Tucker Kimball

Shirt Pizza

Rob James

Khai

Karl Bastian

Which ones are your favorites? Feel free to share other examples that we may have missed.

Website Designs Inspired by Apple

Thu, 22 Oct 2009 06:47:43 -0700

It’s well known that Apple is one of the most creative and innovative companies in the world, so it’s no wonder that many software companies and web designers would choose to follow Apple’s style of branding.

The Apple website is one of the best websites out there due to its ease of use, functionality and the beautiful environment that it creates.

I looked at websites that use one or more design elements inspired by Apple.com. Some of these sites sell Mac software and apps, so it makes sense for them to keep the same Apple look and feel. Consider this though: How many software companies that develop for Windows, choose to brand their websites to look like Vista? I have included a few screenshots of the Apple website, just in case you haven’t never seen it before.

Apple.com

1. Icon Designer

2. iSlayer

3. Versions

4. Checkout

5. Small Transport

6. MacRabbit

7. 280 Slides

8. Disco

9. Warehouse

10. Cha-Ching

11. RapidWeaver

12. DeskLickr

13. Tangerine!

14. 1Password

15. Jumsoft

16. Roxio Toast

17. CandyBar

18. Cultured Code

19. Anxiety

20. Tao Effect

21. TaskMate

22. The Invoice Machine

Do you know of any other good examples? Please share with us…

JavaScript font libraries and frameworks

Wed, 21 Oct 2009 10:42:59 -0700

JavaScript font libraries and frameworks

Parola Plus

Wed, 21 Oct 2009 05:30:07 -0700

Intelli

Wed, 21 Oct 2009 05:15:46 -0700

iPhone Apps Design Mistakes: Over-Blown Visuals

Mon, 19 Oct 2009 03:49:13 -0700

The development of iPhone applications has recently become a hot topic in the design community; everybody tries to come up with some creative idea, port it into a stylish iPhone-alike application and sell it to thousands of users through the iPhone app store. However, many of these applications are poorly designed and therefore miss the chance of providing users with a truly useful product that users would find worth recommending to friends and colleagues.

We want to take a closer look at the design of iPhone applications and showcase some good and bad examples, best practices as well as useful ideas and recommendations for your next iPhone app design. This article is a first post of a new series related to the design of iPhone applications. Please let us know if you are interested in the follow-ups to this article in the poll and in the comments below. How should it look like? What should we improve? Please also feel free to suggest more iPhone app design mistakes in the comments to this post!

Are iPhone apps really not good enough?

“It’s only 99 cents. Who cares if it sucks? I’m still trying it.” How many times have you said something like that to yourself before downloading the next promising iPhone app? How many screen-fulls of those apps do you have on your iPhone? 4? 6? 10? And how many of them do you actually use?

On average, only 3% of people who have downloaded an app use it after 30 days. Why? Because the majority of iPhone apps don’t make any sense to users. The situation is similar to that of PC software a couple of decades ago. Have we not learned from our mistakes?

iPhone applications nowadays are designed by developers who seem to care only about their app’s implementation. When an app goes live, its beautiful code or visual design often fail to address real customers’ needs. The result: thousands of useless applications in the App Store that people download and use once and then never again. These applications often don’t make sense to customers because of a poor interaction design.

Free applications usage over time: Percentage of users returning versus number of days since first used. On second day, 20% returning users; on the 30th day, only 3%. By Pinch Media. Larger image.

Paid applications usage over time: Percentage of users returning versus number of days since first used. It’s not really different from the graph above. Paid applications generally retain their users longer than free applications, although the drop-off is still pretty steep. By Pinch Media. Larger image.

Users stop using the average applications pretty quickly. Long-term audiences are generally 1% of total downloads. By Pinch Media. Larger image.

Hilarious 500 million downloads breakdown, by Gizmodo. Larger version (Copyright: Gizmodo)

It shouldn’t be this way. Developers should be writing applications that people love so much that they would pay $9.99 or even $99.99 for each of them. There’s no programming technique that teaches you how to do this. But there is something else, and it’s called interactive design.

Five Most Frequent iPhone Design Mistakes

Many applications share the same design problems that prevent customers from fully enjoying them. Recently, I conducted a review of 100 apps from the App Store and identified the five most frequent iPhone design and usability mistakes, which are:

Over-blown visuals.
Neglecting technological limitations, such as slow Internet connection, slow processors and single-threaded OS architectures.
Confusing navigation (flow, layout and taxonomy).
Confusing the iPhone with a computer. Neglecting to use new iPhone interactions (fingers instead of the mouse; multi-touch gestures; turn, tilt and rotate) and technological features such as phone functions, built-in GPS and accelerometer.
Disregard of context. A lack of understanding of how, when, where and why the mobile device is being used.

Let’s start with the first one in this article and proceed with the next ones in the follow-ups to this article.

Mistake #1. Over-Blown Visuals

Probably the oldest, yet extremely popular design problem is overdesign. Designers of iPhone applications often tend to disregard common design and usability conventions by offering users slick and shiny user interface designs that go way beyond their standard look and also way beyond their claimed functionality.

Why make things look, feel and work complicated and why do designers like to re-invent the wheel? The answer is simple: they want the application to be different; look different and stand out from the crowd. Unfortunately, a different look isn’t necessarily helpful for application’s usability and functionality.

So how does an over-design in iPhone applications look like? To better understand it, let’s look at an example:

Motion X GPS settings.

What do you think is wrong with the design in this first screenshot? Some of you may say, “Well, nothing is really wrong with it. It’s beautiful.” I agree, it’s pretty slick. But, there’s a catch: while beautiful, it is also inconsistent with other apps. It’s different. Let’s compare this screen to the settings screens of other iPhone applications:

Motion X GPS settings screen, compared to the settings screens of other apps. (Click to enlarge.)

Noticed the difference? Being inconsistent with other products makes yours worse for two reasons:

Going against convention makes your application less intuitive. Over-styled controls look different and require users to re-learn how they work.
It’s a waste of time and money. The resources you have spent to make your app look different, but not necessarily better, could have been used much more effectively.

Breaking Convention Makes Your App Less Intuitive

The more familiar the parts of your app are, the more intuitive the app will be for whoever uses it. If we recognize the parts, we will be able to learn how to use the whole faster. It’s like reading: knowing the alphabet and meanings of words allows us to “decode” books we haven’t seen before.

Here’s an example from the real world. Try to make the stop sign more “beautiful” and people will inevitably start dying:

“Sign B, 2, ‘STOP,’ shall be used to notify drivers that, at the intersection where the sign is placed, they shall stop before entering the intersection and give way to vehicles on the road they are approaching.” Article 10 of 2006 road signs convention.

In his paper Intuitive Equals Familiar (Communications of the ACM. 37:9, September 1994, page 17), Jeff Raskin, an American human-computer interface expert best known for starting the Macintosh project for Apple Computer in the late 1970s, writes:

“The impression that the phrase ‘this interface feature is intuitive’ leaves is that the interface works the way the user does, that normal human ‘intuition’ suffices to use it, that neither training nor rational thought is necessary, and that it will feel ‘natural.’”

However,

“… it is clear that a user interface feature is ‘intuitive’ insofar as it resembles or is identical to something the user has already learned. In short, “intuitive” in this context is an almost exact synonym of ‘familiar.’”

Drastically re-designing every user interface element will make your application less intuitive, which will lead to more user mistakes and a longer learning curve. Eventually, you will lose customers because of it.

What About Branding?

Is there place for branding in applications that are strictly following general design guidelines and usability conventions? Definitely! It is possible to strike a balance between having a unique look but not over-designing. Here’s one example:

Let’s take a look at an example of overdesigning by Bloomberg. Here, we have an over-designed text input field at the top. You can barely recognize this as a field when you first look at it. The version on the right hand side is much better. A standard input field makes the screen’s purpose much clearer, while remaining consistent with the application’s style and branding.

Larger version.

Here is another example by iFitness. Users are supposed to enter their weight day by day on this screen. But you have to flip through the months and days with a horizontal swipe to find the right one, and then you have to enter your weight digit by digit using five separate scroll fields. And then you have to press the very modest “Record” button, which you miss at first anyway and only find the hard way: after you have lost data. Much better:

Larger version.

99.9% of users will want to enter today’s weight. This redesigned interface has one-quarter of the controls. The screen space that has been saved can now be used to present useful information, such as weight statistics. Date and time can be recorded automatically, and the selection of the metric or imperial system of measurement, which is not terribly important, has been demoted to a settings screen.

The Yellow Pages app uses tabs, which work well on the Web, but standard toggle controls are more familiar to iPhone users.

Larger version.

Waste of Time and Money

Apple has already done an excellent job of creating standardized controls. Losing some of that functionality is almost guaranteed if you try to reinvent the wheel.

Back to our earlier example:

If we take a closer look, we’ll see that one-third of the screen space we would have had is now lost because of over-designing.

iPhone OS 3.0 introduced accessibility features. One of the modes is White on Black. Here’s what happens to our controls after inverting colors:

Color, shape and text survived color inversion. However, 2/3 of original meaning is lost. Now there is only text.

In sum, this redesign has given us twice as many UI elements, taking up twice as much real estate. The catch is, even if you haven’t made the controls worse, you still haven’t added much value and you have lost time and money in the process.

That Time and Money Could Have Been Spent On…

Design is all about solving problems. Sometimes, when people don’t know exactly what problem they are solving, they wander in the design process, and the result is over-designed. To avoid that, you must have a clear picture of the problem you need to solve.

One of the best ways to get that picture is to talk to your users (both current and potential). Only when you know your customers’ needs will you be able to build an application they’ll love.

Don’t overdesign. Be sure your house has a solid foundation before you decorate it. You will be rewarded with more loyal customers and higher download rates surprisingly quickly.

(Hopefully) coming soon: #2 iPhone’s Technological Limitations. What Apple hasn’t told you.

How To Automate Optimization and Deployment Of Static Content

Mon, 19 Oct 2009 02:24:31 -0700

A lot of traffic between users and your site comes from the static content you’re using to set up the user interface, namely layout graphics, Stylesheets and Javascript files.

This article shows a method to improve the providing of static content for a web platform. Further, it will show you a way to automate the deployment of these files, so you can deliver them with least effort but with maximum performance.

This tutorial will take some time to set it up, but it’s going to save you hours of work in the future and will improve your page speed significantly.

1. Why do I need this?

There are several approaches to optimize the delivery of contents.
Some use on-the-fly compression via the server itself or a scripting language, which costs performance and does not optimize the structure and content of the files.

The method shown here prepares the files once and also merges and optimizes the code of CSS and Javascript files before the files are compressed, which makes the delivery of them even faster.

Most browsers download only two files from a source at once. If a page needs to load more files from one domain, they get queued.
More files to transfer mean more requests to the server, more traffic and more usage of the server’s performance. For the users of the platform, this means longer loading times.
The more steps you need to deploy these files, the more space for mistakes is given.
Deployment is boring. It’s far more exciting to invest some time once, to set up a reusable automation, than wasting time doing the same copy/paste/upload actions over and over again.

Compare this two screenshots that show the same content before and after the optimization.
The apricot colored parts of the bars stand for the status “in queue” while loading the page.

The “in queue” status means nothing less than: Wasted time of the user.

In this example, the loading time was reduced by 33%, the transferred data size was reduced by 65% and the number of requests to the server even by 80%.

By using CSS sprites and merged CSS and Javascript files, there is no queue for the loading of the basic static content.

2. How to improve your static content

Besides caching, there are some principles to make the whole setup of static content more efficient right from the start of development.

Use CSS sprites for your layout graphics. It not only saves you a lot of traffic and loading time. If you got used to maintain your graphics like this, you’ll notice that it can be much more comfortable to have your layout elements e.g. in a single Photoshop file.
Don’t blow up the loading time with your CSS and Javascript files. Combine the files of each kind into one single file, minimize them (e.g. by removing line breaks and other unnecessary characters) and compress them using GZip to get the load even smaller.
This is covered in this tutorial.

3. Automating the deployment using Ruby

This automation is written in the Ruby language. So you need to have Ruby installed on your development computer. The installation is pretty simple on Windows and Mac OS X even ships with Ruby.

Please keep in mind: The scripts are completely independent from the language you’re using to run your site! You can also use them to deploy content e.g. for a PHP project.

If you’re not used to work on the command line, the next steps might look cryptic to you. Don’t hesitate, clench your teeth and take care that you always pass the correct path of the files to deal with. You only have to go through this once. When you’re finished, all you need to do is to type one single command to start the whole process.

To make it easier for you, this is the folder structure used for this tutorial:

+ css/
- fonts.css
- grids.css
- layout.css
- reset.css
- static.min.css (generated)
- static.min.css.gz (generated)

+ js/
- framework.js
- gallery.js
- plugin1.js
- plugin2.js
- start.js
- static.min.js (generated)
- static.min.js.gz (generated)

+ deploy/
- batch
- ftp.rb
- gzip.rb

index.php (or something similar)

Requirements for this tutorial

Don’t worry, besides Ruby you won’t need anything, that you don’t probably already have:

A simple text editor to save the source code.
A command line tool, like Windows cmd.exe or Mac OS X Terminal to call the scripts.
A FTP account to try out the upload script.
A project to enhance.
Optional: The Firefox add-on Firebug (or something similar for other browsers), to see the enhancements afterwards.

Juicer

Christian Johansen created a tool called Juicer which enables you to merge and minimize CSS and Javascript files. To install it on Windows, simply type

gem install juicer

in the command line. When you’re using Mac OS X use

sudo gem install juicer

After the successful install, Juicer will ask you to extend it with YUI Compressor and JSLint for Javascript compression and verification. You do this by typing

juicer install yui_compressor

and after that

juicer install jslint

in the command line.

Preparing your files

The good thing is, you don’t have to change anything in your present files. But to make sure, the files are merged in the order you want to, you need to set up two additional files.

Let’s assume you have four CSS files and five Javascript files:

Create a new Javascript file, called static.js with the following content:

/**
 * @depends framework.js
 * @depends plugin1.js
 * @depends plugin2.js
 * @depends gallery.js
 * @depends start.js
 */

After that, create a CSS file static.css with this content:

@import url("reset.css");
@import url("fonts.css");
@import url("grids.css");
@import url("layout.css");

Now you’re ready to run Juicer in your command line.

For Javascript:

juicer merge -i --force ./js/static.js

The parameter -i means that the merging process won’t be cancelled, if JSLint thinks you have errors in your Javascript code. The parameter --force means older versions of the minified file will be overwritten.

For CSS:

juicer merge --force ./css/static.css

As a result you will see two new generated files named static.min.js and static.min.css. You probably want to know if they still work for your site, so go ahead and test it, by replacing the old bunch of link and script tags in your html header with the two new ones.

GZip Compression

When your minified files work fine, you can go on to compression. If you get Javascript errors or your CSS layout looks weird, you should re-check the order of the files to merge.

Below you see a small Ruby script that saves a gzipped copy of a file.

require 'zlib'

file_to_zip = ARGV[0]

puts "Gzipping #{file_to_zip}..."

base_name = File.basename(file_to_zip)

file_name_zip = "#{file_to_zip}.gz"

base_name_zip = "zip_#{base_name}"

File.open(file_name_zip, 'w') do |f|

  gz = Zlib::GzipWriter.new(f)

  IO.foreach(file_to_zip) {|x|
    gz.write x
  }   

  gz.close

end

puts "Gzipped version saved as #{file_name_zip}"

Save it as gzip.rb and call it like this:

ruby gzip.rb ../js/static.min.js

When you look at your folder, you’ll notice a new file called static.min.js.gz. Now do the same for the CSS file:

ruby gzip.rb ../css/static.min.css

Important: Make sure that your server provides the right content encoding and content type information to the clients, so they understand that this files are gzipped content.
You can do this in many ways. For Apache, an example for the .htaccess file would be:

 AddType text/javascript .gz AddEncoding x-gzip .gz 

 AddType text/css .gz AddEncoding x-gzip .gz

FTP-Upload

You’re on the home stretch. Now you have all improved files together and need to upload them to your host. Again, here’s a little Ruby script that does exactly that for you.

 require 'net/ftp'

ftp_host = ARGV[0]
ftp_user = ARGV[1]
ftp_password = ARGV[2]

localfile = ARGV[3] #e.g. "../js/static.min.js.gz"
remote_dir = ARGV[4] #e.g. "www/js"

ftp = Net::FTP.open(ftp_host, ftp_user, ftp_password) 

puts "FTP - Status: #{ftp.status}."

puts "FTP - Go to directory: #{remote_dir}."
ftp.chdir(remote_dir)
puts "FTP - Uploading file: #{localfile}..."
ftp.putbinaryfile(localfile)

files = ftp.list puts "FTP - Your file was uploaded here:" puts files

ftp.close

Save it as upload.rb, put in the credentials of your host, eventually change the destination directory and then call it like that:

ruby ftp.rb example.org admin mysecret ../js/static.min.js www/js

Which stands for:
ruby ftp.rb ftp-host ftp-user ftp-password file-to-upload ftp-destination-folder

The minified Javascript file should be uploaded now. Repeat this for the CSS file and the gzipped versions of both.

Please note that the folders on the ftp server, where the files are copied to, must already exist.

Putting it all together

You got all the pieces of this puzzle and now you can finally put them together, by grouping the commands in a batch file. On Windows it would look like this:

@echo off

echo -------- MERGING JS FILES --------

call juicer merge -i --force ../js/static.js 

echo -------- FINISHED MERGING JS FILES --------

echo -------- MERGING CSS FILES --------

call juicer merge --force ../css/static.css

echo -------- FINISHED MERGING CSS FILES --------

echo -------- COMPRESSING FILES --------

ruby gzip.rb ../js/static.min.js

ruby gzip.rb ../css/static.min.css

echo -------- FINSISHED COMPRESSING FILES --------

echo -------- UPLOADING FILES --------

ruby ftp.rb example.org admin mysecret ../js/static.min.js www/js

ruby ftp.rb example.org admin mysecret ../js/static.min.js.gz www/js

ruby ftp.rb example.org admin mysecret ../css/static.min.css www/css

ruby ftp.rb example.org admin mysecret ../css/static.min.css.gz www/css

echo -------- FINISHED UPLOADING FILES --------

Save it in a file called e.g. batch.bat, insert your FTP credentials and call it like this:

cd deploy //switch to subdirectory
batch.bat

On OS X you can do it like that:

#!/bin/bash

echo -------- MERGING JS FILES --------

juicer merge -i --force ../js/static.js 

echo -------- FINISHED MERGING JS FILES --------

echo -------- MERGING CSS FILES --------

juicer merge --force ../css/static.css

echo -------- FINISHED MERGING CSS FILES --------

echo -------- COMPRESSING FILES --------

ruby gzip.rb ../js/static.min.js

ruby gzip.rb ../css/static.min.css

echo -------- FINSISHED COMPRESSING FILES --------

echo -------- UPLOADING FILES --------

ruby ftp.rb example.org admin mysecret ../js/static.min.js www/js

ruby ftp.rb example.org admin mysecret ../js/static.min.js.gz www/js

ruby ftp.rb example.org admin mysecret ../css/static.min.css www/css

ruby ftp.rb example.org admin mysecret ../css/static.min.css.gz www/css

echo -------- FINISHED UPLOADING FILES --------

Save it in a file called e.g. batch, insert your FTP credentials and call it like this:

 cd deploy //switch to subdirectory sh batch

And the content gets merged, minified, compressed and uploaded in one rush.
Additionally to the CSS and Javascript files, it would be a good idea, if the graphics file for the CSS sprites would be uploaded too? Just add an additional call of the upload script in the batch file. It can be used with any filetype.

4. In your template

Further development and bug fixing is hard to do in a minified file. But you can add an if-clause in your templates to vary the referencing of your files, depending on your environment.

Take the original files for your local development and the minified for your online version. Additionally you should check if the users browser supports gzipped content (most modern browsers do).

An example for PHP:

if($_SERVER["SERVER_NAME"] == "localhost") {
	//local development server - load all files
} else {
	if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')){
		//production system - client accepts gzip
	} else {
		//production system - client does not accept gzip
	}
}

And an example for Ruby on Rails:

<% if RAILS_ENV == 'development' %>
  <%# local development server - load all files %>
<% else %>
  <% if self.request.env['HTTP_ACCEPT_ENCODING'].match(/gzip/) %>
    <%# production system - client accepts gzip %>
  <% else %>
    <%# production system - client does not accept gzip %>
  <% end %>
<% end %>

5. Get even faster with subdomains

Like mentioned before, most browsers only download two files per host simultaneously. You can bypass that rule by creating some subdomains for your static content and referencing the files through them.

For example, create a subdomain on your web hosting account, that’s called img.example.org, which points to example.org/img.

Do this for all of your folders, containing static content and use the subdomains to reference your resources:

img.example.org/sprites.jpg
css.example.org/static.min.css
js.example.org/static.min.js

This way, the rule won’t be applied and all files can be downloaded at the same time.

6. Conclusion

If you got all of this working for one of your projects, you surely recognized the advantages for you as a developer and for the users as the consumers of your content.

These examples don’t claim to be perfect. But if you didn’t approach to automate recurring tasks in your daily workflow as a developer, you hopefully have an idea now, how it could look like.

Always keep in mind, that computers were invented to spare you the boredom of repeating, simple tasks. So save your time for more important things.

Of course, this doesn’t have to be the end of the line. If you’re interested in the automatic deployment of whole applications, you should have a look at Capistrano. Again, it’s written in Ruby, but you can also use it for PHP platforms.

3 Ways to Speed up Your Site with PHP

Mon, 19 Oct 2009 02:10:04 -0700

These days, with broadband connections the norm, we don’t need to worry as much about internet speeds or the filesize of our pages. However, that’s not to say that we still shouldn’t do so. If you wish to reduce the load times on your server, decrease the number of HTTP requests, and go that extra bit for your visitors, there are a few techniques that you can use. This tutorial covers a number of PHP tricks, including caching and compression.

1. CSS Amalgamation with PHP

As web developers, we often split up our CSS between several separate files to keep a logical separation and to make modifications easier. However, this increases the number of requests to the server, resulting in a slower page load. Using some PHP we can have the best of both worlds; keeping multiple files on our end, and using one request to retrieve all of them.

Preparation

Before we can optimize CSS files, we will need some CSS to work with! So let’s make three files and put some CSS in them.

	// main.css
	// Just some sample CSS

	body {
		width: 800px;
		margin: 0 auto;
		color: grey;
	}

	#wrapper {
		margin-top: 30px;
		background: url(../images/cats.png);
	}

	// typography.css
	// Just some sample CSS

	body {
		font-family: Arial, san-serif;
		font-weight: bold;
	}

	strong {
		font-size: 120%;
	}

	// forms.css
	// Just some sample CSS

	form {
		position: relative;
		top: 400px;
		z-index: 99;
	}

	input {
		height: 50px;
		width: 400px;
	}

The PHP

We need to get the contents of these files and append them to each other in a specified order. So our script has to receive the names of the CSS files via URL parameters, open all the files and put them together. An explanation of the code follows.

<?php
//Lets define some useful variables
// --- NOTE: PATHS NEED TRAILING SLASH ---
$cssPath = './css/';

if (isset($_GET['q'])) {
	$files = $_GET['q'];
	// Got the array of files!

	//Lets just make sure that the files don't contain any nasty characters.
	foreach ($files as $key => $file) {
		$files[$key] = str_replace(array('/', '\\', '.'), '', $file);
	}

	$cssData = '';
	foreach ($files as $file) {
		$cssFileName = $cssPath . $file . '.css';
		$fileHandle = fopen($cssFileName, 'r');
		$cssData .= "\n" . fread($fileHandle, filesize($cssFileName));
		fclose($fileHandle);
	}
}

// Tell the browser that we have a CSS file and send the data.
header("Content-type: text/css");
if (isset($cssData)) {
	echo $cssData;
	echo "\n\n// Generated: " . date("r");
} else {
	echo "// Files not avalable or no files specified.";
}
?>

Breaking it Down

It looks quite complicated, but stick with me, it’s really pretty simple.

<?php
//Lets define some usefull variables
// --- NOTE: PATHS NEED TRAILING SLASH ---
$cssPath = './css/';

if (isset($_GET['q'])) {
	$files = $_GET['q'];
	// Got the array of files!

	//Lets just make sure that the files don't contain any nasty charactors.
	foreach ($files as $key => $file) {
		$files[$key] = str_replace(array('/', '\\', '.'), '', $file);
	}

This chunk of code sets the path for the CSS folder and checks that we have been sent some files to work with. The CSS path needs to have trailing slashes otherwise we will find ourselves with bucket-loads of errors. If we wanted, we could check automatically for a slash and add it if required. However, for the sake of simplicity I omitted that behavior.

Next we check each filename and remove any full stops and/or slashes. This prevents people from navigating the filesystem by passing filenames such as ‘../../secret/file’.

	$cssData = '';
	foreach ($files as $file) {
		$cssFileName = $cssPath . $file . '.css';
		$fileHandle = fopen($cssFileName, 'r');
		$cssData .= "\n" . fread($fileHandle, filesize($cssFileName));
		fclose($fileHandle);
	}
}

Now we have to build our CSS data from the individual files. To do this, we loop through the files array with foreach, open each file and append the contents onto our data. The “\n” simply adds a new line character to keep things nice and tidy. The filesize() function is used to find the length of the file so that we can tell fread() how much we want (the entire file).

// Tell the browser that we have a CSS file and send the data.
header("Content-type: text/css");
if (isset($cssData)) {
	echo $cssData;
	echo "\n\n// Generated: " . date("r");
} else {
	echo "// Files not avalable or no files specified.";
}
?>

The last bit of the script is to send the CSS data to the browser. This means we have to tell PHP that we are sending CSS data, and that it should inform the browser. We do this with the header function, setting the content type to ‘text/css’. Then we send the CSS to the client. We first check if there is any CSS data to send. If there isn’t, then this means that no names of CSS files were sent. If this is the case we simply reply with a CSS comment saying so. If, however, we do have some data to send, then we send that and add a message detailing when it was generated. If you wanted to, for example, add some copyright information to all your CSS in one go, then this would be an ideal place.

Putting it to the Test

Okay, now it’s time to test the script; we need to first build a directory structure and then place our script and CSS files. Have a look at the image below and try to replicate that structure. If you want something different, don’t forget to change the paths to reflect those changes.

Once everything is in the right place, we can test our script. The directory structure will have to be placed in the ‘htdocs’ or ‘www’ folder of a webserver with PHP (pretty much any webserver these days). Navigate to the index.php file. You should be greeted by a single comment: ‘Files not available or no files specified’. This means that we have not given any files for it to pull together. However, the good news is that this is a valid CSS comment and won’t cause any problems.

Let’s give something a little trickier a go; type in ‘index.php?q[]=main’, you should get the CSS from you main.css file and a notice at the bottom.

If we want to pull multiple files together (as this was really the entire point of the script) we can send this request: ‘index.php?q[]=main&q[]=forms’. As you can see we can repeat ‘q[]=’ as many times as we want because it is adding each value to an array. You could potentially add 50 CSS files together if you wanted using this script.

Concluding

Using this method can be very useful, and can provide benefits such as being able to have a default style sheet for every page and and an extra CSS file for pages with forms. It’s also easy to implement if you’re already using some sort of CSS processing with PHP. If you want, you can even rename index.php to index.css as long as you set up .htaccess to treat CSS files as PHP.

You might notice that I’m treating different orders of CSS files as different. This is because you may wish to have one stylesheet override another and therefore the order of the files is important. If this isn’t a problem for you, you may wish to perform a sorting function on the files array before processing.

Just a word of caution; if you place the index.php file in any folder other than the one that contains the CSS then you have to write your relative background image paths as if index.php was your stylesheet. This is because that’s what the browser thinks it is. Alternatively, you could add some code to rewrite these URLs, however, that is beyond the scope of this tutorial.

2. Stripping Whitespace from your HTML and CSS

Many of us use large amounts of whitespace when writing code. The good news is that whitespace in PHP doesn’t actually get sent to the browser. However, it does in HTML.

Browsers tend to only display one space no matter how many tabs you use in your code. This means that there is some wasted bandwidth. However, with some simple PHP we can remove this bandwidth leeching whitespace.

Preparation

Once again, we will need some raw data to work with; so copy the following example HTML and CSS code. Save the following into a .htm and a .css file in a folder within your server’s webroot directory.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Hey a Page!</title>
		<link rel="stylesheet" href="./css.css" type="text/css">
	</head>
	<body id="homepage">
		<div id="wrapper">
			<div id="header">
				<h1>Kittens for sale!</h1>
				<div>
					There   are      lots      of spaces here! But we need to get    rid   of  them!
				</div>
			</div>
			<div id="mainbody">
				Lorem Ipsum dol...
			</div>
		</div>
	</body>
</html>

body {
	min-height: 800px;
	background: black;
	font-size: 18px;
}

#wrapper {
	width: 960px;
	margin: 20px auto;
	padding: 15px;
}

#header h1 {
	text-indent: -99999em;
	background: url(../images/header.png);
	display: block;
	width: 100%;
	height: 48px;
}

#mainbody {
	font-weight: bold;
}

The PHP

One of the advantages of this method is that the same script will work with both HTML and CSS. Our script has to accept a filename as part of the request. Once the file has been loaded, it has to strip all whitespace down to just one space character. This is because we don’t want to remove all the spaces between words!

Once again, ther’s a bunch of PHP here, but I will go through it carefully with you.

<?php
$fileDirectory = '';
$file = $_GET['q'];
$nameExplode = explode('.', $file);
$ext = $nameExplode[1];
$fileName = $fileDirectory . $file;
if ($ext != 'css' AND $ext != 'htm' AND $ext != 'html') {
	//Check for evil people...
	die('Hackers...!');
} else {
	//Lets get down to business
	$handle = fopen($fileName, 'r');
	$fileData = fread($handle, filesize($fileName));
	//Now for some regex wizzardry!
	$newData = preg_replace('/\s+/', ' ', $fileData);
	fclose($handle);
	//Time to output the data.
	if ($ext == 'css') {
		header("Content-type: text/css");
	}
	echo $newData;
}
?>

Having a Closer Look

This one isn’t so tricky, but we will still break it up and make sure we understand what is going on.

We are getting the filename via a parameter passed with the GET request and checking to make sure that it is an allowed filetype. Then we proceed to fetch the data and process it to remove excess whitespace. This method is relatively primitive and won’t remove all unnecessary whitespace, but it will deal with most of it in only a few lines of code!

<?php
$fileDirectory = '';
$file = $_GET['q'];
$nameExplode = explode('.', $file);
$ext = $nameExplode[1];
$fileName = $fileDirectory . $file;

This snippet just sets some variables. Once again, we are passing our data through ‘q’ as it is nice and short. This also gives us a place to define our directory for files and extract the file extension. The explode() function rips the filename up whenever it sees a ‘.’ and puts the bits into an array.

if ($ext != 'css' AND $ext != 'htm' AND $ext != 'html') {
	//Check for evil people...
	die('Hackers...!');
} else {

Here we’re checking to make sure that the file is either CSS or HTML. If it was something else we might find ourselves giving hackers a hole into our site like showing them settings.php! So after giving the hackers the flick we can move on to processing our data!

	//Lets get down to business
	$handle = fopen($fileName, 'r');
	$fileData = fread($handle, filesize($fileName));
	//Now for some regex wizzardry!
	$newData = preg_replace('/\s+/', ' ', $fileData);
	fclose($handle);
	//Time to output the data.
	if ($ext == 'css') {
		header("Content-type: text/css");
	}
	echo $newData;
}
?>

Now for the main attraction; all we are really doing here is opening the file and reading it - like we did in the first script - and then ripping out as much whitespace as possible. This is achieved through a relatively simple regular expression that searches through the file for any spaces, tabs or newlines and then replaces them with a single space.

Lastly we send back the data, setting the required headers if we are dealing with CSS.

But Does it Work?

If you go into your browser and navigate to ‘index.php?q=css.css’ we should see one line of CSS across the page. This shows that everything is fine! We can also see the same effect on the source code for the html example. In fact in that small example, we reduced a 314 character CSS file down to 277 characters and a 528 character html file down to 448 characters. Not bad for 15 lines of code.

Conclusion

So that’s a good example of how we can do quite a lot with very little work. If you have a look at the source of pages like Google you will find that they have almost no whitespace because, when you receive millions of requests, a few extra kilobytes per request really adds up. Unfortunately, most of us aren’t that lucky!

3. Caching in your PHP Scripts

In this part, I will show you how to ‘retrofit’ caching into your scripts using the above script as an example. The aim is to speed things up by not having to regenerate the data every time someone requests a file. Generating the content every request is just a waste, especially on static data such as our CSS.

To add caching we need to add three things to our script. Firstly, we have to collect the data input to the script and generate a filename unique to that set of inputs. Secondly, we have to look for a cache file and see if it is sufficiently recent. Lastly, we have to either use the cached copy or generate new content and cache it for next time.

Breaking the Flow

This part of the process really depends on the individual script, however I will show where I am going to break the flow of this script for the caching.

<?php
$fileDirectory = '';
$file = $_GET['q'];
$nameExplode = explode('.', $file);
$ext = $nameExplode[1];
$fileName = $fileDirectory . $file;

//-- WE HAVE ENOUGH DATA TO GENERATE A CACHE FILE NAME HERE --

if ($ext != 'css' AND $ext != 'htm' AND $ext != 'html') {
	//Check for evil people...
	die('Hackers...!');
} else {

	//-- WE CAN INTERCEPT AND CHECH FOR THE CACHED VERSION HERE --

	//Lets get down to business
	$handle = fopen($fileName, 'r');
	$fileData = fread($handle, filesize($fileName));
	//Now for some regex wizardry!
	$newData = preg_replace('/\s+/', ' ', $fileData);
	fclose($handle);
	//Time to output the data.

	//-- NOW WE CAN STORE THE NEW DATA IF REQUIRED AND OUTPUT THE DATA --

	if ($ext == 'css') {
		header("Content-type: text/css");
	}
	echo $newData;
}
?>

Putting it into Action

We will now actually write the code for caching into this script. I will first show the script completed and then go through each piece.

<?php
$fileDirectory = '';
$file = $_GET['q'];
$nameExplode = explode('.', $file);
$ext = $nameExplode[1];
$fileName = $fileDirectory . $file;
$cacheName = './cache/' . $nameExplode[0] . $nameExplode[1] . '.tmp';
if ($ext != 'css' AND $ext != 'htm' AND $ext != 'html') {
	//Check for evil people...
	print_r($ext);
	die('Hackers...!');
} else {
	if (file_exists($cacheName) AND filemtime($cacheName) > (time() - 86400)) {
		$cacheHandle = fopen($cacheName, 'r');
		$newData = fread($cacheHandle, filesize($cacheName));
		fclose($cacheHandle);
		$isCached = TRUE;
	} else {
		//Lets get down to business
		$handle = fopen($fileName, 'r');
		$fileData = fread($handle, filesize($fileName));
		//Now for some regex wizardry!
		$newData = preg_replace('/\s+/', ' ', $fileData);
		fclose($handle);
		//Lets cache!
		$cacheHandle = fopen($cacheName, 'w+');
		fwrite($cacheHandle, $newData);
		fclose($cacheHandle);
		$isCached = FALSE;
	}
	//Time to output the data.
	if ($ext == 'css') {
		header("Content-type: text/css");
		if ($isCached) {
			echo "// Retrieved from cache file. \n";
		}
	} else {
		if ($isCached) {
			echo '<!-- Retrieved from cache file. -->';
		}
	}
	echo $newData;

}
?>

The Explanation

This one’s a bit trickier and a little more likely to leave you scratching you head. But don’t worry, not much has changed and we will go through each section. An extra feature we have included is the refreshing of the cache every 24 hours. This is handy so if you change anything, you can either wait 24 hours or simply empty the cache directory. If you want a different refresh interval just calculate it in seconds.

$cacheName = './cache/' . $nameExplode[0] . $nameExplode[1] . '.tmp';

This bit of code just gets the file’s name and extension, glues them together and adds the cache directory and the appropriate ‘.tmp’ extension.

	if (file_exists($cacheName) AND filemtime($cacheName) > (time() - 86400)) {
		$cacheHandle = fopen($cacheName, 'r');
		$newData = fread($cacheHandle, filesize($cacheName));
		fclose($cacheHandle);
		$isCached = TRUE;
	} else {

Here we’re checking if we have a cache file saved and if the cache file was created within 24 hours. If both these conditions are met then we open the file and extract its contents to substitute for the scripts output. We also set $isCached to true so we can output some messages at the end.

		//Lets cache!
		$cacheHandle = fopen($cacheName, 'w+');
		fwrite($cacheHandle, $newData);
		fclose($cacheHandle);
		$isCache = FALSE;
	}

Now we are caching the output of the script for us to use in later requests. We simply open a file in write mode, dump our data into it and then close it. Strictly you don’t have to close files in PHP but it’s considered a good practise so I have done it here.


	//Time to output the data.
	if ($ext == 'css') {
		header("Content-type: text/css");
		if ($isCached) {
			echo "// Retrieved from cache file. \n";
		}
	} else {
		if ($isCached) {
			echo '<!-- Retrieved from cache file. -->';
		}
	}

This is another part of the script that was modified a little so that we can offer some feedback through the browser. If the file was retrieved from the cache we can add a message to the script’s output. Notice that the message for CSS scripts has ‘\n’ at the end. This is because the characters ‘//’ comment our entire line and ‘\n’ pushes everything else onto another line. If you want to disable the messages all you have to do is comment out the line ‘$isCached = TRUE;’.

Giving it a Whirl

If we use our script again, we will notice no change until we refresh a second time when we will see a message saying that the file was retrieved from cache. Sweet success! This caching setup can also be applied to the first script with little modification, however, that is left as an exercise for the reader.

Concluding

Being able to quickly add simple but effective caching to any script that you are working on is an extremely useful skill. It just adds that extra bit to the script, reducing the load on your server and speeding up the site for users. Now that’s win-win!

Summing it Up

In this tutorial I have shown you a few handy but simple ways to speed up your site with a dash of PHP. I really hope that you find them useful and that you can apply them to a project in the future. How do you improve your site’s performance?

Definitive Guide to Taming the IE6 Beast

Fri, 24 Jul 2009 02:38:12 -0700

For years, Internet Explorer 6 (IE6) has been the bane of existence for web designers around the world. Designers and users alike have come to enjoy the increasingly predictable, standards-compliant behavior of great modern browsers like Firefox, Opera, and Safari. Meanwhile, IE6 continues to haunt our designs, lurking in dark places while dying a painfully slow, agonizing death. As we await that grand and glorious day when IE6 is as dead as Netscape 4, let us be mindful of the endagered species of users who, for whatever sad reason, continue to torture themselves with that terrible beast of a browser.

So come now, let us celebrate these last days of IE6 with this definitive guide to taming the IE6 beast.

In this comprehensive article, you’ll learn some of the best methods for supporting IE6, including proper targeting, specific hacks, image support, box models, floats, and everything in between.

Use conditional comments to target IE6

Conditional comments play an important role in getting IE6 to behave. Conditional comments are basically snippets of code that are included in your (X)HTML markup that enable you to target or filter specific versions of Internet Explorer. Here is a conditional comment that targets IE6 with a special message:

<!--[if IE6]>
  <p>Oops! Looks like you're still using Internet Explorer 6!
     You deserve better!</p>
<![endif]-->

This is an extremely useful method of delivering code and content only to IE6. Other browsers will see this conditional comment as an ordinary (X)HTML comment and simply ignore its contents. Thus, when adapting our web pages for IE6, conditional comments enable us to apply CSS styles directly, without interfering with other browsers. Although conditional comments are a proprietary Microsoft invention, they are arguably the best way to “hack” specific versions of Internet Explorer.

The easiest way to use conditional comments to target and apply styles only to IE6 is to include an “IE6-only” stylesheet in the <head> section of your web pages:

<!--[if IE6]>
  <link rel="stylesheet" href="http://domain.tld/ie6.css"
    media="screen" />
<![endif]-->

Then, in the ie6.css stylesheet, we place all of the IE6-specific hacks and other trickery that are needed in order to accomodate IE6. This enables us to consolidate our IE6 styles into a single stylesheet that is completely ignored by all other browsers. With this method of applying styles to IE6, there is no need for IE6-specific hacks such as the so-called “star-HTML” hack or the underscore hack. Selectors are simply targeted “as-is” from within the IE6-only stylesheet.

Of course, conditional comments can do much more than target IE6. By design, they are able to target or filter any version(s) of Internet Explorer for both HTML and XHTML. For more information on conditional comments, these fine articles are highly recommended:

Target and filter IE6 with “in-CSS” hacks

Despite the usefulness of conditional comments, there are situations in which you may decide to apply IE6-specific styles from within the stylesheet. A good example of this may happen during site development, when it is more expedient and practical to work with a single stylesheet, in which IE6 styles are located next to “normal” styles for easy comparison. Once development is complete, all “in-CSS” hacks may be consolidated to an IE6 stylesheet included via conditional comments.

Fortunately, when it comes to IE6, there is no shortage of these in-CSS targeting methods. Over the years, a few of these “hacks” have risen to the top of the pile, proving to be extremely useful and effective for targeting IE6. Perhaps the most widely used of these in-CSS techniques is known as the “star-HTML” hack:

/* target IE6 */
* html #selector { color: red; }

While standards-compliant browsers ignore this illogical selector, IE6 treats it as legitimate, even though <html> is the highest element in the document tree. This enables us to apply CSS styles exclusively to IE6 without interfering with other browsers. Best of all, this method of targeting IE6 is completely valid.

There are also cases where we need to hide styles from IE6. The following hack is referred to as the “child-selector filter,” and it enables us to apply CSS styles to all browsers except IE6:

/* filter IE6 */
html>body #selector { color: red; }

This selector is also completely valid, and readily applied by all standards-compliant browsers. It is effective because IE6 simply doesn’t understand its meaning.

Other useful methods of targeting and filtering IE6 include the !important hack, which is useful when you need to override a property value for IE6:

#selector {
  width: 200px !important; /* target other browsers */
  width: 100px;            /* target IE6 and lower */
}

When there are two identical properties for a selctor, IE6 will apply the second property, even if the first property includes the !important directive. Other browsers will of course apply the !important declaration, enabling us to target IE6 with the subsequent rule.

Enable alpha-transparent PNG support

One of the most frustrating shortcomings of IE6 is its lack of 32-bit alpha-transparent PNG support. When displaying a 32-bit alpha-transparent PNG, IE6 replaces all transparency with an ugly grey background. Fortunately, this is a well-known and frequently addressed issue for which there are a wide variety of workarounds and solutions.

Apart from avoiding the use of alpha-transparent PNG images altogether, perhaps the simplest way to ensure visual compatibility with IE6 is to stick with fully transparent PNG images, which are fully supported and displayed properly in all browsers, including IE6.

A more practical approach is to apply alpha-transparency via 8-bit PNG format rather than the usual 32-bit format. To do so, use a program such as Adobe Fireworks (Photoshop does not work for this purpose), save your alpha-tranparent PNG image in 8-bit format, and then include in your design as usual. 8-bit PNGs may not look quite as good as 32-bit versions, but their alpha-transparency degrades gracefully to full index transparency in IE6. This method enables you to employ alpha-transparency in all modern browsers without getting the ugly grey background in IE6.

Of course, it is also possible to enable IE6-support for 32-bit alpha-transparency. There are many different scripts that enable such functionality, but all of them ultimately rely on a proprietary Microsoft AlphaImageLoader filter that may be included in your CSS file as follows:

* html .iepngfix { behavior: url(iepngfix.htc); }

To make this work, you need to upload these two files to the same directory as your CSS file. The first file is a blank gif image, and the second file is an HTC script that provides IE6 (and below) with the functionality required for 32-bit alpha-transparency. This is the most basic implementation of the AlphaImageLoader filter, but more advanced functionality is also possible using a wide variety of freely available scripts. Here are a few of my favorites:

Fix the broken box model

Early versions of Internet Explorer incorrectly interpreted the box model to include borders and padding in the calculation of the content width. For example, consider the following case:

div {
  border: 10px solid black;
  padding: 10px;
  height: 100px;
  width: 100px;
}

In modern browsers, the height and width of this division are each calculated according to W3C specifications as 100px + 20px + 20px = 140px. In early versions of IE, however, the height and width are each calculated improperly as 100px. This discrepency is responsible for many design inconsistencies between standards-compliant browsers and older versions of Internet Explorer.

Fortunately, the broken box model was addressed in IE6, which is capable of rendering proper widths for web pages that include a complete <!DOCTYPE>. When a complete <!DOCTYPE> is present, IE6 switches to either “standards-compliant mode” or “almost-standards-compliant mode,” both of which cause IE6 to correctly interpret the box model. Conversely, when a complete <!DOCTYPE> is not included in a web page, IE6 reverts to “quirks mode” and interprets the box model incorrectly.

Thus, the box-model problem is easily fixed in IE6 by including a complete <!DOCTYPE> and designing in standards-compliant mode. If you need to work in quirks mode, the next easiest fix is to avoid applying padding or borders on elements for which you have specified a width. You can always apply padding and/or margins to the enclosed elements.

Even with these solutions, there may be situations where it is necessary to control the height and width of specific elements. In these cases, we may use the “Tan Hack” to get the job done:

#selector {
  border: 10px solid black;
  padding: 10px;
  height: 100px;
  width: 100px;
}
* html #selector {
  \height: 140px; /* targets IE5 and IE6 in quirks mode */
  he\ight: 100px; /* targets IE6 in standards mode */
  \width: 140px;  /* targets IE5 and IE6 in quirks mode */
  w\idth: 100px;  /* targets IE6 in standards mode */
}

In the first set of rules, we apply our width and height as normal for all standard-compliant browsers. Then, in the second set of rules, we account for the broken box model in IE5 and IE6 quirks mode by adjusting the values for height and width to include the additonal padding and border widths. That’s quite a mouthful, so hopefully the code and comments will clarify the technique.

Fix min-width/max-width and min-height/max-height

Out of the box, IE6 fails to understand maximum and minimum height and width. This is incredibly sad for designers, as many layout scenarios require these properties to function properly. In modern, standards-compliant browsers, we can use the following CSS to acheive our goals:

div.max-height {
  max-height: 333px;
}
div.min-height {
  min-height: 333px;
}
div.max-width {
  max-width: 333px;
}
div.min-width {
  min-width: 333px;
}

Of course, this is waaay tooo easy for Internet Explorer, which completely fails to understand these basic CSS properties. Fortunately, IE supports its own, proprietary expression attribute, which enables us to use JavaScript expressions to manipulate (X)HTML document properties such as max/min-width and max/min-height. For example, to specify a width property value via the expression attribute, we could use this:

div {
  width: expression(333 + "px");
}

..Which is equivalent to this:

div {
  width: 333px;
}

There are two downsides to using IE’s expression attribute. First, as expressions are essentially JavaScript, they fail when JavaScript is disabled (or otherwise missing) in the user’s browser. Second, use of CSS expressions for min/max properties is very resource intensive and may negatively impact browser performance. Nonetheless, the setting of max/min-widths/heights remains an important tool in the web designer’s toolbox. With that in mind, here are some useful CSS expressions enabling complete min/max functionality in IE6.

max-width

/* max-width for IE6 */
* html div.max-width {
  width: expression(document.body.clientWidth > 776 ? "777px" : "auto");
}
/* max-width for standards-compliant browsers */
div.max-width {
  max-width: 777px;
}

min-width

/* min-width for IE6 */
* html div.min-width {
  width: expression(document.body.clientWidth < 334 ? "333px" : "auto");
}
/* min-width for standards-compliant browsers */
div.min-width {
  min-width: 333px;
}

max-height

/* max-height for IE6 */
* html div.max-height {
  height: expression(this.scrollHeight > 332 ? "333px" : "auto");
}
/* max-height for standards-compliant browsers */
div.max-height {
  max-height: 333px;
}

min-height

Fortunately, we can skip the crazy JavaScript/CSS expressions when applying minimum height in IE6. Thanks to Dustin Diaz, we can set min-height in IE6 with this morsel of valid CSS:

/* min-height for IE6 */
div.min-height {
  min-height: 500px;
  height: auto !important;
  height: 500px;
}

Kill the double margin bug

Most web designers who have been designing sites for awhile are familair with IE6’s “doubled floated-margin bug.” This nasty bug rears its ugly head whenever you float an element (such as a <div>) in one direction and then apply a margin in that same direction. For example, if we do this:

div {
  float: right;
  margin-right: 10px;
}

..IE6 will (usually) double the size of the margin to 20px for no apparent reason whatsoever. Needless to say, this double-margin bug has wrecked many a fine web design, causing much pain and distress along the way.

Fortunately, this bug is easy to kill. Simply change the display type of the floated element from block to inline, like so:

div#selector {
  float: right;
  margin-right: 10px;
}
* html div#selector {
  display: inline; /* kill double-margin bug */
}

This solves the double-margin bug 99% of the time without issue. For those rare, unexplainable cases where this fix doesn’t work, you may need to workaround the issue by removing the margin and applying padding to either the parent element or to the floated element itself.

Clear your floats

Clearing floats is another common layout challenge, not only for IE6, but for many modern browsers. In a perfect world, an element that contains a floated element enlcoses that element entirely. In the imperfect world of web browsers, however, floats are frequently not entirely closed. When this happens, we say that the floated element has not been “cleared” by its parent element. Fortunately, there are several easy ways to clear your floats in IE6 and other browsers as well.

One of the oldest ways to clear your floats is to use the clearfix hack. This CSS technique works by generating content after the parent element using the CSS :after pseudo-class. The generated content then serves to clear the floated element. Here is a typical example:

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix { display: block; }
/* End hide from IE-mac */

To use this method to clear your floats, place it into your CSS file and change all instances of .clearfix to the selector of the element that needs to clear its floated ancestors.

Another CSS method of clearing your floats is to simply float the container element. For example, if you float an image within a container <div> that fails to enclose it, simply apply the following CSS:

div {
  float: left;
}

Then, if the containing element needs to behave as a regular block element, apply a width of 100% to force a line-break before the next element:

div {
  float: left;
  width: 100%;
}

So far so good, but there is an even better method of clearing your floats. By simply applying an overflow value to the container <div>, it will automatically expand vertically and clear its floated children. Here is an example:

div.container {
  overflow: hidden;
  width: 100%;
}

The width declaration is required for Internet Explorer and Opera, but it doesn’t need to be set at 100%; rather, you may use any width and unit of measure that is needed. If you don’t want to specify a width, you may specify a height instead. For the overflow property, you may use any of the following three values:

auto - display scrollbars if content exceeds specified width
hidden - never display scrollbars even if content exceeds width
scroll - always display scrollbars, even if they’re not necessary

As well as this method works for clearing floated elements, there are cases where the overflow property can interfere with other aspects of the design. If this should occur, you may want to try limiting the scope of the overflow by using overflow-x:hidden; or overflow-y:hidden;. And remember, the width property may be replaced by height.

Fix other common IE6 problems

Wrapping things up, let’s run through a few other problems commonly experienced with IE6. These issues and their corresponding fixes are fairly straightforward, so I will spare you the lengthy diatribe and jump straight to the point. Keep in mind as you continue through this article that you should relocate and consolidate any IE6-specific hacks into an IE6-specific stylesheet, which should be included via conditional comments (see first section, above).

Fix relative positioning

Using position:relative in your designs is perhaps the easiest way to mess things up in IE6. Modern browsers display relatively positioned nested elements without issue, but IE6 frequently chokes up on even slightly complicated layouts. Fortunately, the solution is as easy as triggering hasLayout by adding zoom:1; to each relatively positioned element:

.selector {
  position: relative;
}
* html .selector {
  zoom: 1;
}

Note that you should not apply zoom:1; to any inline elements. Doing so will cause IE6 to treat them as block elements. Keep this in mind for the following solutions as well.

Fix negative margins

Negative margins are useful in a variety of scenarios, and most browsers handle them with no problem whatsoever. Unfortunately, IE6 doesn’t like negative margins unless you apply relative positioning to the target element:

.selector {
  margin: -1.5em;
}
* html .selector {
  position: relative;
  zoom: 1;
}

Note the addition of the zoom:1; declaration, which is required because of the relative positioning. Ain’t IE great?

Fix overflow problems

Using the overflow in IE6 will sometimes lead to unexpected, unexplainable display issues. Fortunately, we can resolve many overflow-related display problems by triggering hasLayout via — yep, you guessed it — zoom:1;. Here is an example:

.selector {
  overflow: hidden
}
* html .selector {
  zoom: 1;
}

Another strange overflow-related issue is observed when font-style:italic; expands the width of its parent element. Thankfully, this nuance is easily resolved by applying the following CSS to the parent element:

* html .selector {
  overflow-x: hidden;
}

Line up floated elements

When you float elements of a fixed width, they will align themselves horizontally to fit the width of the parent element. At least, that’s how it works in most browsers. In IE6, the floated items will not be displayed in a straight line, but rather will appear to stepdown in bizarre, staircase-like fashion. Fortunately, there are two ways to fix this issue. The first is to apply a line-height:0; declaration to the parent element:

.selector {
  float: left;
  width: 100px;
  clear: none;
}
* html .selector {
  line-height: 0;
}

Alternately, you may prevent stepdown by applying a display:inline; declaration to the floated elements:

.selector {
  float: left;
  width: 100px;
  clear: none;
}
* html .selector {
  display: inline;
}

Fix your list items

Lastly, if IE6 decides to add an extra set of list items (<li>) after your list (<ul>), adding an HTML comment has been known to magically resolve the issue. Here is what your source code will look like before and after applying the fix:

Before:

<ul>
  <li>Firefox</li>
  <li>Opera</li>
  <li>Safari</li>
  <li>Internet Explorer</li>
  </ul>
<li>Internet Explorer</li>
<li>Internet Explorer</li>

After:

<ul>
  <li>Firefox</li>
  <li>Opera</li>
  <li>Safari</li>
  <li>Internet Explorer</li>
  <-- IE6 fix -->
</ul>

In Closing

With the CSS tricks described in this article, you are well-equipped to tame the IE6 beast and get it to behave when displaying your web pages. When it’s time to make your next design compatible with IE6, refer to this definitive guide for clear explanations and solutions for the most common IE6 issues. And of course, if you’ve got more tricks, ideas, comments, or questions, be sure to sound off in the comments section!

About the Author

Jeff Starr is a web-developing, graphic-designing alien from the distant planet Perishable Press. When he’s not flying through hyperspace, Jeff uses his alien powers to write amazing stuff about WordPress and design awesome websites for humans. Jeff comes in peace, so don’t be afraid to follow him on Twitter.

25 Elegant Workstations for Your Inspiration

Wed, 22 Jul 2009 12:07:12 -0700

Whether you work on a Mac, a PC, or both - the way your workstation is set up reveals a lot about your sense of style and work attitude. Have a comfortable place where you can do your work can lead to increased creativity and productivity.

This collection presents some excellent examples of elegant, beautiful, cozy, and well-designed workspaces so that you might get some ideas and inspiration from them.

1. Workspace by Hey Brad

2. Foto de Familia: iMac, Macbook, Macbook Pro & Macbook Air

3. CodyRS Mac Setup

4. 2 Apple Cinema Displays and Macbook Pro

5. Apple Fanboy? by sandercw

6. SonyLand by Uberrob

7. Triple monitor setup by tigersharkbas

8. Battlefan’s Workspace

9. Justin Griswold’s Desk

10. Simbe90 Desk Setup

11. Workspace 2.1 by Yves Huy Truong

12. Current workspace setup by Rodrigo Haenggi

13. iMac and MacBook

14. Mr billiam’s Desk

15. 2 Apple Cinema Displays and Macbook Pro by Psleda

16. Work space, games space

17. The Newness

18. Stage C at Novastar Post in Hollywood, CA

19. May ‘09 Desktop by Psleda

20. 9920 x 1600 pixels

21. David Bosman’s Workspace

22. Workspace by No Robotocha!

23. Home Office by SeanOsteen

24. Setup by Austin Grade

25. My Rig: 2009 Edition by FlySi

Show us your own workstations

Do you have a photo of your workspace? Why don’t you show it off to us by linking to it in the comments!

Tomas Laurinavičius is interested in web design, graphic design and web development, based in Lithuania. He’s also the founder of Iniwoo, a site about photoshop, web design, wordpress and inspiration. If you’d like to connect with him, you can follow him on Twitter.

How to Increase Sign-ups by 200%

Tue, 21 Jul 2009 03:20:20 -0700

When I had coffee with Jason Fried of 37signals after FOWA Miami, I asked him if he had learned anything about A/B testing that they hadn’t blogged about. And wow, did he have an amazing little tip to share …

Four Amazing Words

He said that they tested various phrases on the Highrise homepage for the call-to-action button. They originally had used various permutations of “Free Trial” and “Sign-up for Free Trial”. Then they tested the phrase:

“See Plans and Pricing”

This resulted in a 200% increase in sign-ups. That’s right. 200%.

He believes it’s because people are afraid if they click a link that says “Free Trial” then they’ll somehow automatically signup for something and be trapped. However, “See Plans and Pricing” encouraged them to explore, without the fear of commitment.

If that isn’t a case for conducting A/B Testing, then I don’t know what is.

Using jQuery To Manipulate and Filter Data

Mon, 20 Jul 2009 07:28:18 -0700

When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. In this article, I will go over four techniques: hover effects, zebra rows, filtering, and sorting.

Setting Up The Tables

There are some important notes we must address before looking at our Javascript code. The HTML table markup will be like any other table you may have created, except we
require two tags that many people omit. The head section of the table must be wrapped in . The body of the
table, where all the data we want to display is kept, must be wrapped in . This little caveat will make it easier for us to distinguish
between the data and table headers.

     ...                  First Name        Last Name        City        State      
   
               Mannix        Bolton

First Name	Last Name	City	State
Mannix	Bolton

Zebra Rows

Zebra Rows are a very common data organization technique that are both easy to implement and have a powerful impact. Zebra Rows in
essence is alternating the style of odd and even rows to make the data easier to read horizontally. This is highly important with
multi-column data so that users can look at one column and easily read the associated data on the same row under other headers. In the
examples that I will be using through out this tutorial, I have a list of people with four properties: first name, last name, city, and
state. Notice how I have the row colors alternating as well as font color to maximize the effect.

Now on to the actual Zebra Rows. The first place to start is an external CSS file linked to the document. The first element to
target is the table.

table {
  background-color: white;
  width: 100%;
}

This is fairly trivial; we are telling the table background to be white, and to stretch to 100% of the parent element’s width. Next we will target
the cell elements . Now this might seem odd to some — why would we target the cells, and not the entire row? Well it turns out that, in
terms of cross-browser adoption, it is more effective to target cells when applying background styles.

tbody td {
  background-color: white;
}
tbody td.odd {
  background-color: #666;
  color: white;
}

Here we are setting up a class for the “odd” table rows that sets an alternate background-color and font-color. We also set a default style for all td
elements which will inherently apply to the “even” rows. This is all the CSS that is required. I told you it was simple! Now let’s look at the jQuery code. The
power of jQuery selectors makes this just as easy as the CSS code. All we need to do is target the cells and use the addClassName function.

$(document).ready(function() {
  zebraRows('tbody tr:odd td', 'odd');
});

//used to apply alternating row styles
function zebraRows(selector, className)
{
  $(selector).removeClass(className).addClass(className);
}

This code, while short, has a few gotchas to consider. First off notice how we abstracted the implementation to a function; this is ideal because if we change the
data in the table asynchronously, without a page refresh, then we will want to assure the rows are still alternating style. For the same reason we also invoke the
removeClass function so that if a row is initially odd, but becomes even, we are assured that the odd class definition does not remain. This may seem confusing right now,
but when we look at filtering later on this will become more clear. For the sake of reusable code we also require that the selector and class name are passed to
the function — so it can be used in projects that have different class names or selector requirements (i.e. a site that has multiple tables only one of
which you wish to target). If you review the ready() function, a jQuery function executed when the page is
finished loading, you’ll see our call to zebraRows(). Here is where we pass in the selector and class name. The selector uses a special jQuery syntax
:odd, which will find all odd rows. Then we look for all the child elements of the row that are cells. This code
is fairly simple for anyone who has used jQuery previously, but the simplicity should make the code fairly readable to anyone.

Note: While using jQuery to apply alternating row colors is a simple solution, it is not degradable if a user has JavaScript disabled. I would
recommend applying the odd class on the server either in PHP code or the static HTML, though this is beyond the scope of this article.

Hover Effect

A really nice effect for users is to highlight the row they are currently hovering upon. This is a great way to single out specific data that they might be interested
in. This is dead simple to implement using jQuery, but first a little CSS.

...
td.hovered {
  background-color: lightblue;
  color: #666;
}
...

This is all the CSS we need, basically when we hover over a row, we want to make all the cells in that row have a light blue background and a grey font color. The
jQuery to make this happen is just as simple.

...
$('tbody tr').hover(function(){
  $(this).find('td').addClass('hovered');
}, function(){
  $(this).find('td').removeClass('hovered');
});
...

We are making use of the hover() function in the jQuery library. It takes two arguments that are
functions we want executed when the mouse hovers over and when the mouse moves off the element, respectively. When they hover over a row we want to find all
the cells within the row and add the hovered class to them. When the mouse leaves the element we want to then remove that class. This is all we have to do to
get the hover effect, go try it out!

Filtering Data

Now the meaty stuff - actually manipulating the data that is shown. If a website calls for many records of data to be displayed, in my example 1000 rows, then it
is more than appropriate to offer the user a way to sift through the data. One particularly effective way that has sprung up on the web in recent years as part of
the Web2.0/AJAX movement is filtering. This is also something that Apple pushes heavily in there applications such as iTunes. The goal for us is to allow the user
to type a search query into a standard text input and live filter the table rows below only showing the ones that contain matching text. This is arguably more
advanced then the alternating row styles, but in all reality requires minimal code, due to jQuery’s built-in functionality.

First we will write a generic function that takes a selector and a string of text. This function will then search all elements matching that selector looking for
the string. If it finds the string, it will show the element and apply a class name of visible to the element, otherwise it hide the element. Why are we applying
the class of visible? Well once the items are sorted we will want to run the zebraRows function again, but we need to tell jQuery to ignore the hidden rows, and
the best way I have found to do that is apply a class of visible.

The actual searching is done by the JavaScript function, aptly named, search(). Though due to the way the DOM works, if we don’t employ the jQuery function,
text(), the box will also look at any HTML tags that happen to be in the table row, such as . We
will employ a little more functionality by not just searching for the exact string the user has typed, but rather if any of the words in the query are in a row.
This is ideal because it allows for “lazy searching”, the user isn’t required to remember an exact string but rather just parts of it. The search() function takes
a regular expression as its parameter, and so we must strip all white space from the beginning and end of our query and put “|” characters in between each word to
achieve the OR functionality we desire. Regular expressions are a very complicated topic, and so you will have to take my code at face value or I can refer you to
the Regular Expressions for Dummies video series on the ThemeForest blog.

//filter results based on query
function filter(selector, query) {
  query	=	$.trim(query); //trim white space
  query = query.replace(/ /gi, '|'); //add OR for regex query

  $(selector).each(function() {
    ($(this).text().search(new RegExp(query, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible');
  });
}

The sixth line is where the magic happens, and probably requires a bit of explanation. Starting at line 5, we are telling the code to loop through all the elements
that match the selector, i.e. the rows, and then we want to execute the code on line 6 using each one. Line 6 is a bit complicated if you are new to programming,
but it is fairly easy to grasp if we split it up. Think of everything before the question mark as being a question, if the answer to that question is true then
execute the code to the left of the colon, but after the question mark. If the answer is false then execute the code after the colon. This is essentially an if
statement but in a more concise form known as a ternary operator, and would be no different than writing:

...
  if ($(this).text().search(new RegExp(query, "i")) < 0) {
    $(this).hide().removeClass('visible')
  } else {
   $(this).show().addClass('visible');
  }
...

The reason we ask if search() returns “< 0" is because it returns the position in the string where query is, and -1 if nothing is matched. Because -1 is always
less than zero, we test that condition. In theory there is nothing wrong with checking if it returns (==) -1, but it in practice it is safer to just assure it is
less than zero.

Alright now that we have a complete filter function, let’s use jQuery events to hook it up to the input. To achieve the live effect we desire the event we want to
watch for is when user releases a key while they are focused on the text box, known as keyup in JavaScript. It is important that we set the ID attribute of the
input so we can target it using jQuery. Back in our ready function we need to add code after our call to zebraRows().

      Filter

And the jQuery code:

...
  //default each row to visible
  $('tbody tr').addClass('visible');

  $('#filter').keyup(function(event) {
    //if esc is pressed or nothing is entered
    if (event.keyCode == 27 || $(this).val() == '') {
      //if esc is pressed we want to clear the value of search box
      $(this).val('');

      //we want each row to be visible because if nothing
      //is entered then all rows are matched.
      $('tbody tr').removeClass('visible').show().addClass('visible');
    }

    //if there is text, lets filter
    else {
      filter('tbody tr', $(this).val());
    }

    //reapply zebra rows
    $('.visible td').removeClass('odd');
    zebraRows('.visible:odd td', 'odd');
...

This code is by far the most complex we have seen thus far so we will step through it line by line.

Starting at the addClass(’visible’) line we are adding a class
of visible to each row, because by default they are all visible.
The next line is your standard selector, which in my case is targeting my filter text box and says
each time a key is released to execute the following function. Notice that we pass in a parameter called event which has various information about what the user
just did, like the key they pressed.
Consequently, the next line of code uses that event parameter, we have an if statement that is checking if the user pressed
the esc key. It is important to note that each key is mapped to a number and that is how our code can determine which key the user pressed. This is a nice feature
so that users can easily cancel the filter and see all the data again. Many applications with filter boxes utilize this sort
of feature, and we want to be sure our application stays inline with what is expected.
In this same if statement we are also taking care of the special case when
the value of the filter box is empty (they just hit backspace to remove all characters). In this case we want the user to see all the rows which seems obvious, but
we have to explicitly provide for this because
the filter function we wrote earlier would look for a row that has no contents and we will hide all the rows that have any content, the exact opposite of what we
want!
If either of these conditions are met we want to set the value of the filter box to blank if they pressed esc, it is also executed if the value is blank
which doesn’t really matter to us.
Next we show all the rows as we wanted to and add a class of visible to all of them. Again we are using the safe practice of
first removing any lingering visible class declarations to avoid double setting it. If the value of the filter box is neither empty and the user didn’t press
escape we want to actually filter the rows.
So after the else statement we call our filter function from earlier providing the rows in our table body to query
against.
Finally after we have hidden and shown the appropriate rows, we want to reapply zebraRows to the remaining visible rows. First we remove any lingering
odd class declarations to take care of the cases where a row was odd and becomes even. The call to zebraRows is the exact same as the first one on page load,
except we only care about the ones that are currently visible and odd.

Note: A good note might be to use CSS to hide the filter box, and right above the keyup call to show it, so users with JavaScript disabled are not
confused when they attempt to sort the data, this would look like:

style.css

...
#filter { display: none; }
...

application.js

...
$('#filter').show();
...

Wow that was a lot of code, feel free to take a tea/coffee break before we move on to sorting…

Column Sorting

Alright all ready? Good, lets go!

As the final task, we are going to allow sorting the table by any of the column headers. This is very standard practice that users anticipate known as click to sort.
When the user clicks one of the headers we want to sort the table ascending and if they click again we want to sort descending by that column. This code is quite
advanced and not for the faint at heart. The initial concept came from
Learning jQuery 1.3. I
have re-engineered it to better fit our needs of simplicity though, however if you desire more fine grain control I will refer you to chapter 7 of the book where
tables and jQuery are discussed in great detail.

Before we really dive into the actual code it is important that we discuss the concept of how we plan to tackle this problem. We will use JavaScript’s internal
sort() method that is designed to take an array and sort it
using a custom function supplied by the code. In our case we simply want to sort alphabetically and numerically, so we will just compare the two items it supplies
and return which order the two should go in based on that design. Because we want to sort both ascending and descending, we will use a CSS class declaration to see
what the current state of the sort by that column is and reverse it if necessary. Once we have our array in order we will use the order to re-insert the rows
into the table one-by-one. This sounds like a lot, but because of how blazing fast JavaScript is, it will be very seamless to the user. All of
this will be tied to the click event of the column headers in the table.

As per usual, let’s get the CSS code out of the way, as it is the most straightforward.

th.sortable {
	color: #666;
	cursor: pointer;
	text-decoration: underline;
}
th.sortable:hover { color: black; }
th.sorted-asc, th.sorted-desc  { color: black; }

All of our sortable headers will have a class of sortable, and the hover modifier in CSS makes it emulate a hyperlink for users. We also are taking advantage of
the CSS class we mentioned about sorted-asc and sorted-desc so that we can show the user the current column that is sorting the table. I didn’t include it but
this would be a good place to put background images of arrows pointing up and down as a further visual cue to the user. Now we move on the JavaScript code and the
complexity of sorting, thankfully made easier with jQuery. The code below belongs in the ready() function we started way back at the beginning. Placing this right
above the end of the function is best.

//grab all header rows
$('thead th').each(function(column) {
  $(this).addClass('sortable').click(function(){
    var findSortKey = function($cell) {
      return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase();
    };
    var sortDirection = $(this).is('.sorted-asc') ? -1 : 1;

    //step back up the tree and get the rows with data
    //for sorting
    var $rows = $(this).parent().parent().parent().find('tbody tr').get();

    //loop through all the rows and find
    $.each($rows, function(index, row) {
      row.sortKey = findSortKey($(row).children('td').eq(column));
    });

    //compare and sort the rows alphabetically
    $rows.sort(function(a, b) {
    	if (a.sortKey < b.sortKey) return -sortDirection;
    	if (a.sortKey > b.sortKey) return sortDirection;
    	return 0;
    });

    //add the rows in the correct order to the bottom of the table
    $.each($rows, function(index, row) {
    	$('tbody').append(row);
    	row.sortKey = null;
    });

    //identify the column sort order
    $('th').removeClass('sorted-asc sorted-desc');
    var $sortHead = $('th').filter(':nth-child(' + (column + 1) + ')');
    sortDirection == 1 ? $sortHead.addClass('sorted-asc') : $sortHead.addClass('sorted-desc');

    //identify the column to be sorted by
    $('td').removeClass('sorted')
    			.filter(':nth-child(' + (column + 1) + ')')
    			.addClass('sorted');

    $('.visible td').removeClass('odd');
    zebraRows('.visible:even td', 'odd');
  });
});

Woo, that is a lot of code. Let’s break that down into sizable bits. The first bit of code is grabbing all the headers and looping through them. The first thing
it does is add a class of of sortable, and starts to the click bind.

...
//grab all header rows
$('thead th').each(function(column) {
  $(this).addClass('sortable').click(function(){
...

Note that this can easily be changed to allow only certain columns to be sortable by removing the addClass() call and changing the selector from ‘thead th’ to
something like ‘thead th.sortable’. Of course this requires you to manually specify which of your columns are sortable by adding class=”sortable” to the
appropriate headers in the HTML code.

The next bit of code is a function declaration tied to a variable. This might seem a bit weird to those unfamiliar to programming, but it is common practice. This
allows us to easily reference the function specifically in the context of the header we are working on. That explanation probably is a bit confusing, but the
precise reasoning kind of oversteps the scope of this article. The point of the findSortKey function is determine which column we are sorting by, we can do this
because we know the element they clicked on is the same index in the table for all the columns we will compare. For instance if they click the third header we
want to look at the third column of each row to compare what order to place the rows. After we declare this function we then determine the sort order, ascending
or descending. This is done by looking for the class name of ’sorted-asc’ in the table header if it is there we know that it is currently sorted as ascending and
we need to make descending, otherwise use the default of ascending. This takes care of the case where it is descending and we need to make it ascending again.
This bit of code returns 1 or -1, we will explain why later.

...
var findSortKey = function($cell) {
  return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase();
};
var sortDirection = $(this).is('.sorted-asc') ? -1 : 1;
...

Now we want to get that specific column from each row and put it in an array, this is done using the jQuery method of
get() which takes the rows and puts them in an array which the sort() function can understand. Because the current
selector was the table head we have to step back up the DOM tree 3 places to find table>tbody>tr>td. Seems a little complex, but in reality it is simple. After
that we loop through each of the rows we just found and find the column we want to using in sorting. This is done by checking if its index (the number of places
starting at 0 from the first column in the table) is equal to the index of the clicked header. This is then passed into the findSortKey function so we can
then set a custom attribute called sortKey that contains the column header we are sorting by and the text of the current column we are looking both of which are
set to uppercase so the sort is case-insensitive. This is a way we streamline the sorting so that we make it more responsive for large amounts of data.

...
    //for sorting
    var $rows = $(this).parent().parent().parent().find('tbody tr').get();

    //loop through all the rows and find
    $.each($rows, function(index, row) {
      row.sortKey = findSortKey($(row).children('td').eq(column));
    });
...

Next comes the actual sort() function that I have been going on about. This is called on the array of rows we created using get(). The only parameter we pass is the
function we want to determine the sorting. That function receives two attributes to compare and returns 1 if the first is greater, -1 if the second is great, and 0
if they are equal. This is where the sortDirection variable comes into play because the way it works is that we set 1 or -1 to it and then multiply either the
1 or -1 the function should return by sortDirection, achieving the ascending/descending affect we desire.

...
//compare and sort the rows alphabetically
$rows.sort(function(a, b) {
	if (a.sortKey < b.sortKey) return -sortDirection;
	if (a.sortKey > b.sortKey) return sortDirection;
	return 0;
});
...

The next bit of code simply adds each row from the now sorted array back into the DOM structure. This is done with the append function which is nice because it
does not copy the row and place it at the end it actually removes it from the current place in the DOM and places where we tell it, in this case at the end of the
table. After it has done this for each element in the array it will have moved each row to its new place. Also to do a bit of cleanup we remove the sortKey
attribute we set earlier.

...
//add the rows in the correct order to the bottom of the table
$.each($rows, function(index, row) {
	$('tbody').append(row);
	row.sortKey = null;
});
...

We are now moving in to the cleanup stage of our function since all the heavy lifting has been done. Next we grab all the cells in the table body, remove any
lingering sorted attributes in the class declarations, and then filter out all but the columns that are the same index as our sorted header and apply the ’sorted’
class to them. This is nice for CSS targeting if for instance we wanted to make the column we sort by a different color we could declare this CSS:

...
.sorted { background-color: green; }
...

The final thing we do is remove any ‘odd’ CSS declarations and reapply the Zebra Rows just like we did in the filter part.

...
$('.visible td').removeClass('odd');
zebraRows('.visible:even td', 'odd');
...

That is how we do very simple sorting. It is important to note that this will only sort items alphabetically or numerically and does not work with dates or currency
for instance. That requires more specialized handling that is beyond our goals of simple table manipulation.

Wrap Up

In this article, we learned how to roll our own table manipulation code using jQuery. This is
very convenient for both the user and us. The user gets the expected controls for sorting and filtering the data and we have code that is both small and easy to
understand. Because we wrote this ourselves, we can now extend it in our own ways. Our method is great for simple manipulation, but if you require the kitchen sink, I recommend taking a look at the
Data Tables plugin for jQuery. I’d love to answer any questions in the comments or on Twitter
(@noahendrix). Thanks for reading!

10 Steps to Advanced Keyword Research

Mon, 20 Jul 2009 06:07:35 -0700

Posted by randfish

Some keyword research is surface-level, fire and forget type stuff. If you just need to see relative volume levels, then a basic keyword research tool is all you need. If, however, you want to really dive deep and get the full skinny on your keywords, I'd recommend having each of these data points.

#1 - Relative Search Volume from 3 Sources

There are three sources on the web that I've found to work best for comparative numbers research. These are:

Google Adwords: Keyword Tool - enter any term or phrase and get back data about both the average search volume and the volume from the previous month.
MSN AdCenter: Research Keywords Tool - you need to be logged in to use this, but the data is solid and shows actual counts.
Wordtracker: Keyword Tool - although the numbers Wordtracker shows are frequently less accurate than the two above, they are reasonably decent for estimating comparative search volume. Unfortunately, due to the declining share of Wordtracker's data sources (the Infospace owned search engines - Metacrawler, Dogpile, DoGreatGood, etc.), niche and long tail term volume estimates can be way off.

Here's why I don't use Yahoo!:

From there, rather than build a spreadsheet just showing raw numbers, I like to work in comparative sizes (the real numbers rarely prove accurate anyway). Thus, rather than having a graph of data like this:

I can have one like this:

Note how, in this view, I'm showing the relative volume percentage of the demand for keyword "SEO" made up by "seo services" and "seo tools." This graph tells me that while Google thinks "seo tools" and "seo services" are tiny fractions of the volume that comes in for the broad term, "SEO," Microsoft & Wordtracker both say these phrases make up a more substantive percentage. Since keyword targeting is really about choosing one keyword over another and much less about trying to estimate exact traffic, the latter system makes much more sense to me.

#2 - Temporal Fluctuations

When are your queries in highest demand? Knowing the answer can help you predict when competition may ramp up and additional SEO efforts are needed as well as provide insight into your market overall (if demand has been dropping steadily over the last few years, you might want to target some different terms, or even shift product focus). Two sources of data are solid on this front:

Google Trends for Keywords

MSN AdCenter Labs: Keyword Forecast Tool

#3 - Top Ranking Domains

In order to get a full understanding of the competitive landscape, it's essential to know who's ranking for the terms you're targeting. A basic query is a great start, but I like to append those with a bit of extra data, as I've visualized below:

Those three are my favorite pieces of link data to append, not because they alone are predictive of rankings, but because the range so perfectly illustrates what's necessary, on both the URL and domain level to be competitive. Nick's been pushing hard to get this functionality automatically included with the SEOmoz Toolbar, so hopefully we can make that happen in the next few months.

#4 - Fresh Web (News, Blogosphere, Tweetosphere) Activity

The fresh web (aka social media sphere) can help to show how often keywords are appearing in content and conversation in blogs, forums, feeds and more. It's particularly valuable for identifying emerging trends which may not yet have search volume (but will if the conversational content acceleration continues). There's a few tools I like on this front:

Facebook Lexicon

There appears to be some correlation between "party tonight" on Friday and "hangover" on Saturday

Twist: See Trends in Twitter

Blogscape

Google News Trends

I'd love to see some of those 19th century SEO tools!

The real value (and reason for spending time in these sectors) is to:

A) Identify patterns or trends indicating a keyword/product/concept is on the rise/fall
B) Find content that in the past has attracted large amounts of attention around these keywords (an excellent starting point for viral content development)
C) Locate portals on the web or in social communities where your topic may be hot, and opportunities for promotion or links exist

They're not universally valuable for every part of keyword research, and you shouldn't trust the volumes to predict keyword demand (some things get written about more than they get searched), but a good SEO leaves no opportunity un-investigated.

#5 - Vertical Results (and Vertical Opportunities)

It's wise to be aware of where and how your keywords can cross over into vertical search results. The best way to do this currently is, unfortunately, manually. You'll want to:

Search for your target terms at the major search engines
Identify any vertical results that appears in the top 10-20 listings
Employ strategies to reach into the applicable verticals

The most common and highest value are typically:

Local
Product
News
Images
Blog
Video

#6 - Searcher Intent

What are the goals of the individuals searching for your targeted keywords? What phase of the decision process are they in? Answering these questions can give you an excellent idea of the potential ROI from drawing in traffic on a given term/phrase. Many times the highest volume keywords are not bringing in the best traffic.

Some good resources on this front include:

Segmenting Searcher Intent - from SEOmoz
Two Part Series on Intent Targeting - from Jon Mendez
- A) Targeting the Two Intentions of Users
- B) How Brand, Product & Community Influence Intention
Understanding User Data to Measure Searcher Intent - from SearchEngineLand
MSN AdCenter Labs also has their Online Commercial Intention Tool which predicts, based on activity, whether a keyword is commercial or informational in intent

Your goal should be to narrow down the potential tasks a visitor who has just performed the query wants to accomplish. This can dramatically boost your site's performance when coupled with delivery of those paths upon arrival.

#7 - Potential Relevance

The best way to determine the relevance between a keyword and the content/service/product you offer is to test. Run a PPC campaign or dig into your analytics and choose only those visitors that have come via the search query. Pull out data like browse rate, time spent on site, conversions, etc.

The majority of visits who come into SEOmoz for the keyword "SEO Blog" stick around to read at least a couple of pages

Relevance is highly actionable data because it does such a good job predicting which keywords are going to bring valuable traffic. While branded terms often perform highly (and are typically easy to rank well on), longer tail and more specific queries also have this tendency to be more relevant (and, again, are easier to achieve).

#8 - PPC Advertising Data

Even if you're not planning on bidding for keywords through paid search campaigns, it's wise to know what the competition is doing and how much value they're getting from it (and what they're willing to pay). A few good resources for this information include:

MSN AdCenter's Keyword Estimate

I really like what AdCenter does with this spiffy graph - showing the cost and estimated clicks in an easy-to-read graphic. Just remember that MSN is the engine with the fewest advertisers, which often means pricing is less aggressive than on Google or Yahoo!

Google AdWords Traffic Estimator

I'm a bit less fond of Google's standard take on the data, but their pricing is the gold standard, as AdWords has the highest number of advertisers and the most traffic by far.

SEMRush

A solid tool with a lot of uses, particularly for competitive keyword analysis, SEMRush shows some decent numbers around the average CPC and competition levels for most keywords at the head of the demand curve.

Take the cost-per-click data and competition levels into account when you're considering things like relevance, potential conversion rates and visitor value. Most companies aren't dumb - if they're bidding high dollar values for potential visits, they're converting those visits into dollars and that means you can both learn from them and find strategies to outperform.

#9 - Top Related Queries

Related queries is an easy metric to understand - you want to know what other terms searchers who used these keywords also employed. It's a no-brainer to then add these to your list of potential keyword targets. Many good sources for this data exist:

Google shows related searches in both their AdWords Tool and through web search (you'll want to click the "show options" link at the top followed by the "related searches" link in the sidebar)
Bing, Microsoft's new engine, shows related searches by default in their web search interface
Yahoo! Search has their "also try" list and clicking "more" will give you an interface just below the search box that finds lots of great, relevant keywords
The aforementioned SEMRush shows great data on this (though you'll need to sift through as there can be a lot of junk) if you're a paying member
Compete.com's Search Analytics has good information by query and website, though you'll need to subscribe to their service to get the full value

Get the related queries, dig into the data about them and target those that have enough volume and relevance to help you get increase valuable traffic from SEO.

#10 - Legal Issues

Last, and probably least in most cases, it's wise to do some research into the legalities surrounding the keywords you'd like to target. Using trademarked terms and phrases on your site can cause attorney trouble, and no one likes that. The place to start, at least in the United States, is here - USPTO Trademark Electronic Search System.

Whew... That's a lot of work for keyword research - now you can see why some firms charge hundreds of dollars per hour for this type of deep dive. Put these recommendations to good use, though, and you'll have an impressive set of terms to target - and that can be a serious competitive advantage.

I've undoubtedly left out a few metrics and, as always, appreciate any ideas or suggestions you've got on this topic.

Do you like this post? Yes No

Wallpaper of the Week #58 - Lustix

Sun, 19 Jul 2009 12:00:21 -0700

The wallpaper of this week is from a motion design and illustrator Gabriel Pulecio, also known as Lustix. With a very impressive portfolio Gabriel has done some works for Adobe, Mercedez Benz, Fuse and others.

For more information visit Lustix's website at http://www.lustix.com/

Desktop Version

iPhone Version

Resolutions:

About the author

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

20 Stunning Illustrations of Surreal Female Characters

Sat, 18 Jul 2009 12:31:53 -0700

Artists and illustrators often display their artwork in the hopes of not only showing their abilities and skills, but also to inspire creativity amongst its viewers.

In this showcase, you will witness a wide range of creative styles, featuring female characters as the subject, by some of the world’s most talented illustrators, artists, and designers.

1. Sadness by Tang Yuehui

2. Pink Sugar by Olivier Ponsonnet

3. Boudicca 3060 A.D. by John Kearney

4. sweet as candy by Neville Dsouza

5. Floating by Sue Marino

6. Anna Marie by Michel Victor Oliveira

7. The magic light by Natsuki-3

8. Cookies (part of the Painting I collection) by Antoine Helbert

9. Character by Richard Wright

10. Beautiful lilac by Tang Yuehui

11. Strange Autumn by Maria Alaeva

12. Queen Triffidia by John Kearney

13. Fiery birds by Maria Alaeva

14. Karina’s Familiar by Sue Marino

15. Open Green by Andrius Balciunas

16. Morgan le Fay by Diane Ozdamar

17. Tomb Raider by Mike Thompson

18. Pandora by Marta Dahlig

19. Biker Eyes by Andrea Bertaccini

20. Submergence by Daniel Conway

Which one is your favorite illustration?

Which one among this collection inspires you the most and why? Do you have other favorites not mentioned here? Share it with us in the comments!

About the Author

Lilian Ostropel is a freelancer in search of online perfection. His passion for quality, in terms of usability and content, speaks for itself when you take a closer look at Photos-room and Wallpapers-room.

Best of the Week #74

Sat, 18 Jul 2009 12:04:30 -0700

It's time to our best news of this week. We have a lot of graphic and web, a bit of architecture, Ads, tech news, awesome reads and other crazy stuffs! So take a look on the links we've selected for your inspiration and to keep you updated about what is going on out there!

We want to give a big thanks to our sponsors:
Wix, WooThemes, DreamTemplate, W3-Markup, PSD2HTML, Harvest, VectorStock™, LightCMS, SiteGrinder, SPLASHnology and Shutterstock. A special mention to Media Temple for the excellent service and support with Abduzeedo!

You can send me your suggestions via Twitter twitter.com/FabianoMe or twitter.com/abduzeedo, and include #abdz_best in the message.

About the author

I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.

Reader Tutorial: 16bits Vector Style Illustration

Sat, 18 Jul 2009 06:10:22 -0700

Mario! everyday he saves the princess! Between some enthusiasts he is a great hero, outside and inside the gamers world, he is one of my favorite characters, so I decided to show how to vectorize a Mario from super nes with illustrator. The same process can be used for any other game or character.

What you will need?

- A Super Nintendo emulator called Snes9x - Download it here
- A rom from Super Mario World - Download it here
- Photoshop and Illustrator, in this case I used CS4
- A hot chocolate mug if it's cold, and in case it's hot, lots of coke

What you will get?

Step 1

Ok, let's open our emulator. Click at the snes9x icon to start the game. Click at File/Load Game or simply ctrl+O.

Step 2

Go to the place where you saved the rom of the SMW to run the game and then you need to Open a room (or two clicks). If everything goes right, you will see nintendo's logo and the game will begin.

Step 3

Now you need to capture de screen image (print screen) to get our Mario. Then past it at photoshop.

Step 4

Now, with the crop tool (C) select only Mario.

Step 5

Now we will clean the scenario. You can do that manually with the selection tool or via Color Range.

Step 6

Click at the most visible color as below:

Step 7

At the 'not selected' parts you can use the selection. In summary: the main thing is to select the character or that it out of it, depends on your method.

Mario with the scenario selected, then I pressed delete.

Cool!

Step 8

After that, open Illustrator. Select our Mario from photoshop and paste it here. Then click on it and go to Live Trace> Tracing Options.

Step 9

Select the options as below and give a priority to the option Preview so our result will we showed in real time as the selections are activated.

Mode: Color
Max Color: 256
Blur: 0px
Path: Fitting: 0px
Minimun Area: 0px
Corner Angle: 0px

So do a Trace (at the Mode option, then you can alternate the Color, Greyscale and Black/White), this way you will have different looks in a gameboy style. Go to Object> Expand and click ok.

Step 10

Now your image became a Vector, so now ungroup it (Ctrl+Shift+G).

Step 11

Select the small dirty parts and the white background that are at the image and delete them.

Step 12

Some fonts in a pixel style will do great with our Mario.

And our image is ready! You can also do some posters with this, in a bigger size. There is no limit for your creativity... and ok I know that you didn't drink your chocolate or coke. :)

I hope you liked the tutorial!!

To download the illustrator file from this tutorial click here.

About the author

My name is Fabrício Falco and I live in Curitiba, Brazil. Actually I've been knocking my head as a freelancer doing some wordpress and joomla websites. Check out my personal website and also add me to your facebook.

Edited by GisMullr

10 Free High Res Coffee Stains Textures

Sat, 18 Jul 2009 04:31:25 -0700

In this set, you’ll find 10 high-resolution and large-scale coffee stains texture stock images. They have a very liberal Creative Commons license so that you can use them in any manner you choose, whether it’s personal or commercial.

Since they’re all 2,896px by 1,944px in size, they’re big and can be rescaled down for most purposes.

Preview

Click on the image or title that you’re interested in so that you can view various sizes of the image on its Flickr page. Alternatively, feel free to browse the entire Coffee Stains Textures Flickr set.

Coffee Stains Texture 01

Coffee Stains Texture 02

Coffee Stains Texture 03

Coffee Stains Texture 04

Coffee Stains Texture 05

Coffee Stains Texture 06

Coffee Stains Texture 07

Coffee Stains Texture 08

Coffee Stains Texture 09

Coffee Stains Texture 10

Licensing details

The above works that featured here and in the Coffee Stains Texture set are licensed under the Creative Commons license and can be used for personal and/or commercial purposes.

The Creative Commons license requires you to "attribute the work in the manner specified by the author or licensor". Our attribution specification: you don’t need to attribute the work to us (though you’re more then welcome to, and we will definitely appreciate it).

About the Author

JC Parmley is a U.S.-based web designer and developer from Indiana. When he’s not designing interfaces and creating .NET apps, you can find him in the Frozen Waste fighting for the Horde (World of Warcraft) or kicking butt in the kitchen.

15 Really Useful Web-based HTML Editors

Fri, 17 Jul 2009 11:07:20 -0700

Web-based HTML Editor, WYSIWYG editor, or rich text editor, is a web component that let users enter rich text input within the browser. Most of the time, these html editors are used within content management systems where administrators or authors can easily create posts and contents from the backend system.

Without talking much, let’s see these powerful Web-based HTML Editors.

1. FCKeditor

FCKeditor is one of the most famous online HTML editor. It brings the power and features of desktop editors to the web. It offers a complete integration pack for ASP, ASP.NET, PHP, Java, Perl, Phyton and etc. It supports skins, spell checker, lightweight, fast and has a lot of cool features.

2. NicEdit

NicEdit is a Javascript that integrates into any web page easily. It can turns any element/div to become editable or convert standard textareas to rich text editing.

3. TinyMCE

TinyMCE is an online wysiwyg html editor released under LGPL license. Like other wysiwyg html editors, it is able to convert textarea or other html elements to editor instances.

4. jwysiwyg

jwysiwyg is a jQuery WYSIWYG plugin with a tiny size (7kb packed). It is very simple and without much features.

5. Yahoo! UI Library: Rich Text Editor

The Rich Text Editor is part of the Yahoo YUI library and users can easily extend the features via creating plugin for it. It is very suitable for those who already familiar with other controls from YUI library.

6. Xinha

Xinha is a powerful WYSIWYG HTML editor component that works in all current browsers. It is built by the open source community, and everyone are welcome to contribute to the project.

7. Openwysiwyg

Openwysiwyg is yet another powerful open source cross browser WYSIWYG editor that contains a lot of features. It enhances table creation and you can easily create tables and customize them with built-in properties.

8. Free Rich Text Editor

Free Rich Text Editor is an extremely easy to use FREE javascript based HTML WYSIWYG editor for your website. It is easy to implement and manage to output XHTML compliant code.

9. WMD: The Wysiwym Markdown Editor

WMD is a simple and lightweight HTML editor which can be used in blog comment section or forum posts.

10. TTW HTML Editor

TTW HTML Editor is a very simple wysiwyg html editor that powered by javascript. Its spell checking feature is powered by SpellerPages, which can easily being implemented by adding parameter to the editor.

11. Free Text Box

FreeTextBox is the most-used HTML editor for ASP.NET. It is compatible with IE on the PC, and Mozilla and Firefox on all platforms.

12. WYMeditor

WYMeditor is a web based XHTML editor. WYMeditor has been created to generate perfectly structured XHTML strict code, to conform to the W3C XHTML specifications and to facilitate further processing by modern applications.

13. BlueShoes Wysiwyg Editor

It is a DHTML and Javascript based editor which has a lot of cool features. For example, user can easily resize the editor, select special characters, and pick color using the color picker tool.

14. markItUp

markItUp! is a JavaScript plugin built on the jQuery library. It is very lightweight and very customizable. You can even define your favorite keyboard shortcuts, which adds extra user friendly feature.

15. SPAW Editor

It is a web based WYSIWYG editor which had tabbed multi-document interface, floating/shared toolbars and a very cool interface. It is available in PHP and .NET versions.

No Related Post

Add Progressive Icons to Your Site Using :after pseudo-element

Fri, 17 Jul 2009 10:31:18 -0700

Preview & Files

Before we get started, check out a preview of what we are trying to accomplish, and grab the files to follow along. Ideally enough, the previous sentence was a preview in its own right.

Overview

Lately, I’ve been getting more and more into designing with progressive enhancements in mind. I think it’s a combination of ~~forward~~ wishful thinking, and a spiteful attitude towards IE. It’s also encouraging that over 67% of this blog’s readership browses through on Firefox, and only 13.5% do so in IE. No doubt that’s shifted my thinking and gives me the confidence to play around with some of the cool new features of CSS3.

In the steps that follow I’ll show you how to add descriptive icons to your links using a CSS pseudo selector element. Pseudo selectors were introduced back in CSS 2.1, but the fine folks at IE still haven’t adopted them. This small progressive enhancement greatly improves a site’s usability by helping the user understand what type of link they would be clicking. In the end I’ll reluctantly show you how to make things work in IE using a background image.

How It’s Done

In the demo, I styled PDFs, Word docs, and external links, but conceivably you could assign an icon to any file extension that you can think of. First, you’ll need an icon. There are lots of places to find cool icons, but my overwhelming favorite has become Iconfinder.

After grabbing the icon that you need, you can assign it to a file type in the CSS. Let’s take a look at the styling for PDF’s…

a[href$='.pdf']:after {
	content: url(../images/pdf.png);
	margin-left: 3px;
}

Awesomely enough, this syntax will work in just the way you might imagine. We tell the css to look for any files that end in .pdf and assign an image with a 3px margin on the left.

It’s beautifully simple, and in an ideal world that would be all you’d have to code. I suppose if you consider the very nature of progressive enhancements we could stop there. Afterall, the site will look just fine in IE, and those users will never know the icons should be there at all. But considering the somewhat depressing general browser statistics for June 2009 we should probably push further.

Getting IE to Behave

So how do we get things working in IE? Well, first we have to offer up a new stylesheet if the browser is determined to be IE. To do so, we can drop this handy little if statement in the head of our document.

1
2
3

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->

The CSS is also pretty simple; we just use a background image instead of a pseudo selector. Take a look…

a[href$='.pdf'] {
	background: transparent url(../images/icons/pdf.png) no-repeat center right;
	padding: 0 20px 0 0;
}

The IE Issue

The main drawback with using a background image with a position ‘right’ attribute is how the styling breaks down if the link extends to more than one line. Despite this setback, the icons look good most of the time in IE and will only really be an issue on skinny columns. Perhaps this is best described with an illustration.

Showing A Little Class

With the way the selectors are set up for external links, the css will drop an icon in for any outgoing link. Which looks great on image links, but looks ugly on image links. To fix this issue you can make a no-icon class for your images to override the selectors, or you can make a class for external links and assign that class to the links that you’d like to display an icon for. Although this option is less dynamic, I like the added control.

Final Thoughts

Are you starting to use progressive enhancements on your site? What CSS3 changes are you most excited about?