Chovy's Blog

I’ve found I enjoy the hobbyist design as mental stimulation more than I do trying to earn a little extra money on the side.

I have a few sites that I improve periodically through design, and slowly but surely traffic has increased enough to make it worth continued development.

On the job I wear many hats, its nice to focus on just purely design when I’m at home in the evenings…or coding for fun, rather than trying to fit a square peg in a circular hole day after day.

Proper UI messaging can improve usability and intuitiveness of a web application.

I usually have 4 categories of messages:

• error (a light shade of red)
• warn (a light shade of yellow/orange)
• notice (a light shade of blue)
• success (a light shade of green)

I only toss “errors” to the user when the app has completely failed and is blocking continuation.

Ideally this would trigger an error.log message or even an email to the site admin. These should be used sparingly, and when form details are not filled out correctly.

I try to use “warnings” on things that will continue, but perhaps give the user an option to go back and improve the request before handling it.

CSS sprites allow you to decrease the number of individual HTTP requests sent from the client (browser) to your web server when a user visits your web page.

The concept is simple — instead of an individual icon for each rollover state and visual representation, group them all into one image file and then dynamically position it with fixed width/height rules in CSS.

This avoids the annoying “IE flicker” bug that designers have experienced from time to time when using separate images for “on” and “off” states.

Besides combining an “on”, “off”, “active”, “visited” state for an icon, you can also combine all the distinct icons into one image.

Lets look at a simple example that uses on/off states for icons in a navigation menu:

HTML:

Email
Phone
SMS

CSS:

		body { font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', sans-serif; font-size: 76%; margin: 1em auto; }
		#shell { border: 1px solid #ccc; }

		#nav { list-style-type: none; color: blue; }
		#nav li { margin-bottom: .5em;  }
		#nav a:link, #nav a:visited, #nav a:hover, #nav a:active {
				outline: none;
				background: url('/demo/images/sprite_nav.png') no-repeat left top;
				display: block;
				height: 32px;
				width: 32px;
				border: 1px solid #7faacc;
				text-indent: -9999px;
		}

		#nav a:hover { border-color: #4d8aba; }

		/* email background sprite */
		#email a:link { background-position: 0 0; }
		#email a:hover { background-position: -32px 0; }

		/* phone background sprite */
		#phone a:link { background-position: 0 -32px; }
		#phone a:hover { background-position: -32px -32px; }

		/* sms background sprite */
		#sms a:link { background-position: 0 -64px; }
		#sms a:hover { background-position: -32px -64px; }

An example sprite_nav.png sprite image:

Working demonstration:
CSS Sprite Demo

The sprite image will be a 2×3 matrix of 32px by 32px icons (one column for each state — hover, link) and one row for each navigation item (phone, email, sms).

Further reading: Website Optimization: CSS Sprites, MezzoBlue: Sprite Optimization.

Thanks to Chris Coyier from CSS-Tricks for pointing out this little ditty….from Román Cortés.

Below is a screenshot of the infamous character Homer Simpson, created from CSS.

I look forward to seeing more “AcidX” variations in the future — the successor to CSS Zen perhaps?

For those interested, the “acid tests” are available at acidtests.org: an effort to provide a litmus test for W3C and standards compliance among browser makers with respect to CSS (acid2) and CSS/JavaScript (acid3).

Update: Checkout the animated version of Homer CSS…and the George Bush CSS.

Vote for this South by Southwest conference panel idea:
Extremely Rapid Web Prototyping: Building Your Ideas Quickly