My name is Andy Ford and I have been a satisfied Costco member since 2005. I send you this letter in good faith and with the context of “opportunity for improvement”. I was compelled to write this out of surprised disappointment – not anger or bitterness.

Since Costco does not issue new cards upon membership renewal, my card still says “02/2005″.  I hadn’t shopped at Costco in quite a few months and could not remember when I last renewed, so I did not know if my membership was still active.

Unfortunately, I could not locate any documentation regarding my most recent renewal. Admittedly, this lack of good record keeping is my fault (but the situation would still be the same if one had kept good records, but was not able to physically retrieve them – ie. out of town). I was left with no idea of whether or not I was still an active Costco member.

So I created an account on costco.com and entered my personal information including my Costco membership number (xxxxxxxxxxxx). I reasoned that now costco.com would surely be able to inform me if my membership status was current or expired. After all, the site now had my personal information and my membership number.

To my surprise, I could not find my membership status in the “my account” page or anywhere on costco.com. I double checked that I was indeed still logged in. Yes, I was still logged in. I spent at least 15 minutes looking over the FAQ page and clicking on what I thought were pages that might lead me to my membership status info. Then – out of desperation – I began clicking on pages that I really didn’t think would have my membership status, but I tried them anyway.

I finally gave up searching costo.com for my membership status and called the 800 number listed on the site (800-774-2678). After waiting at least 5 minutes to speak to a representative, I was greeted by a very pleasant and helpful woman (who’s name I regret I cannot remember. the call was at 10:11am PST and lasted ~11 minutes including hold time).

I explained my situation to her and she mentioned that the Costco mainframes don’t talk to the website. She informed me that my membership had expired in February of 2009. I asked her if she could relay a request to Costco management and to the CEO for me: please show members logged into costco.com their membership status (past/upcoming renewal date).

I spent at least 15 minutes searching costco.com for my membership status. Then I spent at least 5 minutes on hold. My conversation with the rep must have lasted anywhere from 5 to 7 minutes (based on the total 11 minute call time). As I told the phone representative, this was time that both of us could have spent better if costco.com would show membership status on the site. Between the two of us, almost half an hour was spent on just this one simple piece of data (not to mention another half hour or so for me to draft this letter). I can’t imagine I’m the only person who’s ever had to make this phone call.

I am a professional web developer and I understand that there may be technological barriers and security concerns involved in getting two disparate systems communicating. And I realize that my seemingly simple request may or may not be simple to implement.

However, displaying membership status on the site could potentially save countless hours of costco staff time and increase internal efficiency and productivity.

For costco members and costco.com users it would help reinforce the Costco brand of “value”. Personally, I enjoy shopping at Costco because it saves me time and money and I am happy with what I know about Costco’s business practices (and because I think WalMart/Sam’s Club is evil – but that’s a separate topic). This experience made me feel that my time was being wasted – eroding away at my positive perception of the Costco brand.

Respecting a customer’s time is incredibly important – especially online. If a customer feels that their time is being wasted, they will take their business elsewhere.

I don’t know if implementing my request will have the same affect as “The $300 Million Button” – http://www.uie.com/articles/three_hund_million_button – but I think it will be more than worth the effort.

Ironically, the very “Questions & Comments” form that I am using to send you my feedback asked me for my:

• First Name
• Last Name
• Email
• Contact Phone #
• Costco Membership #
• Order #

I was already logged in to the costco.com website! I should not have to enter any of this information (except “Order #” if applicable). At the very least, the first 5 fields should have been auto-populated with this information that costco.com already has!

Also, the first time I submitted the form, I got an error and had to re-submit the form:
“Error:The page you are trying to access is not available. Please contact the administrator for more details.”

I did notice that the URL for the Questions & Comments form was not on the costco.com domain but rather egain.net – https://costco.egain.net/system/selfservice.controller?CONFIGURATION=1000&PARTITION_ID=1&CMD=STARTPAGE&USERTYPE=1&LANGUAGE=en&COUNTRY=us
So this may be a limitation of some third party service, but it is another missed opportunity to show respect for the user’s time. Don’t make your users “take the shit with the sugar”!

Thank you,
Andy Ford

It was really fun to make these recipes (which previously only existed in my head) and document them together. I tend to have the attitude that a recipe is more of a ’suggestion’ than anything. So Julie kept me on my toes with making sure that ingredients were mesured precisely in cups, tablespoons, and teaspoons rather than my usual ’some of this’ and ‘a little of that’.

So, go check out the recipes and let me know how what you think!

Hacks

My CSS developer nature won’t let me write about building things without mentioning hacks or modifications. For the Balsamic vinaigrette, you can skip the fresh thyme if it’s unavailable or unwanted. And if it’s too oily for your taste, add more balsamic vinegar. If you don’t have shallots, you can use onions (red onions are my favorite substitute). For the black bean hummus, you can blend in about a half cup of your favorite Mexican cheese as the final step. Also, if the hummus seems too thick and pasty, you can thin it out with more tomatoes and/or a little vegetable oil.

As I said, recipes are ’suggestions’, so go crazy with it and let me know how it goes.

Thanks and Congratulations

Fuji Mama is featuring guest authors so she can spend time with her newborn daughter. Congratulations to Fuji Mama and the whole Fuji family! And thanks for inviting Julie as a guest author!

From the SacBarCamp wiki:

“Anyone and everyone involved or looking to get involved in the Web Industry in Sacramento is encouraged to attend and present!”

I’m looking forward to it and hope to see a great turnout.

1. Display & Flow
2. Positioning
3. Dimensions
4. Margins, Padding, Borders, Outline
5. Typographic Styles
6. Backgrounds
7. Opacity, Cursors, Generated Content

Here’s the code example:

el {
	display: ;
	visibility: ;
	float: ;
	clear: ;
 
	position: ;
	top: ;
	right: ;
	bottom: ;
	left: ;
	z-index: ;
 
	width: ;
	min-width: ;
	max-width: ;
	height: ;
	min-height: ;
	max-height: ;
	overflow: ;
 
	margin: ;
	margin-top: ;
	margin-right: ;
	margin-bottom: ;
	margin-left: ;
 
	padding: ;
	padding-top: ;
	padding-right: ;
	padding-bottom: ;
	padding-left: ;
 
	border: ;
	border-top: ;
	border-right: ;
	border-bottom: ;
	border-left: ;
 
	border-width: ;
	border-top-width: ;
	border-right-width: ;
	border-bottom-width: ;
	border-left-width: ;
 
	border-style: ;
	border-top-style: ;
	border-right-style: ;
	border-bottom-style: ;
	border-left-style: ;
 
	border-color: ;
	border-top-color: ;
	border-right-color: ;
	border-bottom-color: ;
	border-left-color: ;
 
	outline: ;
 
	list-style: ;
 
	table-layout: ;
	caption-side: ;
	border-collapse: ;
	border-spacing: ;
	empty-cells: ;
 
	font: ;
	font-family: ;
	font-size: ;
	line-height: ;
	font-weight: ;
	text-align: ;
	text-indent: ;
	text-transform: ;
	text-decoration: ;
	letter-spacing: ;
	word-spacing: ;
	white-space: ;
	vertical-align: ;
	color: ;
 
	background: ;
	background-color: ;
	background-image: ;
	background-repeat: ;
	background-position: ;
 
	opacity: ;
 
	cursor: ;
 
	content: ;
	quotes: ;
	}

The somewhat subjective idea is to apply properties in the order that they affect the box model. Did I mention subjective? Perhaps it is, but it makes sense to me and I’m sticking with it. This is more of a self-imposed guideline than it is any kind of outward recommendation.

There is no right or wrong way to order CSS properties, but I’m a strong proponent of picking some kind of method and sticking with it for the sake of consistency.

Why Not Alphabetical?

Let me first say that while I have my own preference, my next choice would be to alphabetize. What I don’t like about alphabetization is that certain properties – in my mind – have inherent logical connections and should not be separated from each other. Probably the best example is width and height (and min-width and min-height). Another example is position, top, right, bottom, and left. To me, these properties are too interdependent to separate.

Typographically, I really like font-family, font-size, and line-height grouped together – and in that order. I also think that other typographic properties like letter-spacing, text-transform, and color all group with each other conceptually and I’d rather not have them separated in the alphabetical shuffle.

class=“advice” rel=“nofollow”

If the approach I take doesn’t suit you, then by all means go with what works for you. My only recommendation is to adopt some kind of order rather than none.

What About CSS3?

You may have noticed a lack of CSS3 properties. I’ve only worked on a few projects where it was practical to use CSS3 properties (and/or their browser-specific implementations). And these have mostly been limited to border-radius, text-shadow, and box-shadow. I found myself putting border-radius and box-shadow near the end with the ‘Background’ and ‘Opacity et al’ groups; and I put text-shadow in with the Typographic Styles group. While ‘border-radius’ sounds like it might logically group with ‘border’, I don’t think it does as the box model is not impacted by ‘border-radius’ in the way it is with ‘border’ (increase in overall width and/or height). To me, it’s a visual effect more akin to something like ‘background’.

Further Reading

I couldn’t find a lot that has been written on this subject. Perhaps it’s absolute minutiae. Perhaps CSS developers have more important things to worry about.

Doug Bowman spent a paragraph on it 4 years ago. Makes me wonder if his approach has evolved or stayed mostly the same.

CSS Property Order Convention by Neatly Sliced recently advocated alphabetization.

I started this thread on SitePoint a few weeks ago.

A recent article on NETTUTS recommended alphabetization and (as is not uncommon for these types of matters) an all out holy war ensued in the comments.

An article at Perishable Press advocates shares one man’s personal preference for ordering property/value pairs based on their character count from longest to shortest. No seriously, I’m not making that up – check it out.

So How Do You Handle CSS Property Ordering?

I’m interested to hear from my fellow CSS developers on this. How do you order CSS properties and what’s your reasoning behind your approach?

I’ve added a new ‘Code‘ section to this site where I’ll be posting more things like the EmChart. I’ve got some 2008 housekeeping to do which will include posting more in the Code section.

Check out the EmChart page.

Putting the (ceramic) LAMP stack on OS X Leopard couldn’t be easier. Here’s how I did it:

1. Sculpt, glaze, and fire ceramic lamp stack. (beautifly glazed by Stitchify)
2. Place on top of closed MacBook Pro. That’s it!

This should also work on Windows or Linux, but I did not try it. Please don’t email me with your installation problems.

Additional photos:

http://flickr.com/photos/analogpanda/3148952983/

http://flickr.com/photos/analogpanda/3149784022/

And if That Wasn’t Nerdy Enough…

I also sculpted the Vivi black mage character from the Final Fantasy video game series:

(also glazed by Stitchify)

The idea is to take the page you’re developing in HTML and CSS and overlay it on top of the design mockup you’re working from. And you can do this inside of any browser. The idea borrows upon the spirit of “Diagnostic Styling” evangelized by Eric Meyer (1) (2) by using a few extra classes.

First I take the design file and save it (save for web) as a flat PNG-32 (or 24) into a directory that’s easily accessed by the css file I’m developing.  Then I open the HTML page I’m developing with Firefox and open up Firebug. Via Firebug’s CSS editing window, I set the HTML element’s background-image property to the PNG design comp I just saved. Usually the BODY element will have some background property set that will obscure the HTML element, so I’ll set the BODY element’s opacity property to about 50% or so.

Now the original design comp will be showing through behind the rest of the HTML document.

To streamline the process a bit, I’ve created these CSS rules which can be dropped into any site’s CSS file:

html.bg { background-position: 50% 0; background-repeat: no-repeat; }
html.bg body { filter:alpha(opacity=70); opacity: .7; }

And on a more per-project basis

html.bg-home { background-image: url(../img/mockup-home.png); }
html.bg-about { background-image: url(../img/mockup-about.png); }

You can try it right now on this site by adding the “bg” and “bg-home” classes to the HTML element using Firebug.  As you can see, there’s a lot on my site that doesn’t really line up so well with my mockup (since this is my personal site, I’ve made quite a few adjustments in the CSS rather than going back to Photoshop). But I think it serves as a pretty good example since there are some things that do line perfectly and plenty that don’t.

Benefits

This technique will work in just about any browser. Just add the classes to the HTML element in your markup and you’ve got your mockup in the background. Having the mockup in the background also means that link rollovers stay intact. And you can still use Firebug as you normally would.

Caveats

IE 6 and 7 have some issues with the opacity filter and positioning so all elements may not be transparent.

Also, since this technique uses the HTML element to display the mockup as a background image, that means it will override any background you may have already set on the HTML element. Personally I probably only set backgrounds on the HTML element about 50-60% of the time and they’re usually pretty not too complex. I don’t see this as being much of a drawback, but it is worth stating.

Why not just use Pixel Perfect or OverlayComp?

If you haven’t seen it, there’s a really cool tool for Firefox called Pixel Perfect (more specifically, it’s a plugin for the Firebug extension) which allows you to overlay a design comp over the top of a web page you’re viewing in Firefox. This is an ingenious tool and I tip my hat to the Pixel Perfect developers.

What I personally don’t like about Pixel Perfect is that it adds the image file on top of everything effectively disabling your ability to use Firebug for on-page CSS editing. The demo video on their site looks like someone is actually using Firebug while an overlay is present, but I was never not able to get that to work at first because I had the “Hide overlay when inspecting” option turned on (Thanks to Pixel Perfect developer Mike Buckley for setting me straight). So, like OverlayComp, inspecting elements is still very possible – just not accessible via right clicking on the web page. Also, it’s It is a Firebug plugin, so Firefox is the one and only browser it works in.

OverlayComp works similarly to Pixel Perfect in that it places your image over the top of the html. Inspecting elements in Firebug is still possible – just a little extra work. It requires adding javascript directly to your page with a script element, but it does work in all browsers.

At the end of the day, you’ve got to use the tool that works best for you.  I’d love to know how other CSS developers are approaching this and if there are any other tools available for this kind of thing.

I’ve worked almost exclusively in the field of web design (and development) and very little in print design. Not much as someone who “does design” but very heavily as someone who “implements designs” with (X)HTML and CSS. Over the years, I’ve seen patterns emerge with print designers doing web design. Little web design details that are often overlooked that don’t usually apply to print design.

I’d like to discuss some of the mistakes and oversights that seem to be common with print designers switching to web design. My intention is not to be rude or discouraging, but to be informative and provide a sort of “checklist” of common mistakes for print designers transitioning to web design and for the people like me who implement their designs. A lot (probably most) of the really amazing web designers came from a graphic design and/or print design before they did web design (Jason Santa Maria is a shining example). So with a little time and patience, I think any talented print designer can become a great web designer.

Resolution

I have to mention this first because I’ve seen it a lot, and it’s pretty important. The web is a 72 pixels per inch world. Not 96. Not 300. Not 600. Seventy-two.

Typography

A lot of print designers aren’t aware of the limited web safe font palette. Luckily you can use techniques like sIFR or FLIR to get any font you want, but that’s best suited for headlines or small bits of text and not really intended for paragraphs of body copy. You should still stick to web safe fonts for body copy.

Other typography related print designer faux pas I’ve come across are using Photoshop’s faux bold and/or faux italic. This can’t be done on the web – use the regular font-style controls. Another is relying on paragraph hyphenation – web browsers don’t support hyphenation (possible workaround). Also be very careful in using justified text. It can be done, but the results aren’t always great (Jon Tan’s site is one that does seem to pull off justified text quite well. His site is also worth mentioning for the amazing design, layout and typography as well as well written articles about design, layout, and typography ). Another thing to watch out for is messing with vertical and/or horizontal scale. There is a “font-stretch” CSS property, but has little or no support at the moment.

Another font flub I see is with font sizes. Or more specifically – half-sizes. Browsers can only display in increments of 1. So 13.5pt isn’t going to work. Round it up or down to the nearest whole number. Also, some print designers will use very small font sizes like 10 or 11 pixels for body copy. This is pretty hard to read on the web – especially for people with less than perfect vision.

Viewport

A lot of print designers neglect to account for the resizable nature of the browser viewport – probably because they’re used to a sheet of paper always being a specific size. They’ll often not spec what happens (with backgrounds, borders, etc) when the view port is wider than the provided design or if the design is to be centered or aligned left or right in the browser. Sometimes they also won’t account for the bottom of the page if the content doesn’t fill up the entire height of the view port.

Sometimes they may have a spotlight or some other type of effect in the background that clips off in the provided design, but you’ll need that background to resolve to some kind of neutral and/or tile-able pattern when the view port is larger vertically and/or horizontally than the provided design.

Think of the web as having a nearly infinite bleed.

Vertical Pixel Precision and Vertical Grids

You can do a lot of things with CSS, but sometimes there are elements in a design that rely too much on text filling up a precise vertical height. Usually this is in some sort of a columnar/grid context. But invariably, the marketing/communication folks will change that text 12 times before the site goes live. The vertical height of the actual text columns may not end up being the same and the integrity of the design could be compromised. This happens pretty easily with CMS sites.

Sometimes you’ll have an image next to some summary text and the text will be precisely the same height as the image. But what if that text was longer? Will it wrap around the image or keep a consistent columnar width? Not a big deal, but often not accounted for.

Another print designer tendency is to use specific page heights regardless of content. I can see how this could be a force of habit for a print designer. It is possible to implement precise height pages on the web, but it’s better to plan for content causing the page to stretch vertically and let go of the notion of precise vertical heights.

(Non) Interaction

A very common oversight is neglecting to specify link rollover and or “on” state colors/treatments. This can occasionally slip the minds of even very experienced web designers, but much more so with print designers transitioning to web design. From main navigation all the way down to body copy, it’s good to spec link states. You can put the rollover states in a hidden layer or layer group with “rollover” in the layer name so the person implementing the design knows what it’s for.

PSD Layers

Get rid of the unused stuff

Cutting out the cruft is very considerate. If there is a layer that’s not used in the design, then that layer doesn’t need to be in the delivered PSD. Unused layers just make the file size unnecessarily larger and make working with the file a little more confusing. Any hidden layers or layer groups that are in the delivered file should actually serve some purpose such as being rollover states or notes for the developer implementing the design. I don’t need to see all of the super high-res watermarked istockphoto images that you didn’t use.

Group it. Name it

This is not common (and probably has more to do with overall experience rather than preferred design medium), but I’ve seen some PSDs that don’t use layer groups or even layer names – this is a real pain to deal with! Give every layer and layer group a meaningful name – I don’t know what the hell “layer 47″ is, but I can probably figure out what “divider lines” or “search box” is.

Miscellaneous

• Web safe colors: some print designers will try to stick to web safe colors. This is an outdated concept (for most audiences) and we don’t need to worry about web safe colors anymore thankfully.
• Fancy Forms: Some form elements – mostly select boxes (dropdowns), checkboxes, and radio buttons are a pain to style consistently in all the major browsers. There are some javascript workarounds, so check with your developer before going too crazy.

I think that about covers the most common mistakes I’ve encountered with design files delivered by print designers switching over to web design. So if you’re a print designer transitioning to web design, or if you’re someone who is working with a designer in that position, these are probably the most common things to watch out for.

This is also a very “blue-collar” list coming from the perspective of an XHTML/CSS coder who’s job it is to implement designs.  I’ve been exposed to a lot of great design by working with a lot of incredibly talented designers, but I do not have the proper design education to truely call myself a designer.  I think there could be another level to this discussion which I am not qualified to delve into; but a more theoretical design discussion about the theories and approaches to print design versus the theories and approaches to web design. Also, I have not touched the areas of usibility or accessibility which become much more important on the web.

Updates

August 29, 2008 – Friend and fellow front-end developer, Mark Aplet, wrote about this very same topic a couple months ago. We cover some of the same ground, but Mark’s well written post covers quite a bit and gets into some finer detail. If you found my post helpful in any way, you’re sure to dig Mark’s.

April 16, 2009 – Jeffrey Zeldman just announced that his book “Taking Your Talent to the Web: A Guide for the Transitioning Designer” is now available for free. It was published back in 2001, but still makes relevant points.

Also Smashing Magazine just published an article titled Switch from Print to Web: Where to Start? which has a lot of advice and links to resources.