Infinite Web Design

(via O’Reilly’s Radar)

Homophily refers to the tendency to associate with people who are like you. This is as common in chat rooms as it is in elementary school lunch rooms. There is a natural tendency to seek out and associate with other people that are like us in some way. It makes us feel like we “belong”, like we are not alone. Sometimes this is harmless and even beneficial, as when quilters find each other and form a club. They get satisfaction and enjoyment out of their shared interest. Sometimes it is very bad, as when young men and women with radical inclinations find each other and push one another toward terrorism, strengthening one another’s resolve to kill. Generally the effects are somewhere in the middle, bringing us together with like minded individuals but limiting our exposure to new and interesting people or ideas.
Continue reading Homophily

Today we are going to talk about what colors say. For instance, Green often says “it’s not easy being me”… Okay, Green doesn’t really say that, we all know that Green only speaks Dutch…

Colors convey important information, however they sometimes tell us the wrong thing. A green stop sign is a great visual contradiction. We learn from a young age that “green means go”, “red means stop”, and yellow either means “slow down” or, depending on your parents, “go like hell”. So what happens when you switch around the colors on a traffic light? You get a whole bunch of accidents when people receive conflicting signals.
Continue reading Green Means Stop

I work hard every day to become better at what I do. I sit in my office reading blogs, books, tutorials, and anything else I can get my hands on and work on experiments and projects to hone my programming and design skills. I do this to avoid facing the trunk monkey in my car that attacks me when I go out… or possibly I do this so that I can produce really great websites. However, it is apparent to me that no matter how much I learn it will not be enough if what I build is not useful to people. So the real question is not just how do we build things well, but how do we build useful things?

Good Code, Good Design, a Good Start

It is necessary before we get into this to be clear about one point — good programming and design skills are just the foundation of a useful website. It is assumed that programmers can produce modular, reusable, object oriented code. Valid HTML and CSS are not something to brag about, they are a minimum for not being wrong. Layouts that make sense, appropriate color palettes, and proper application of Gestalt Principles are simply a beginning.
Continue reading Good Software Isn’t Enough

Message 2 out of 1 Messages
- My Answering Machine

My answering machine recently told me I was listening to message 2 out of 1. This struck me as an odd numbering scheme. I know it’s been a while since Sesame Street but I’m pretty sure counting just doesn’t work like that.
Continue reading Message 2 of 1

Target has redesigned their prescription pill bottles for Target pharmacies. The redesign was done by a graduate student named Deborah Adler who took on the redesign as a thesis project and had it snapped up by Target. While redesigning a pill bottle may seem somewhat insignificant I see this as a really great moment for Good Design.
Continue reading Target Redesigns Pill Bottle

Ajax is a set of technologies that is used to rewrite part of a web page without a complete page refresh. Jesse James Garret coined the term to describe a set of technologies currently coming into their own. This happens by using JavaScript to send a request to the server for information and then using DOM based JavaScript to rewrite a portion of the web page with the data that is returned.

Using this method allows for complex form validation while the user is filling out the form in stead of and in addition to validation following submission. This means that a user can enter their ZIP code for their shipping address and see the shipping charges added to the form before they move on or they can see that the username they want is already taken and have some suggestions shown to them as they type.
Continue reading Using Ajax Wisely

Next time you’ve spent hours working on a layout grab someone who has not seen it yet and ask them to look at it and tell you the first things they see. Don’t let them study the page, just have them glance at it and tell you what pops out at them. If it’s not the most important pieces of information on that page then you’re headed back to the drawing board.

Starting from a blank slate to create a new site can be a refreshing experience, a chance to get it right the first time. However, with so many possibilities for what you can build how do you decide where to begin? What is vital to the success of the project, and what is just gravy? And, to beat the metaphor into the ground, do we need the gravy or is it a tasty treat that will kill us slowly over time?

Step One

After your initial research and brainstorming sessions you are likely left with a wish list for features and functionality that is longer than a greedy kids letter to Santa. Step one is to define the essence of what you are building. Write it down in one sentence in large letters at the top of a sheet of paper (yeah, I like to go analog on occasion). Generally you can write this as the goal of the site or application. A few examples are:

• This web site is for scheduling appointments with a lawn service
• This web application is for ordering flowers online
• This web site is for ordering prints of digital photos

Continue reading Finding the Essence

How often have you tried to read a web site only to find that it is packed with jargon and secret codes in the form of acronyms and abbreviations that are never spelled out? Sometimes it appears that the author’s intent was to obfuscate their meaning for all but a select few individuals who are already in the know. When building a web site there are some simple techniques and some oft overlooked markup that can alleviate this problem.

Continue reading Jargon and Secret Codes

Following my rant about marking links to PDF files clearly I have decided that it is only right to offer some solutions to those of you who may need them. As such I am including a number of options for the icon I recommended using next to PDF links and a CSS solution for placing them there easily.

The icons are:

In order to get them to display properly you can add some simple css to your style sheet and a class to the PDF links. (Or to a div containing many PDF links)

a.pdf:link{
background-image: url(../images/icon_pdf.gif);
background-repeat: no-repeat;
padding-left: 18px;
background-position: left center;
}

This will set the background image of a link with the class of “pdf” to show the PDF icon (icon_pdf.gif), and to pad the text 18px (the width of the icon + 2) from the left.

OR you can use

.pdf:before {
display: marker;
content: url(../images/icon_pdf.gif);
}

This will place the PDF icon before the link with the class “pdf”. However, this doesn’t appear to align the icon vertically with the text as well as the previous method.

These techniques appear to work fine in FireFox 0.9 while failing gracefully in IE 6 by simply having no effect. I’m working on a solution that will appear in all browsers but this is a start. If anyone knows how to make this work in more browsers please let me know.