Two different clients had two different uses for days/months/years. One was to browse an archive, the other was to let users schedule an event. Both wanted it done quickly and neither wanted to pay for adding years after every New Year’s Eve party.

Solution

As part of my forward-thinking strategy — Preventing Problems is Good — I wrote a JavaScript function to automatically add years as necessary. Specifically, the code below creates <option> elements with years in a given <select>.

function populate_years(min,max,target){

	// What year is it?
	var d = new Date();
	var this_year = d.getFullYear();

	// Loop through the years.
	for ( i=(this_year+min); i<(this_year+max); i++){
		$('#'+target).append('<option value="y'+i+'"&gt'+i+'&lt/option&gt');
	}
}

How it works

1. Extract the current year from a JavaScript date object.
2. Start at a certain number of years before the current year and count forward until you reach a sufficiently distant future.
3. Add each year as an HTML option element to the given user interface widget.

Portable code

Whenever writing a function PHP, JavaScript, or jQuery (and handlers in AppleScript), I try to write “portable” code that I can reuse in different projects. Ideally, portable code does not use global variables because that ties the function to a given project. Likewise, functions should never directly display (echo, print, sprintf) anything to the screen. I can’t tell you how many times I’ve had to track down an errant space that killed some PHP include. Functions should take arguments, do something, and return results. End of story.

Sample usage

} .action-button:active { background: -webkit-gradient( linear, left bottom, left top, from(#86aceb), to(#347ee2) /* Gradient colors, inverted. */ ); position: relative; top: 3px; /* Give it that "depressed button" look. */ }

Tap me

Here’s a quick style I wrote for creating buttons that look tappable.

.action-button {
	display: block;
	width: 120px;
	padding: 7px;
	text-align: center;
	color: #fff;
	font-size: 15px;
	font-family: 'hevetica neue',helvetica,arial,sans-serif;
	cursor: pointer;
	text-shadow: #145ec2 0 -1px 0;
	background: -webkit-gradient(
		linear, left bottom, left top,
		from(#347ee2), to(#86aceb),
		color-stop(0.5, #347ee2), /* Dark value */
		color-stop(0.5, #548fe5) /* Medium value */
	);
	-webkit-border-radius: 4px; /*  */
	-moz-border-radius: 4px; /*  */
	border-radius: 4px; /*  */

}
.action-button:active {
	background: -webkit-gradient(
		linear, left bottom, left top,
		from(#86aceb), to(#347ee2) /* Gradient colors, inverted. */
	);
	position: relative;
	top: 3px; /* Give it that "depressed button" look. */
}

How it works

• Set the width to whatever fits your requirements.
• For testing in a desktop browser.
• Shadow color should be a shade darker than your darkest gradient.
• Lightest color, in this case, pale blue.
• Medium value creates the illusion of a chrome-like reflection.
• For Webkit browsers like Chrome and Safari.
• For Gecko browsers like FireFox.
• For future browsers.

Regular expression, or “regex,” is a means to seek patterns in a string of text. PHP has several regex functions that coders may use to see if a string fits certain conditions. In this example, we’ll see if a string fits the standards for a real email address.

function validate_email($address='',$regex=''){

	// A regular expression to check email validity.
	if ( !$regex ) {
		$regex = "^[a-z0-9-_\.]+(\.[a-z0-9-_\.]+)*@

			[a-z0-9-_\.]+(\.[a-z0-9-_\.]+)+$"
	}
	if ( $address ) {
		if (eregi($regex, $email)) {
			return true;
		}
	}
	// We don't need an "else" condition. If the
	// script gets this far, it's because $address
	// didn't exist or didn't fit the regular
	// expression in eregi().
	return false;
}

From regex to English

Here’s how it works:

^[a-z0-9-_\.]+(\.[a-z0-9-_\.]+)*@

[a-z0-9-_\.]+(\.[a-z0-9-_\.]+)+$

1. Start with at least one letter, number, hyphen, dot or underscore.
2. After one optional dot, look for one or more optional letter, number, hyphen, dot or underscore.
3. At this point, there should be an atmark followed by at least one letter, number, hyphen, dot or underscore.
4. Valid email addresses should end with a dot that’s followed by at least one letter, number, hyphen, dot or underscore. There will be at least one set, maybe more (like “.something.com” rather than just “.com”).

Bulletproof? No. But it covers most cases.

One benefit of soft keyboards is their ability to change on context. Email addresses, for example, need different characters composing emails.

Appcelerator Titanium has many ways to choose different iOS keyboards by property:

A typical Titanium text field might be written:

var name_field = Titanium.UI.createTextField({
  height:35, top:40, left:20, width:280,
  borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
  keyboardType:Titanium.UI.KEYBOARD_ASCII,
  enableReturnKey:true,
  returnKeyType:Titanium.UI.RETURNKEY_DONE
});

Click each sample below to put it in the sample code above.

The angle gradients create clockwise blends of color around the point a user clicks. Most people stop there. But when combined with other techniques and some creativity, the angled gradient has some surprising uses.

Read the full article I wrote at Webdesigner Depot.

This technique of tinting digital photos works well for presenting information and can improve usability. Just as a gradient shows a range of colors, a monotone or duotone can be used to show a range of data.

Read the full article I wrote at Webdesigner Depot.

Read the full article I wrote at Webdesigner Depot.

Above: Turning block-shaped photos into text means cutting into the image. The more cuts made, the greater a chance for cutting out something important.

Stately text doesn’t need to hurry. When used well, small caps make a design look stable and reliable. They can appear official or solemn. But like any technique, small caps requires understanding the why behind the how.

Read the full article I wrote at Webdesigner Depot.

Above: The differences are subtle; the effect is profound.

This post describes the thought process behind a redesign from scratch. The same methods could be applied to many projects, but this time it began with flowers and errant backslashes. The Volunteer Coordinator at the San Antonio Botanical Gardens hired me to help redesign their volunteer page. The HTML was problematic, causing the images to disappear in Safari and Mobile Safari; downloads weren’t linked; the design was “unappealing.”

At the time of this writing, we’re working on the final draft—using the same ideas below.

1. Gather the content

Given that this page wouldn’t change more than once per month, we started by removing all formatting from the text. Reducing it to headings and paragraphs, plus a quick copy edit, gave us a realistic idea of how much text we had to work with. The client also found several photos of volunteers at work.

Photos © the SA Botanical Gardens.

Images and text © the SA Botanical Gardens.

2. Plan for change

Next I started second-guessing. What if the content tripled in length? What if we cut half of it? What if we had six or nine photos instead of three? What if the page width shrank from 773px to 320px? What if we could have more than one page? The web is a flexible place. Change happens.

I’ve found that like design, clients and I work best with limits. So we set up some parameters:

• The goal is to educate readers about the subject. If necessary, other pages will contain content that supports the overview.
• The vital information is an introduction, a list of positions and ways for users to act (specifically, download an application form).
• The site’s template and CMS require a page width of 743px after padding, but an infinite length.

These facts created the framework from which I would design the page.

3. Imagine with pixels, explain in person

Using pencil and paper, I started doodling. One of my first ideas was for a detail: a new call to action button. (Visually, people volunteer by raising their hands. In every gardening photo I had, people wore gloves. It seemed to fit.)

The client liked my new title, “grow with us.” I assembled two designs in Photoshop and we discussed them with the client. Especially for early revisions, I like to show designs in person or via chat. Not only can I gauge their reactions, but I’m on hand to explain the process: One photo large will get attention; the intro paragraph is the most important text; the button colors were chosen based on the rest of the site.

But most importantly, I stress that these are drafts. A comp to me is a polished final revision to many clients. Understanding that these are rough ideas, no matter how official looking, is critical to my relationship with any client.

4. Revise the layout

Several problems became apparent. First, while the drafts had good hierarchies, none had a clear structure. Thinking in blocks—in this case, stacks—would allow one section to expand or shrink without affecting the others. I used one of the site’s common colors to create subheads for each section below the introduction and elaborated on the intro text.

In early drafts, I had the “volunteer!” button but nowhere to put it. It didn’t fit in the text, with a photo or in a column by itself. So I asked: What else do people need? We realized that we were neglecting other calls to action including an email newsletter signup and the opportunity to learn more. Two new buttons, using the project’s colors, completed the final section.

5. Next…?

The project is in progress, but the method of thinking “problems and solutions” applies at each phase.

From slight selection changes to creating great duotones, Curves is a powerful tool to master… if you’re willing to practice.

Read the full article I wrote at Webdesigner Depot.

Related: Examples of coloring with Curves

Above: Using Curves to create a precise duotone from a grayscale photo.

Above: Curves is a grid of before & after. The horizontal axis represents an image’s current values; the vertical represents change.