As mentioned in my last post, creating a strategy and project plan before beginning the design and build of a website or web application is perhaps the most important step in launching a successful website. Most successful businesses start with a business plan, it is our job as web strategists to translate that plan into the ever evolving web. Read the rest of this entry »

As a designer, I rely on my vision to impart a hierarchy of data within web pages. It takes a jarring reminder from the smart folks at the South by Southwest Interactive Festival to remind me that not everyone can see the colors I painstakingly deliberate over, the varied and specific shades that I cross-browser test for universal appeal. Even color contrast can be lost to a slight case of color-blindness.

Assistive technologies are on the rise, and we learned about a full spectrum that are available now.

Read the rest of this entry »

We’re working on a new community-driven website and one of the required features is the ability for users to crop and scale an uploaded image live in their browser.

I put together a short javascript that takes an uploaded image and places it within a set frame size, scaling the smallest side of the image to the largest side of the frame. The user can then pan and scale the image to the desired size, clicking enter when done. All adjustments are placed in hidden form inputs that way when the form is submitted the backend image library (GD, ImageMagick, etc.) will have all the proper measurements to make the desired adjustments.

It looks a little something like this:

The bar below the image is used to size the image and the inputs on the side are what receive the new adjustment data (displayed as text inputs for the example).

You can play with the example and download the source here.

This script requires the latest Prototype and Scriptaculous libraries (it will not work on Prototype < 1.6)

When you run a web server on your personal machine, you can access your web documents a few ways: using http://localhost or http://127.0.0.1, virtual hosts (http://whatever), and the internal IP of the machine. Unless you are directly plugged into the internet, the internal IP is the address the router provides. The format is usually 192.168.0.xxx, where the xxx is unique to each computer.

But what happens when you want localhost and 192.168.0.xxx to point to different locations? Apache treats 192.168.0.xxx the same as localhost, because it is the same—when you define document locations and configurations on production sites you use 127.0.0.1 (localhost) which points to the IP of the machine. The reason you don’t use the direct IP address is because it can easily change.

For me, setting the internal IP of my machine to point to a different location is very important. I want to be able to develop my personal sites under localhost, while developing all my work sites under a virtual host. But I also want the internal IP to point to my work sites, that way if I need to test a site on another computer or send works-in-progress to co-workers, the IP would point to my work sites and not my personal sites.

Turns out the solution is pretty simple.

Read the rest of this entry »

I have mentioned this site in a previous blog post, but I think it is such an amazingly helpful tool that it deserves its own post. HTML Playground, is the best site I have found for those who don’t have a programming background and need to know basic HTML. For Internet Marketers like myself, this site is extremely helpful for the times we need to create an extra content page for a website or when we need to move an image to a different page location.

The Playground is extremely user friendly. Simply select any of the HTML tags listed, and the Playground provides a description of how the tag is used, the attributes associated with the tag, an example of the code, and an example of the result. Users can also play with the sample code to customize the end result to their liking. Playing with the HTML code in this area is of course easier than repeatedly tweaking the HTML code and uploading the page through the FTP.

So if you are new to HTML, play around on this site to gain a better understanding.

I just released a new version of my png compression software for Mac OSX.

What’s new? Not much. I changed the name from the incredibly lame PngOptimizer to PngThing and got a new icon courtesy FastIcon.com.

PngThing.dmg (1.78mb)

The file size is bigger than the old version (360kb) because of the new icon. Again, this release includes both Growl and non-Growl versions.

Special thanks to Kevin for suggesting the update.

On a recent project, I ran into an issue where the main navigation needed to be centered and flexible enough to add and remove menu items through a CMS. For those of you not familiar with CSS, this creates an immediate problem: you can not center a block element without first knowing its width. The normal technique is to use auto left and right margins (margin: 0 auto), that are then calculated based off the element’s width. But what happens when you don’t know the width of the element?

Well this plagued me for a while, and unfortunately I didn’t word my google searches well enough to turn up any definite answer. So I reverted to using an arcane Javascript function that would grab the width of each menu item and then apply that width to the containing element. However, this caused lots of strange problems: weird flashes if you were hovering over the menu on page load, strange issues that could only be fixed with CSS overflow and z-index, and more. And you should all know my love/hate relationship with Javascript by now. However, after doing some proper research, I found a simple solution using CSS, also known as Shrink Wrapping.

Read the rest of this entry »

No this is not a post related in any way to the fallen pop star’s latest flagellation for attention, but all about how i want the iPhone! And I want to see beautiful websites on that crystal clear LCD.

Here’s how: iPhone’s Mobile Safari Compatibility Tips

Recently I’ve started optimizing my PNG images. In most cases, I can get file sizes smaller than GIFs, and if I’m real lucky cut 24-bit PNGs in half.

There are a few optimizing programs out there, but none of them do what I really want. Previously I was using PNGpong, a dashboard widget, but I’m not a fan of Dashboard (I know, I know) and wanted a program that I could simply drag a folder onto and not have to worry about selecting fifteen different PNGs.

So today I created my own application that will optimize any PNG (or folder of PNGs) dropped onto it. Once the optimization is complete, PngOptimizer will notify you via Growl with the total number of images it has optimized and how many kilobytes you have saved. (This can come in handy for iPhone development where the EDGE network is seriously limited.)

Without further ado, I present you with my first Mac programming attempt:

PngOptimizer v1.0 (360kb).

Yes, it has a lame name and an even worse icon. But I don’t claim to be a great icon designer or a clever programmer.

Simply copy the application into your Applications folder and drop any folder of PNGs onto it and watch PngOptimizer do its magic.

PngOptimizer is powered by the OptiPNG library and built with Ruby and Platypus (hence the horrible icon).

By default search inputs are notoriously ugly. Just look at what they are: a plain text input. But Apple had the great idea to make a search widget for Safari that looks like this:

This is probably nothing new, it’s been around for quite a while, but the code used to create the field (input type “search” instead of “text”) does not validate and only works in Safari. So what happens when you like the search field and what to use it on other browsers?

I recently ran into this predicament and decided to put together a little javascript that creates the proper inputs.

Read the rest of this entry »