Here’s a checklist you may find useful when judging writing. It’s not really in any particular order, except maybe the first two or three items. And there’s probably a million exceptions to each of these, which I’m sure you’ll helpfully point out in the comments section.The real benefit of using this checklist: you’ll polish not just the words, but also “the big idea.”

1. Will the audience get it?

Use words and phrases you’ve heard the customer say. Avoid, when possible, the industry jargon of the company selling it. Unless industry wonks are the audience…

2. What are you selling them? Really?

Are you selling a widget? Or are you selling the idea that a widget provides some benefit, such as saving time, making money, protecting their future, recapturing vigor, etc? And ask yourself this: what’s the benefit of the benefit?

3. Does it work in context?

A billboard may not be the best place for a paragraph. A trade pub may not be the best place for a consumer ad.

4. Will it grab their attention?

Have you phrased the headline in such a way that it can’t be ignored? In a GOOD way?

5. Does it flow with the brand?

Does over-the-top work? Is subtle totally wrong?

6. Is it simple?

You should be able to reduce most ideas to just a few non-jargon words.

7. Is it too simple?

I said “non-jargon” words. Figure out a better way to say “solution.”

8. Have you tested it?

Ask a few qualified people (unattached to the project) to tell you the what and the why.

9. Can you sell the idea?

Will the client see the brilliance?

p.s. The one caveat to this list? You must actually read the copy you’re judging. Writing is not design — you can’t judge anything but the headline with a two-second glance.

p.p.s. What questions do you have about copywriting? Post them in the comments section, and I’ll either answer them or use them in a future post.

1. “Real World” Interfaces.

Yeah, the menu should totally be on a banner pulled behind an airplane. Get it? It’s a “fly out.”
Leave the real world to the real world. To borrow from Clement Greenburg, “screen is screen, pixels are pixels.” You’ve got a million colors and several million pixels to play with, unlimited fonts, and the only thing you can think of is a coffee table? But the telephone links to “contact us.” Get it? Apple pioneered this interface in 1995, and your idea is neither new nor interesting. Try again.

2. No more popups. Seriously.

And do NOT expand the browser window with javascript to fill my entire screen. Likewise, do not shake it, wiggle it, or otherwise manipulate it beyond changing the content within the browser window. It is my browser, and I have it just how I want it. I am graciously giving you my attention for a few seconds, and if you so much as twitch the screen, I will leave because you have broached my personal space.

3. Buck Conventions.

Like it or not, some web design conventions have emerged over the years, and your mom is just starting to get the hang of it. Search boxes go up at the top right. Navigation on either the left or across the top. And it does not move from page to page, or when your mouse gets close to it. Text links are underlined. Unless you are prepared to retrain my mom, your mom, his mom, her mom, and the millions of other web users who have learned to follow these established conventions, do not break the rules, unless you have a very, very good reason. And no, that reason can’t be “it looks better.” Or “it won’t fit over there.” Make it work.

4. The Filter is the Message.

Just knock it off. Lens flare does not a design make. People who design realtor’s web sites seem especially prone to this. TIP: For an *instant* realty web site, open your realtor’s portrait or house photograph in Photoshop. Play the default action called “Quadrant Colors.” WOW!

5. The Helvetica Goes Up to 11.

Helvetica is an awesome font. Used for your headlines, body text, logo, tagline, bylines, fishing lines, captions, pull quotes, it is boring. It has been used to death by the Web 2.0 crowd, and if I see another all-Helvetica site I will probably look up your house on whois.sc and Google Maps and sign you up for lots of spam and laugh at how tiny your hard drive looks from 100,000 feet.

6. Idiot Quotes.

As opposed to ’smart quotes.’ Even Microsoft Word knows better than to use vertical quotes in setting text. I will forgive you not doing this in HTML text, but when you are using an image for a headline, it’s inexcusable.

On a Mac, get a curly quote with:

option + shift + ]

On a PC, visit Apple.com and order yourself a Mac. On a Linux box, get a real job.

7. Comic Sans.

Greater minds than mine have addressed this serious issue, but with the frequency I seem to encounter it, I think it bears repeating.

Here are a few of the things I’ve learned my first month as a Pop Artist:

1. With Illustrator Dave is lightning fast…he goes faster than he can think.
2. How many designers does it take to use Media Compass?
3. She who holds the scanner controls precious billable minutes.
4. “Detale” is not a fancy Italian term…it’s simply misspelled.
5. Got a “unique” issue with software? Solution = “your computer hates you!”
6. Watching “Awe Inspiring” Flash Transitions is not billable.
7. BYOB = Bring your own Burner.
8. No Neon Green…..EVER!
9. Vinagrette is NOT gravy.
10. Successfully compiling a multi-paged PDF does not mean I have met perfection.

Successfully compiling a multi-paged PDF does not mean I have met perfection.

Okay, seriously…

The most useful and important thing I learned in school was that your learning begins when you graduate from college and get your first job. For me, graduating was just the beginning of probably the biggest learning curve of my life. My first job right out of college proved to be educational in many “interesting” ways. Unfortunately it was a lot like school in that all I learned was what was needed to get the job done with no emphasis on how important it is to continue to stay educated.

In the short time that I have been at Pop Art I have already learned a great deal more than I thought I would. The truth is that so far in everything I have done from editing prototypes to adjusting graphics I have learned something. Whether it is a new technique in a familiar program or a new program altogether, I have yet to have a task that has not taught me a bit of something.

Among the things I’m learning about is the business itself. I had never really stopped to consider how much I was going to learn about the industry; something the school I attended taught nothing about. School was a focus on taking classes that taught the bare basics of design and the necessary software required to get your foot in the door. Very little was mentioned about the business side, no classes and no real foundation to learn how essential it is to fully understand the core of the industry. In understanding how the business works, I believe it makes it easier for a designer to effectively do his job. I’m quickly learning that you have to know the business to really succeed in this competitive industry.

I consider myself extremely lucky to have gotten the job that I currently have where acquiring new ideas and skills is part of your job description and exploring outside of the box is encouraged. Rather than forcing you to “stay safe” it’s a comfort knowing that those around you are certain the only way to advance is to steadily push yourself forward. Progress is good and innovation is necessary. Incidentally it helps that I work among some of the finest creative minds that I have ever met. My co-workers are full of experience and skills that I find very motivating and inspiring as an up and coming designer. I’m excited about all that I’m going to learn here.

I’ve been reading Luke Sullivan’s Hey, Whipplefor the first time, and one of the things that really jumped out in the first 80 pages was his concept of ads touting the “benefit of the benefit.” Of course there are many other ways to sell a product, but this one stood out to me as a new way of getting inspired. The example given is that of the quarter-inch drill bit.

“People don’t buy quarter-inch drill bits. They buy quarter-inch holes.”

Extending that idea to some of our clients:

• Leatherman sells not knives, or even preparedness. They sell an escape from a sticky situation.
• Freightliner doesn’t sell trucks, aerodynamics, or improved fuel economy. They sell more money in a driver or company’s pocket.
• LP doesn’t sell high-tech building products. They sell the American Dream: an affordable, well-built place to call home.

What is your company really selling?

I recently found Packet Garden. It’s a piece of experimental artwork that takes a different approach at visualizing how you use the internet by create a virtual world. Uploads become the hills and downloads are the valleys. Each type of protocol yields a different kind of plane (visit a website and an http tree is planted). All elements of the world are mapped by their internet protocol address.

Download it and check it out!

I was digging through the latest iTunes update and discovered a link to the Apple web site. I followed it and took this screenshot before Apple took down the page. Enjoy!

I have been working with web standards based design for many years now and I see many rookie mistakes. When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp. While this translation is important to keep the client happy, considerable thought process should be involved in creating the semantic markup and marrying that with CSS. CSS is not a collection of hacks to get the browsers to bend to your will. Style sheeting is more of an art form. The difference between choosing inline elements and background selectors is a delicate procedure. How will I manipulate the structure? What is the client brand and how does this work into my markup? Simply thinking through your process before starting each project will save you headaches as the site grows.

1. The client’s brand is important.

To exemplify the brand with visual queues is key. Keeping the logo whole is an example. Now that traditional table based slicing and dicing is gone, we can keep the integrity of our presentational inline images.

2. Keep content images whole.

Images that reside in the content flow should be allowed stability in that structure. This includes the logo or any supporting images in the document. I really enjoy right clicking an image, especially a logo, and receiving a nice whole transparent PNG. Deciding up front is detrimental to keeping the integrity of the design and brand. Even the markup. This may not matter to your client but it matters to your colleges or future employees who might edit your documents.

How is this done. Take advantage of transparent PNG’s. Since the birth of IE 7 and it’s fluent injection in the industry, currently 25% of the market, we can now take full advantage of transparent PNG’s^*.

^*What about IE 6? Their are many techniques to relieve IE6 of it’s transparency bug.

Think of your composition as Photoshop layers. Keeping your images whole allow you to layer your images using z-indexing. Don’t forget that the Trident engine(IE) thinks the the stacking order starts at 0. The Gecko engine starts at 1. Carefully organizing your stacking order allows you to keep track of elemental layering.

3. Go with the flow.

A designer knows what’s best for the client and the user and will make specific decisions about where structure shall live, where the logo will be, where the primary call to action will live, etc. If the logo rests in the top left corner of the comp, it should also live in the top of the markup. Before starting, review the composition and decide what images will rest in the presentational CSS and what images will rest in the inline with in the document. Obviously if the composition shows the logo at the bottom it should still rest at the top of the document. Try and keep it close to what the designer or project team intended.

4. Complex layouts are made of simple sections.

Consider the value of each section of the site when dealing with complex layouts. For example when presented with a 3 column comp, determine the value of each section. Should navigation rest underneath the logo? Does content take reign over all other elements? Taking time before you start will save you a lot of headaches down the road. Here is an example of sectional ordering with three column layout:

1. Logo/Branding
2. Navigation (vertical or horizontal)
3. Main Content
4. Secondary Content (sidebar-two or supplemental content)
5. Promotional Items (ads or internal promos)
6. Footer/Copyright

5. Keep containers to a minimum.

Save your document from structural bloat. New developers will use many div’s similar to table cells to achieve layout. Take advantage of the many structural elements to achieve layout. Do not add more div’s. Consider all options before adding additional wrappers (div’s) to achieve an effect when using a little nifty CSS can get you that same desired effect.

6. Use the @import rule to organize your CSS.

Not only will the @import rule save you from an undesired effect with legacy browsers such as IE4, IE5 MAC and Netscape 4 (a few still exist!) it is easier to maintain. Since you carefully organized your document you will not be ashamed of your un-styled markup.

7. Organizing your CSS helps with future maintainability of the site.

Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css(if needed) and structure.css and on occasion a typography style sheet.

Here is an example of a “master” style sheet and how it is embedded in the document:

• @import url("reset.css");
• @import url("global.css");
• @import url("flash.css");
• @import url("structure.css");

<style type="text/css" media="Screen"> /*\*/@import url("css/master.css");/**/ </style>*

^*Notice the capitalization in the media attribute. Capitalizing “Screen” will save you headaches with IE on Windows Mobile 5. Currently, I use a Plam Treo to access all my mobile online content. (Yes, I will be switching to an iPhone when available.) The Treo’s OS is Windows Media 5. The browser is IE. Are you thinking the same thing as me? Yes, another IE browser to work with and eventually hack. And this one also has bugs. The biggest rendering problem is the mergence of presentational and handheld style sheets. You can imagine the disaster that creates. But their is a fix. If you capitalize the “S” in screen IE will skip the presentational CSS documents and render only the desired handheld mobile style sheet.

8. Organize your alt CSS documents.

What about devices that do not rely on CSS style sheets? Since your structural markup is already organized the visitor should have a pleasant experience with the site. On any device with style sheets or not.

Alternative documents such as arual, print and handheld can be grouped together in a alternative directory. As you can see I place these alternative style sheets in a directory called “alt”.

Use the link tag for other style sheets as so:

• <link rel="stylesheet" type="text/css" media="print and (min-width: 25cm)" href="css/alt/print.css" />
• <link rel="stylesheet" type="text/css" media="handheld" href="css/alt/handheld.css" />
• <link rel="stylesheet" type="text/css" media="aural" href="css/alt/aural.css" />

Do the exact with IE bugs style sheets. Organize them in to an “iebugs” directory.

Use conditional comments to include your IE bugs CSS:

<!--[if lte IE 6 ]>
<code><link rel="stylesheet" type="text/css" href="css/iebugs/ie6.css" />
<![endif]-->

<!--[if IE 7 ]>
<link rel="stylesheet" type="text/css" href="css/iebugs/ie7.css" />
<![endif]-->

9. Hook, line, and sinker.

Once you have your CSS and sections in place start considering where your selector “hooks” will live by using structural hooks in your mark up. This is your saving grace for future editing and maintenance of the site. This will also give you strength in your document.

10. Body tag ID.

In most cases placing an ID in the body tag will allow you manipulate CSS presentational items and markup elements by page by page basis. This also will cut down the amount templatatization (is that a word?). Not only will you be able to organize your sections you will be able to create multiple CSS presentations with out changing your markup from template to template or page to page.

For example if a 3 column layout requires being reordered from page to page. Such as columns switching places. This is easily achievable with the power of specificity and the CSS cascade. Simply adding an ID to the body will allow you to change anything inside and outside the document flow. This is increasingly useful when dealing with pages in CMS systems such as Wordpress.

That’s it. There is so much more to cover, but these simple techniques will get you off to a great start. Until then…

Happy Stylesheeting!

-Ryan Parr http://www.parrfolio.com

I am an Apple fan and an avid Mac user. I have been using Macs ever since I witnessed a G3 400 mhz Mac effortlessly work with my digital video footage when a 3 Ghz Pentium 4 Dell struggled, crashed, and crashed again. That week, some 4 years ago, I bought a G4 “Lamp” iMac and never looked back.

I have a Mac at home and a Mac at work. Both my wife and I have an iPod. I create all of my presentations with iWork. I purchase music, TV shows, and films through iTunes. I have created photo books, greating cards, and slideshows with iPhoto. I have authored multiple movies and DVDs with iMovie, iDVD, and Final Cut. I even generate my family’s blog with iWeb and own a .Mac account. It makes me cry when I think about how much of my money has gone to Apple. They have me hooked. If you are a family member or a friend of mine, you’ve probably had the Apple conversation with me. Too bad they don’t have some kind of pyramid scheme like Amway ’cause I could have made some serious money by now.

Anyway, this post is about what I consider to be their most valuable product. It isn’t anything they sell - no ipods, no computers, no iPhoto, Final Cut, iWork, OS X, or .Mac. The most valuable product Apple has and freely distributes is iTunes.

iTunes is the true digital hub, a free download, and available cross platform (OS X and Windows). If you want to use it purely as an MP3 organizer, you can do that and you never have to give Apple a penny. It is easy to use, looks great, and is full of very usefull features like easy sharing of music libraries with others on the same network.

iTunes is free but it plays a critical role in tying together Apple’s strategy as a whole. Each Mac and iPod is sold with iTunes included. Within iTunes, you can purchase music, tv shows, music videos, and movies. You can subscribe to podcasts, video podcasts, and internet based radio stations. iLife is built around iTunes. iMovie, iPhoto, iDVD, and Keynote can all easily incorporate tracks from iTunes. iPhoto can be used to create photo slideshows set to music or podcast images in GarageBand. GarageBand can easily publish out those podcasts or music tracks to iTunes and sync your latest music creations with your iPod. iWeb publishes podcasts and video podcasts directly to iTunes. When you purchase movies and TV shows, you can bet many of those were edited with Final Cut. It all ties together. As Macworld ‘07 approaches, Apple will surely announce their new “iTV” product that I’m sure will auto sync with iTunes just like the iPod. Many rumors are also circulating that an “iPhone” is about to emerge and a must have feature is iPod functionality that syncs with iTunes.

As I think about this genius strategy, making your most valuable asset free and charging for everything else, it makes me wonder why so many companies are focused on iPod killers and iMac killers and not setting their sights on Apple’s most valuable asset - iTunes.