The latest problem I’ve been working out is how to add custom form fields for each product. Rickrackbaby.com offers custom monogramming, so I need a place for visitors to type in their custom text. To make it trickier, I actually need two custom fields for each product.

After weeks of going to ridiculous lengths to add two fields AND output their data to the receipt, I stumbled on the answer. Turns out there’s a tutorial in the forums that many, many searches did not turn up. Here’s hoping that this post is easier to Google than that one.

First thing is to add this line of code to product.php (I added it at line 39 after my variations):

<label>Your Name</label><?php shopp(‘product’,’input’,’name=Inscribed Name’); ?>

Then you’ll need to print the input data to your receipt.php and cart.php pages. This is the line you’ll need to add:

<?php shopp(‘cartitem’,’input-list’); ?>

Last but not least, you want to add the following to receipt.php:

<?php shopp('purchase','item-inputs-list'); ?>

And that’s it! Again, the original post is here. Happy Shopp-ing!

EDIT: That code did not work for me on receipt.php. This, on the other hand, did the trick.

<?php if(shopp('purchase','item-hasinputs')): ?>
	<ul>
	<?php while(shopp('purchase','item-inputs')): ?>
		<li><?php shopp('purchase','item-input','name'); ?>: <?php shopp('purchase','item-input'); ?></li>
	<?php endwhile; ?>
	</ul>
<?php endif; ?>

So, inspired by Dick Hardt’s Identity 2.0 presentation I put together this little group of slides. If you haven’t seen the video of that presentation it is very much worth a watch. At any rate, the final product has little in common with Mr. Hardt’s presentation, but it was fun to throw together at midnight the night before and the kids got a kick out of it.

(Does anybody actually use picas? I threw it in for the sake of the math problem, but have never really needed to use a pica for anything.)

(And also, I blatantly ripped images from the web for this little teaching moment. Only a few images are actually my own, and if you see one of yours comment and I’ll credit you here.)

See the Math in Graphic Design PDF here.

But when someone asks your expert opinion, you gotta say something, right?

Jared suggests a different approach.

What our preliminary research has found is a typical recommendation looks something like this:“Users had trouble seeing the field labels. I recommend you put the label on the top of each field, instead of on the left.”

However, some teams are using a different approach: “We’re seeing that our users have trouble with the field labels. We’d like to try an experiment and see if moving the labels to the top of each field makes an improvement.”

I think this approach is much superior to just telling a client what you think. By framing your suggestions as an experiment, you have one more opportunity to make your clients partners in problem-solving.

The advantage of a client who feels like part of the solution is that they start thinking more strategically. It also puts them in the mindset of ongoing work to solve a problem instead of a magic bullet that will make everything perfect. Because when clients expect a magic bullet and don’t get it, they will often go looking for a real one.

So the next time someone solicits your opinion, give them an experiment instead. You can’t go wrong, and even if it doesn’t work you might end up with Post-its.

Here are some resources that became indispensable to me over the last year. Not necessarily all design related, and not necessarily new in the grand scheme. But things I have come to depend on in my quest to create badassedry.

In no particular order:

1. Flickr

Flickr is an unbelievable image resource. It’s infinitely searchable due to tagging, there is a huge variety of images available for research, and some are even available for use in projects*.  Probably my most-searched-for word is vintage. Vintage type, vintage signage, vintage pharmaceutical advertising. Partly because I dig the aesthetic, but also because these days design can get very meta, very quickly. Looking at images of real, tactile items created with metal and wood and paper helps bring a more tactile to my work, even when it’s all digital.

*Flickr now has a search function that finds Creative Commons licensed images suitable for commercial use. I don’t use Flickr photos in big projects, but it is a good source of imagery for comps or pro-bono work. It’s a good idea to contact the owner of the image out of courtesy in those cases.

My second runner up has always been the Library of Congress image archives, but it is bulky and difficult to search. The plus is that most of the LoC images have expired copyrights and are available for commercial projects.

2. ShoveBox

Got this app from MacHeist this year, and it was definitely a score. ShoveBox is a crazy little organizer where you can “shove” bits of information: snippets of text, bookmarks, images, etc. The bits of info are then taggable, commentable, searchable…I organize mine into folders by project so that any inspiration I run across can be shoved right in.

And of course there is an iPhone app that syncs with your Mac. That’s a crucial thing for me, because then all of my little snippets are available when I’m away from my machine. This is a much better alternative than the piles of notes I’d create on my iPhone, only to forget they were there.

3. Harvest

I did use and love Harvest before this last year. But in 2009 I used Harvest’s invoicing and estimates features exclusively in my business. Is wonderful too strong a word to use about an app that helps with accounting? A joy? A little slice of sunshine in my mathematically -challenged world? At any rate, the estimates are easy to create, nice looking, and give clients the option of approving them online. You can turn estimates directly into invoices, or invoice based on hours worked, or create invoices from scratch. Harvest fulfills my dreams of software that has plenty of gorgeous functionality but not so much your brain explodes (hello, C&P!).

Did I mention that I like Harvest? Give them your money.

4. Color Slide iPhone app

Color Slide brings you hundreds of thousands of color schemes via Adobe’s Kuler service. It’s great for brainstorming web colors on the fly. I use it to do research when I’m standing in lines. People still look at me funny when I want to use purple and yellow together.

5. Beak

Yeah, I know. Twitter is the big new thing. Everybody talks about it, but only about half actually get it. And I’m on the silly little bandwagon.

Actually, 140 character non-sequiturs are some of my favorite things to give and receive. My only complaint with most Twitter clients was the difficulty with which they made retweeting or replying. I used Twitteriffic forever, but got sick of manually typing “RT @FlooDeeDoo…” Beak has a nice, unobtrusive interface and does what it’s supposed to. Which is all I could ask for.

So those are my most-used resources of the last year. In 2010 I hope to a) get a list out before the year’s out, and b) include an email/Twitter aggregator in the list. Let me know in the comments what resources you can’t live without.

When saving for web, I’ve always had trouble with my images being lighter and more washed out once saved than they are in Photoshop. Well here’s the solution:

View > Proof Setup > Macintosh RGB

Simple, right? This means you’ll actually viewing your files in RGB originally, so no color variation when you save them as such.

Rock on with your web designing self.