Acoustic Web Design

Creating Virtual Hosts with Apache 2 on Mac OS X

Mitchell Hall — Mon, 17 Jan 2011 16:23:57 +0000

Virtual hosting is a feature of Apache that allows you to associate a domain name with a directory on your web sever. This is very useful when developing a website because it more accurately reflects the environment your site will be in when deployed and it also allows you to reference images and other resources using root relative paths such as /images/myimage.png.

To create a virtual host with apache 2 running on Mac OS X 10.5 and later, you simply need to edit the 3 files files listed below. All of these files require root privileges to edit them. Use a command line editor, BBEdit, Smultron, or similar editor to modify these files. These editors allow you to enter a root password easily when saving the file.

/etc/apache2/httpd.conf
/etc/apache2/extra/httpd-vhosts.conf
/etc/hosts

Enable Virtual Hosts in Apache 2

First you need to enable virtual hosts in apache by uncommenting a line in /etc/apache2/httpd.conf. You only need to do this once.

Open the file in your editor and scroll down until you find the lines shown below, it should be around line 465.

#Virtual hosts 
#Include /private/etc/apache2/extra/httpd-vhosts.conf

Uncomment the second line by deleting the pound sign (#) in front of it so it looks like this and save the file.

#Virtual hosts 
Include /private/etc/apache2/extra/httpd-vhosts.conf

Add a New Virtual Host Configuration

Next, you need to add a new virtual host configuration in /etc/apache2/extra/httpd-vhosts.conf. Append the following to the end of the file and edit to match your site.

80>
    DocumentRoot "/Users/username/Sites/acousticwebdesign"
    ServerName acousticwebdesign.local

DocumentRoot is the path to your websites’ root directory. ServerName is the domain you will use to access the site.

Add an Entry to /etc/hosts

Add the following to the end of etc/hosts. Replace acousticwebdesign.local with the domain you entered as ServerName in the last step.

  127.0.0.1 acousticwebdesign.local

Restart Apache to enable your new virtual hosts. Now when you visit http://acousticwebdesign.local you will be redirected to your local site.

It’s a bad idea to use the same domain as your live site, since any time you visit that domain on this computer, you will be redirected to your local site.

Questions, Complaints, Concerns? Leave a comment a below.

Creating Custom Meta Boxes in WordPress

Mitchell Hall — Sun, 28 Nov 2010 10:29:20 +0000

In Using the WordPress Media Uploader With Custom Fields, I demonstrated how to integrate the WordPress media uploader to get a file url using the native media uploader in WordPress. In this post, I’ll show you how to create a custom meta box to house your plugin/theme specific meta data in its own meta box on the edit page/post page. The meta box we’ll be creating is shown below.

There are 3 steps in creating a custom meta box in wordpress:

Register a hook on the admin_menu action and call add_meta_box() in your function to register a new meta box.
Create a function that outputs the HTML for your meta box. You passed the name of this function to add_meta_box in step 1.
Register a hook on the save_post action and create a function that will save the data in your meta box to the database.
If you are integrating the media uploader, as we are, you will also need to register a hook on the admin_head action and embed the needed JavaScript to obtain URLs from the uploader. For more info on integrating the media uploader, see Using the WordPress Media Uploader With Custom Fields.

The example code below shows how to create a custom meta box that saves an image as meta data with the page. The user can upload and choose image using the native WordPress media uploader so there is no need to hunt down URLs.

Note that before saving the URL, we are converting it to an attachment id. This makes the field much more useful in the rest of your theme and potentially saves space in your database.


add_action('admin_menu', 'addMetaBox');
add_action('save_post', 'saveMetaData', 10, 2);
add_action('admin_head', 'embedUploaderCode');
 
//Define the metabox attributes.
$metaBox = array(
  'id'     => 'my-meta-box',
  'title'    => 'My Meta Box',
  'page'     => 'page',
  'context'  => 'side',
  'priority'   => 'low',
  'fields' => array(
    array(
      'name'   => 'My Custom Image',
      'desc'   => 'A Custom Image Displayed On Your Site Somewhere.',
      'id'  => 'myCustomImage',  //value is stored with this as key.
      'class' => 'image_upload_field',
      'type'   => 'media'
    )
  )
);
 
function addMetaBox() {
  global $metaBox;
  add_meta_box($metaBox['id'], $metaBox['title'], 'createMetaBox', 
    $metaBox['page'], $metaBox['context'], $metaBox['priority']);
 
}
 
/**
* Create Metabox HTML.
*/
function createMetaBox($post) {
  global $metaBox;
  if (function_exists('wp_nonce_field')) {
    wp_nonce_field('awd_nonce_action','awd_nonce_field');
  }
 
  foreach ($metaBox['fields'] as $field) {
    echo '';
    //get attachment id if it exists.
    $meta = get_post_meta($post->ID, $field['id'], true);
    switch ($field['type']) {
      case 'media':
?>
         echo $field['desc']; ?>
        
 
        if ($meta) {
          echo wp_get_attachment_image( $meta, 'thumbnail', true);
          $attachUrl = wp_get_attachment_url($meta);
          echo 
          'URL: .$attachUrl.'">'.$attachUrl.'
';
        }
?>    
        

        
           echo $field['id']; ?>" 
            name=" echo $field['id']; ?>"
            value=" echo $meta; ?>" 
          /> 
           
          
        
 

      break;
    }
    echo '
 ';
  } //end foreach
}//end function createMetaBox
 
 
function saveMetaData($post_id, $post) {
  //make sure we're saving at the right time.
  //DOING_AJAX is set when saving a quick edit on the page that displays all posts/pages  
  //Not checking for this will cause our meta data to be overwritten with blank data.
  if ( empty($_POST)
    || !wp_verify_nonce($_POST['awd_nonce_field'],'awd_nonce_action')
    || $post->post_type == 'revision'
    || defined('DOING_AJAX' )) {
    return;
  }
 
  global $metaBox;
  global $wpdb;
 
  foreach ($metaBox['fields'] as $field) {
    $value = $_POST[$field['id']];
 
    if ($field['type'] == 'media' && !is_numeric($value) ) {
      //Convert URL to Attachment ID.
      $value = $wpdb->get_var(
        "SELECT ID FROM $wpdb->posts 
         WHERE guid = '$value' 
         AND post_type='attachment' LIMIT 1");
    }
    update_post_meta($post_id, $field['id'], $value);
  }//end foreach
}//end function saveMetaData
 
/**
 * Add JavaScript to get URL from media uploader.
 */
function embedUploaderCode() {
  ?>
  <script type="text/javascript">
  jQuery(document).ready(function() {
 
    jQuery('.removeImageBtn').click(function() {
      jQuery(this).closest('p').prev('.awdMetaImage').html('');   
      jQuery(this).prev().prev().val('');
      return false;
    });
 
    jQuery('.image_upload_button').click(function() {
      inputField = jQuery(this).prev('.metaValueField');
      tb_show('', 'media-upload.php?TB_iframe=true');
      window.send_to_editor = function(html) {
        url = jQuery(html).attr('href');
        inputField.val(url);
        inputField.closest('p').prev('.awdMetaImage').html('URL: '+ url + '
');  
        tb_remove();
      };
      return false;
    });
  });
 
  
  
}//end function embedUploaderCode()

At first glance, it looks like a lot of work, and it is. But you only need to do it once. You’ll probably want to make this into a generic code library that you can include in each of your themes or plugins that need it. For a more in depth tutorial showing how to create such a library, check out the excellent tutorial, How To Create A Better Meta Box In WordPress Post Editing Page.

Let me know if this was helpful or if you had any problems implementing the custom meta box by leaving a comment below.

Creating Start Up Items in Mac OS X

Mitchell Hall — Mon, 22 Nov 2010 12:06:33 +0000

There are three ways to get a program to run automatically when OS X starts up: Login items, Startup items, and launchd daemons. Startup items and launchd daemons are used to launch processes that run in the background like Apache or MySQL. Login items are meant for general applications (like Mail or Text Expander) that usually have some kind of user interface. I’ll show you how to create all three in this post.

Launching General Applications at Start up with Login Items

If you want to start an application (as opposed to a process or daemon) every time you login, simply add the application to the Login Items list in the Accounts preference pane in System Preferences.

Launching Background Processes with Startup Items and launchd Daemons

To launch a daemon or background process (like apache or MySQL) every time OS X starts, you must create either a launchd daemon (OS X 10.4+) or a Startup item (OS X 10.3 and earlier) depending on what version of OS X you are using. While you can still create Startup items in OS X 10.4 and later, Apple recommends using launchd configurations for the many advantages launchd provides. Check out Launching Custom Daemons Using launchd on the Apple Developer website for more information about launchd.

Create a launchd Daemon (OS X 10.4 and Later)

To create a launchd Daemon, you simply have to create a property list file in /Library/LaunchDaemons that points to the executable you want to run.

1. Create a properties list in /Library/LaunchDaemons.

sudo touch /Library/LaunchDaemons/com.apache.apache2svn.plist

2. Edit the plist and point it at your executable.

 version="1.0" encoding="UTF-8"?>

    "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 version="1.0">
>
    >Label>
	>com.apache.apache2svn>
    >ProgramArguments>
	>
	    >/Users/mitch/dev/apache2/bin/apachectl>
	    >start>
	>
    >RunAtLoad>
	/>
    >KeepAlive>
	/>
>
>

Label is a unique name to identify your daemon.
Program Arguments is the path to the executable you want to run.
RunAtLoad tells launchd to run your daemon when OS X starts up.
KeepAlive tells launchd that the process should remain running indefinitely (launchd can run process on demand and terminate them after running, KeepAlive tells launchd that this is not an on demand process).

3. Restart your computer and your process should be running.

Create a Startup Item (OS X 10.3 and Earlier)

To create a Startup item, you need to create a new directory under /Library/StartupItems that contains a properties list file and a shell script. The shell script should be the same name as the directory. The property list must be named StartupParameter.plist.

1. Create a directory under /Library/StartupItems.

sudo mkdir /Library/StartupItems/apache2svn

2. Create an executable with the same name as the directory.

sudo touch /Library/StartupItems/apache2svn/apache2svn
sudo chmod a+x /Library/StartupItems/apache2svn/apache2svn

3. The executable should look something like this. Each function either starts, stops, or restarts your process. You can leave the function body blank if it does not apply to your process. Don’t forget to include the . /etc/rc.common and RunService "$1" lines.

#!/bin/sh
. /etc/rc.common
 
StartService ()
{
    /Users/mitch/dev/apache2/bin/apachectl start
}
 
StopService ()
{
    /Users/mitch/dev/apache2/bin/apachectl stop
}
 
RestartService ()
{
    /Users/mitch/dev/apache2/bin/apachectl graceful
}
 
RunService "$1"

4. Create a properties list called StartupParameter.plist.

sudo touch /Library/StartupItems/apache2svn/StartupParameter.plist

5. The property list should look something like this.

 version="1.0" encoding="UTF-8"?>

    "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 version="1.0">
>
    >Description>
	>Apache2 (SVN on Port 8080)>
    >OrderPreference>
        >None>
    >Provides>
	>
	    >apache2svn>
	>
>
>

Description is a human readable description of your process.
Providesis a unique name that identifies your process.

6. You can test your startup item using the SystemStarter command.

sudo /sbin/SystemStarter start "apache2svn"

7. Otherwise, restart your computer and you’re process should be running after boot up.

Leave a comment below if you’re having problems getting you’re process to run.

Using the Worpress Media Uploader With Custom Fields

Mitchell Hall — Thu, 11 Nov 2010 21:43:07 +0000

WordPress custom fields are useful for customizing posts and pages, but they should be limited to text-based properties . Many theme developers provide custom fields for images and require their users to enter the URL of the image. Though effective, this is very unusable and a burden for non-technical users. Finding the correct url and then copying and pasting it into the field is cumbersome and error prone and most users can not be expected to do this properly or have the technical know how.

A much more usable solution is to integrate the WordPress Uploader and allow the user to upload and select files from the media library just like inserting images into a post. With a small amount of code, this is easily done.

To display the uploader, you need to call the following javascript function.

tb_show('', 'media-upload.php?TB_iframe=true');

After the user uploads and/or selects a file and clicks “Insert into Post”, the uploader calls another function, window.send_to_editor(html) and passes in an HTML snippet consisting of an anchor tag linking to the file. We simply need to override this function and extract the url of the file. We can then insert the url anywere we want. Typically, you’d want to insert the url into a form field that will be saved as meta data with the post or page.

jQuery('.image_upload_button').click(function() {
    tb_show('', 'media-upload.php?TB_iframe=true');
    window.send_to_editor = function(html) {
        url = jQuery(html).attr('href');
        jQuery('#myInputField').val(url);
        tb_remove();
    };
    return false;
});

An easy way to include this Javascript is to embed it in the header of the post or page editor. However, it’s better to create a separate Javascript file and put your code in there. Both methods are shown below.

Embed Javascript in Header

function embedUploaderCode() {
?>
    
 
}
add_action('admin_head', 'embedUploaderCode');

Include External Javascript File

function my_admin_scripts() {
?>
    
 
}
add_action('admin_head', 'my_admin_scripts');

If you want to add the image uploader on a page that doesn’t have an editor, you’ll need to tell WordPress to load the required javascript and css for the uploader. This is easily done in functions.php with the code below.

function loadUploaderScripts () {
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}
add_action('admin_print_scripts', 'loadUploaderScripts');
 
function loadUploaderStyles() {
    wp_enqueue_style('thickbox');
}
add_action('admin_print_styles', 'loadUploaderStyles');

My next post will show how to create custom meta boxes that use the image uploader. So keep checking back or subscribe to my RSS Feed to be notified when the article is posted. Also, let me know if you have any problems getting this to work by leaving a comment below.

How To Create WordPress 3 Navigation Menus In Your Theme or Plugin Code

Mitchell Hall — Tue, 02 Nov 2010 07:57:49 +0000

The new navigation menu module in WordPress 3.0 is great. It’s a piece of cake to add and remove menu items from the admin interface. But what if you want to add pages automatically when a new page is created. There’s an option to add top level pages automatically, but what if you want to add subpages automatically? Read on to find out how to do just that. It’s easier than you think.

Creating navigation menus programmatically (yes, it’s a real word) is particularly useful when testing your theme or plugin and for websites that have a large number of pages. Instead of having to manually create your menus, you can write a small code snippet to do it for you.

The function you need for this operation is wp_update_nav_menu_item and it’s defined in /wp-includes/nav-menu.php.

wp_update_nav_menu_item(
    $menu_id = 0,
    $menu_item_db_id = 0,
    $menu_item_data = array()
)

$menu_id is the id of the menu you are adding a new item to.

$menu_item_db_id Use 0 to create a new menu item.

$menu_item_data is an array containing data about the new menu item. See below.

Example

In the code below, I am adding a new menu item for the page titled “About Us” to the menu named “Main Navigation Menu”.

$mymenu = wp_get_nav_menu_object('Main Navigation Menu');
$menuID = (int) $mymenu->term_id;
$myPage = get_page_by_title('About Us');
 
itemData =  array(
    'menu-item-object-id' => $myPage->ID,
    'menu-item-parent-id' => 0,
    'menu-item-position'  => 2,
    'menu-item-object' => 'page',
    'menu-item-type'      => 'post_type',
    'menu-item-status'    => 'publish'
  );
 
wp_update_nav_menu_item($menuID, 0, $itemData);

First we need to get the id of the menu we are adding a new item to. You can either look it up by name using wp_get_nav_menu_object() and passing the name of the menu (not the unique id) as in the example above or you can hover over the menu’s tab in the admin interface and look at the status bar of your browser. This only works if the menu’s tab is inactive (i.e. you’re looking at another menu).

Next we need to get the ID of the page we are creating a menu item for. This too can be done in code (see line 3 above) or using the same hover trick described in the last paragraph. On the Pages page, simply hover over the name of the page to see the id in the status bar.

On line 5, we have to create an array containing information about the new menu item. Each field is described below.

menu-item-object-id

This is the page id we are creating a menu item for.

menu-item-parent-id

Pass in 0 to create a top level menu item.

If you want to nest this menu item under another menu item to create a sub menu, pass the parent menu item’s id. To get an existing menu item’s id, hover over the menu item on the Menu’s screen and look in the status bar of your browser. You have to hover over the arrow on the right side of the menu item to see the id.

menu-item-position

This sets the the position of the menu item. Strangely, the number represents the position from the top of the menu regardless of whether it is a nested item or not. See the image below. The first position is 1. Setting this field to 0 will append the item to the end of the menu, or to the last child element if nesting this item in a sub menu. I expect this to change in the future. It would be much more useful if this were relative to items on the same sub menu.

menu-item-object

Specifies that the menu item represents a page. Omitting this will not prevent the menu item from being created, but it does remove the word “Page” from the menu item and I’m sure there are other consequences. If anyone knows more about this field, let me know in the comments. Hopefully, we’ll see some documentation soon that will better describe this property.

menu-item-type

Passing in ‘post-type’ for this field instructs WordPress to fill in details such as page url and title from the existing page or post.

I haven’t experimented with any other menu-item-type’s, but apparently, you can pass in ‘custom’ or ‘taxonomy’ to create different types of menu items. If using these other types, you would need to provide more information such as url and title. See nav-menu.php to find out what else is needed in this case.

menu-item-status

If not set to ‘publish’, WordPress will add the menu item as a “draft” item and the menu would need to be saved manually on the menu screen before it is visible on your menu.

Finally, on line 13 we call wp_update_nav_menu_item() to create the menu item. The page should now appear in your menu. Make sure you only execute this once. If you don’t comment out this call after running it, it will continue to create new menu items every time you refresh a page on your site.

And that’s it. Let me know if this was helpful by leaving a comment.

8 Books That Will Make You A Better Web Designer

Mitchell Hall — Sat, 23 Oct 2010 02:23:30 +0000

In order to improve, one must learn and the best place to find quality learning material for the working professional or freelancer still remains in the written word. With so much unverified material on the internet today, I prefer to gain knowledge from a good book wtitten by an experienced authority on his subject. Gathered here are 7 exceptional books that will make you a better web designer and programmer.

1. Designing with Web Standards (Jeffrey Zeldman)

The first book any person serious about web design should read. In this excellent and easy to read book you’ll learn how to build websites using the holy trinity of modern web design – semantic (X)HTML markup, CSS layout, and unobtrusive scripting based on JavaScript and the DOM.

After putting these practices into use, your websites will be easier to code, easier to maintain, easier to find, and compatible with modern (and future) browsers.

2. Don’t Make Me Think: A Common Sense Approach to Web Usability (Steve Krug)

If you haven’t read Don’t Make Me Think, stop what you are doing, Drive to your local bookstore (don’t order it online, that will take to long), spend the rest of the day reading it. This fantastic book is short, easy to read, engaging, and eye-opening. It’s full of “why didn’t I think of that already” advice and insights. Almost everything discussed is common sense advice, yet I guarantee you you will benefit from the material.

Reading Don’t Make me Think and Designing with Web Standards alone will do more for your career as a web designer than anything else.

3. Inbound Marketing: Get Found Using Google, Social Media, and Blogs (Brian Halligan and Dharmesh Shah)

Inbound Marketing is an excellent guide to doing business in the new world of social media and online marketing. The book succinctly explains how to turn your website and blog into a marketing hub, providing your visitors and customers with remarkable content and generating buzz around the net. Littered throughout are excellent suggestions and step by step instructions on how to leverage social media to bring in new customers. Each chapter ends with a Track Your Progress section that describes the important metrics you should be tracking with your analytics program.

Even though it’s written for a less technical audience than the web design community, you will find plenty of new ideas and insights littered throughout this fantastic guide to online marketing.

4. CSS: The Definitive Guide (Eric A. Meyer)

The only CSS resource you need. Coming from an expert like Eric Meyer, you know you’re in good hands. No other book comes close to the detail in which this book describes every aspect of css. Don’t waste your time with other CSS books, this is the only one you need.

The companion to this book, CSS Pocket Reference is a very handy addition to its big brother. It’s perfect for when you just want to look up the syntax for a particular selector.

5. Stop Stealing Sheep & Find Out How Type Works (Erik Spiekermann, E.M Ginger)

A great intro to the intimidating and vast world of typography. Learn how to choose and use type properly from experts in the field.

This is another compact but powerful tome of juicy goodness.

6. PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide (Larry Ullman)

Coming from a Java background where good books on the subject abound, I was, and still am, disappointed by the lack of good literature on PHP. This book does an adequate job of introducing the language, but it’s aimed at beginner programmers. I’ve yet to find a good PHP reference for experienced programmers, but I couldn’t leave this book out. It contains some excellent information and tips if you’re willing to dig for it.

PHP in a nutshell is also decent source, but outdated and in need of a revision. If you know of a good PHP reference please let me know in the comments.

7. JavaScript: The Definitive Guide (David Flanagan)

My first stop when faced with a JavaScript puzzler. Written by a well-known and regarded Java author, this reference is comprehensive and definitive, just like the title says.

8. The Pragmatic Programmer: From Journeyman to Master (Andrew Hunt and David Thomas)

While not so much a web design book, this book changed the way I program and approach programming projects in general. It’s very much geared toward corporate programmers (which I was when I first read it), but it is by far one of the best and most influential programming books I’ve read.

There are so many good tips and best practices in this book that I couldn’t leave it out. Many programming shops today will not hire any person who hasn’t read this excellent book and I don’t blame them.

Honarable Mentions and Non-Web Design Books Worth Mentioning

The Elements of Typographic Style (Robert Bringhurst)

Mostly geared toward print designers, this beautifully bound and printed book is, in my opinion, overrated. There is some useful information about typographic scale and a few other nuggets of wisdom, but not the holy grail others make it out to be, at least not for web typography.

Design Patterns: Elements of Reusable Object-Oriented Software (Erich Gamma, Richard Helm, Ralph Johnson, John M. Vlissides)

Required reading for any object oriented programmer.

Prototype and script.aculo.us: You Never Knew JavaScript Could Do This! (Christophe Porteneuve)

Great intro and reference.

Mastering Regular Expressions (Jeffrey E.F. Friedl)

A Comprehensive reference to this complex and absolutely essential subject.

Effective Java (Joshua Bloch)

Required reading for the serious Java programmer.

Refactoring: Improving the Design of Existing Code (Martin Fowler, Kent Beck, John Brant, William Opdyke, Don Roberts)

Another object-oriented bible. This highly-regarded text walks through the process of changing existing code (refactoring) safely. It also attempts to name and describe many common “refactorings” and provide step by step procedures for doing so.

Pragmatic Project Automation: How to Build, Deploy, and Monitor Java Apps (Mike Clark)

Pertinent to any programmer. Save time by automating everything. I use the principles learned in this book to make deploying my wordpress websites a one button push process.

Bash Cookbook: Solutions and Examples for Bash Users (Carl Albing, JP Vossen, Cameron Newham)

Great source of command line scripts and goodies.

What Are Your Favorite Books?

Let me know which books I’ve left out in the comments below.

Real World Browser Testing – 8 Steps to Building Compatible Websites

Mitchell Hall — Wed, 13 Oct 2010 17:20:11 +0000

Modern web browsers are getting us closer to write once, publish everywhere, but we aren’t quite there yet and so we must suffer through the grueling task of browser testing.

In this article, I’ll explain the process I use to test my websites for compatibility. Along the way I’ll point out some helpful tips and tools I’ve discovered that have helped ease this stressful task.

Step 1 – Develop in Firefox.

Build your website in Firefox. Firefox is the most standards compliant browser available today. If you’re site looks and functions correctly in Firefox, you’ll spend less time getting it to work in other browsers. Plus, with Firebug and the Web Developer toolbar installed, Firefox is by far the most web-friendly browser.

Links:
Firebug
Web Developer Toolbar

Step 2 – Validate.

Before even opening another browser, validate your web site. Starting with a valid, standards compliant website is the best way to ease the remaining steps in the process.

I have found the easiest and fastest way to validate is by using the Web Developer Toolbar plugin in firefox. With the toolbar installed, choose “Validate Local HTML” from the Tools menu (or hit command-shift-a) to validate your web page. No copying and pasting code and your website does not have to be accessible publicly. A new page will open showing the results of the w3c validation.

You’ll want to make sure that “Show Source” is checked in the web developers toolbar settings (Options > Validation) so that you can instantly see the line number for any errors found. Since most websites have some amount of generated code, it’s helpful to see the exact source that was validated along side the results.

You can also use the web developer toolbar to validate your css. Choose “Validate Local CSS” from the Tools Menu on the toolbar.

Step 3 – Only Test Browsers that are Being Used.

Don’t waste time testing obscure browsers and versions that aren’t being used to view your site. Look at your traffic statistics to find out what browsers your site is being viewed in and only test on those being used by 5% or more of your visitors. This has worked great for me, but if your site sees thousands of visitors every day you may need to go down a few percent to draw the line. If your site hasn’t been published yet, test Firefox, Safari, Internet Explorer (versions 6 through 9), and Safari for iphone. On almost all of the websites I have developed, I only need to test in these browsers. Only twice, have I found a problem in Safari, that didn’t show up in Firefox. So, in short, browser testing means testing Internet Explorer.

I know many of you are dropping support for IE6, but every website I manage still gets a significant number of visitors using IE6, so I’m still supporting it.

I have never had to test any of my websites in Opera or Chrome. I have no idea why standardistas and big names in the industry always mention Opera when talking about browsers. I’ve never seen more than a handful of people visit any of my sites using Opera.

Step 4 – Virtual Machine or Real Machine – You must test in a real browser.

You must test in an real browser installed on a windows operating system. There’s no way around this. If you want to accurately test your sites for compatibility, this is the only way. This means either installing Windows on a second partition or virtual machine like Parallels or using a dedicated windows computer.

I test in Windows 7 installed on a Parallels virtual machine, but I plan to move to another virtual machine solution. Parallels is very slow and gets slower with each new release despite their claims to the contrary. My machine is an 8-core Mac Pro (2 x 3Ghz quad core intel xeon) with 7 GB of ram and it still takes about 5 minutes for my virtual machine to resume from being suspended. Regardless of how I allocate resources everything slows down tremendously while running my vm.

Here are some popular virtual machine solutions.
Virtual Box – I’ve used this to run linux and thought it was great…and free.
VMWare Fusion – I’m planning to try this next.
Parallels Desktop – My current solution that I’m not satisfied with.

Step 5 – Browsershots Doesn’t Count.

I’ve seen many articles written recently that recommend screenshot services such as browsershots.org as a viable means of testing compatibility. This is just nonsense, you might as well not test at all. Not only do you have to wait in line to see the results but you can’t test interactive features of your website. 90% of the issues I find during browser testing are related to forms and ajax and these simply can’t be tested with a screenshot service. Don’t waste your time.

Step 6 – IETester is the best tool for the job period!

The best way to install multiple versions of IE on windows is IETester, a somewhat new tool that is better than anything else available. IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

In the past, I’ve used the IE Collection to install multiple versions of Internet Explorer, but it crashes all the time and I found it difficult to have more than one version open at the same time and not confuse them.

With IETester, you can open each version of IE in its own tab that is clearly labelled. You can also run each tab in its own process so that when it crashes (and it will, this is windows were talking about), all you have to do is re-open that tab. You can also install the DebugBar plugin to get a limited, but still useful inspector similar to Firebug’s inspector.

There’s simply no better tool for testing internet explorer.

Links:
IETester
IE Collection

Step 7 – Put browser-specific CSS in Separate Stylesheets and add conditional comments.

Always separate your browser hacks from your regular CSS. Put your browser-specific fixes in separate stylesheets and use conditional comments to load them only for the browsers they target. This keeps your pages standards compliant and your css files compact for standards compliant browsers.

Below is a section of my standard header for sites built on wordpress.

Supersleight enables transparent PNGs in IE6. See Transparent PNGs in Internet Explorer 6.

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues under IE5 and IE6.

Step 8 – Web pages don’t have to look the same in every browser.

I have stopped trying to make my sites look perfect in every browser. So few users are using IE6, that I don’t worry about small layout problems. It’s just not worth it. I spend a little more time on IE7, and the most time on IE8, and now IE9.

As long as your site functions properly in all browsers, minor visual formatting differences are perfectly ok.

Often times, I find it easier to show a reduced version of a page to older browsers. For example, on a recent site I developed, there is a page that uses jquery UI to display lots of information and some google maps in tabs. Getting this to work properly in IE6 was starting to become a nightmare. Instead of wasting half a day trying to get it to work, I simply got rid of the tabs and displayed everything on one page for IE6 users. It didn’t look as good without the tabs, but all the information was displayed. Chances are if your using IE6 as your browser, you don’t care about modern interfaces.

Conclusion

Browser testing is not fun, but following the above guidelines should ease the burden slightly. If you know of any other useful tips or tools that I’ve left out, let me know by leaving a comment.

11 Spectacular Free Fonts No Web Designer Should be Without

Mitchell Hall — Mon, 27 Sep 2010 09:39:37 +0000

There are so many free fonts available on the internet today and finding quality ones can be a challenge. Listed below are 11 exceptional free fonts that are sure to be a welcome addition to your library. These are professional quality fonts that will enhance any design project your working on.

Want More Free Fonts?

50 Fresh Free Fonts of 2010

30 New Free High Quality Fonts

20 Fresh High-Quality Free Fonts

25 New High Quality Free Fonts

20 New High Quality Free Fonts

15 Beautiful High-Quality Free Fonts

40 Excellent Free Fonts for Professional Design