Two kinds of typos

To be clear, I’m only speaking about one kind of typo here as there are two types:

1. Typos that cause problems
2. Typos that don’t cause problems

A misspelled word in your blog post, content page, or email probably isn’t going to cause a problem. What will cause a problem is a typo in a link, file structure, or code file. Additional problem-causers:

• Misspelled names (people hate that)
• Misspelled URLs (people hate that too)
• Misspelled word in headlines (might not cause a problem but it’s a big typo, literally, so it’s extra embarrassing)
• Incorrect date on a publication

A new name for a problem-causing typo: the F*CKING Typo

I’m calling that first type of typo above a “F*cking Typo” because that’s what you say when an hour of problem-solving leads you to a missing letter. It’s also what you say when someone publicly corrects your painfully obvious error.

The best solution: a reminder

To help myself cut way down on F*cking Typos, I’ve made myself a reminder that I printed and placed on my monitor. It occurred to me that everyone needs this kind of reminder so I’m offering it to you, completely free of charge, in two formats: the original version, vulgarity in tact, and a more PC, office version with an asterisk replacing a key vowel. Print, choose, cut, and tape it to your monitor.

Download the F*cking Typo reminder [PDF]

That said…I’m only human

The lamest excuse someone could give for making a dumb mistake is “it’s complex!” Working on the web is, in fact, complicated, but the reason errors are made is that humans are fallible and perfection is impossible. Ask anyone who has written a book and they’ll tell you they found typos even on the hundredth time they read the final draft.

I try hard to get things right the first time but it always helps to have a second (third, fourth) pair of eyes so I’m not embarrassed to submit (mock or proof) pages with a few errors. In my mind, I’d rather get it to you quickly and correct errors on the second round than spend an inordinate amount of time looking for slip-ups.

Related posts:

1. Intoxicated by the possibility of making mediocrity hard to sustain (#100ppl) I was asked recently what my favorite Gaping Void piece...

10 Must Track Google Analytics Goals (saved on Delicious )

I’ve been reading a lot more about web analytics these days and realizing the power it has in optimizing your website. Getting a website up and running is just the first baby-step towards actually being on the web and finding customers and clients. This ties into my concept of web strategy. Just getting out there is a great start but having a website without understanding how it’s working for you is just shooting from the hip. Having a benchmark and collecting data to understand how people are using your site is critical for every business owner.

10 Steps to Advanced Keyword Research (saved on Delicious )

Oh no, more SEO! Yeah, more SEO.

A big part of getting your site visible and getting people to come from search engines is picking a set of keywords that can perform. I’ve written about the basics of keyword research and even gotten a little philosophical about this keyword thing but this link from SEOMoz goes really in-depth. You might start scanning this article and thing “whoa… this is way over my head” but I would urge you to understand what they’re talking about. People treat picking keywords like it’s just a shot in the dark or just something to get out of the way but it’s hugely important. Improving your search engine rank is the same as moving your store front from behind the mall to the boardwalk. More eyes, more ears, and more mouse pointers means more conversions. The better site owners understand their own SEO, the easier it will be for them to exercise their business knowledge on the web.

15 sites web developers and designers should know (saved on Delicious )

Not everybody out there is going to need this but even if you’re not a designer/developer, there are some great tools on here to help you understand the process. First, try ColorCombos to get a sense of what colors work together and give you a few ideas for that redesign. Lipsum is where that crazy Latin text comes from on sites that aren’t finished… try sending a big block to your significant other and asking “so what’s your answer?” at the end. What the Font can identify fonts from images, a great resource if you need to recreate a logo or graphic but aren’t sure what fonts were used. Also, try Test Everything to see how your website is performing.

Twitter links

IE6 must die for the web to move on: The title says it all: Internet Explorer version 6 is really holding the web back. If you’re using Internet Explorer to view this page, go to Help > About and if the version number is anything less than 7, please upgrade.

Everything You Need to Know About Twitter You Learned from Grandma: Great post on how to use Twitter. It’s totally true: plain old-fashioned courtesy and respect go a long way both in person and online. Who knew?!?!

Swapster digital media trading: I’ve been working with the folks at Swapster to help them do a press release and, in the meantime, starting using their service. It’s a really easy way to list books, CDs, DVDs, and video games to trade with others. Try it out!

9 Marketing Tips from a Six-Year Old’s Lemonade Stand: Really well executed and thought-provoking past on how to approach your marketing.

H&FJ Fonts for Financials : I love REALLY technical posts about design, I’m not sure why. This is a nice long article about the types of fonts that should be used in financial documents… how specific can you get? Sexy fonts too…

Data on Social Media Use: I just found this interesting… quick 30 second read.

That’s all for know… hope you found these helpful. If you want more information about the stuff here or have a question, post it in the comments or find me on Twitter and I’ll be glad to help!

Related posts:

1. Web strategy links and Rescources for July 17th It looks like everyone liked my little collection of links...
2. Josh Can Help: Helpful web strategy links for July 10th This is a new thing I’m going to be doing...
3. Web strategy and resources links for July 31st Once again, here are my Friday web strategy links. Lots...

The goal of this site

The website team set out with a few goals in mind (listed in order):

1. Increase sales leads
2. Claim a better position in search engine ranking pages (SERPs)
3. Create a better landing page for email campaigns and conference leads

To this end, the design and content of the site serves to drive visitors towards the Contact Us form (aka the request a demo form). The software being sold on this site is a large, campus-wide relationship management tool so the option to pay and download does not exist. Our goal is to convince people that we’re worth the time to check out, drive home a few salient points, and get them to call or email for a demonstration.

Information architecture to assist our sales lead goal

Since the goal was to funnel visitors towards the contact form, the site needed to avoid navigation confusion and always have the option to jump right to a contact form. Here’s what was done to achieve that goal:

• At the top of every page is an attractive button that leads to the demo request form. Studies show that page elements that look like things people can touch in real life get the most clicks. There’s no missing the button and no mistake what it does.
  
• Content resides only one or two levels deep. This means it takes only one or two clicks to get to the main content. Portal pages were created for topics with more than one page to create an index and a good landing spot for general links like the clients we support and our main selling points.
  
• Appropriate headlines and link text was used to both inform and entice. Whenever possible, long pieces of content were broken into sections and/or lists to make it easy to scan.

Other features

A lot of time, energy, and planning went into building this site. This is easily the most well-planned, fully designed site I’ve ever built. A few things I’m really psyched about:

• The whole thing is completely valid XHTML and CSS written by hand from scratch. It is served through PHP to make it easier to add pages and make changes. In the future, I’ll have certain pieces of content served up through XML (or CSV) so other members of the marketing team can switch around the content.
  
• We created a general keyword strategy for the site which is miles apart from what existed before. On the old site, we were accidentally ranking for a few different words. This new site is optimized for those words and a few others.
• Navigation at the top and the site map in the footer at the bottom make sure people don’t get lost in any particular section. I also added a dynamic breadcrumb function just below the header that keeps track of where people are in the site.
  
• The sidebar modules are just that – modules. They all reside in the same PHP file and can be changed in one place to affect each instance on the site. The content within each box is served up based on the page being viewed.
  
• The forms go to different mailboxes depending on the option that is selected. A special CSS-based anti-spam measure was added to replace the original idea of using a reCATCHA.
  

What’s next?

The site is not quite complete but needed to be launched. Here’s what’s just around the corner:

• Drop-down navigation for certain options
• Pages specific to each product (remove the annoying PDF documents)
• A little better linking in between pages
• Tighten up the keywords used for each page
• A few more design touches here and there (pull quotes, a little more texture on the sidebar, etc)
• More context for the Contact Us box (or, potentially, remove it completely).

Hope you like it! If you’re interested in something similar for your business, please don’t hesitate to contact me for an estimate!

Related posts:

1. You want to create a website but why? Make sure you can answer that question… The urge to create a website comes from many different...
2. Did your website or blog just crash suddenly? You might have a problem with your permissions… So I’m still mad at my web hosting company… really...
3. Website performance and health reports Google Analytics (GA) and Webmaster Tools (GWT) are used to...

http://www.thedesigncubicle.com/2009/04/50-creative-business-cards-of-50-graphic-designers/

Thanks to Brian Hoff at Design Cubicle for the compliment!

Business cards on Josh Can Help

Related posts:

1. New business card design Sharing the front face of my next business card: For...
2. New new business card design: the process + feedback My last business card ordeal was such a cluster that...
3. Fresh cards from Fresh Impressions in Florida It’s not everyday, or even every month, that you can...

Design is More by ellywilliams on Flickr

I recently posted in a great topic titled “what is expected of a designer,” a question I’ve pondered many times on my own. I wanted to share a few of the responses but, because it’s a closed group and you need a login to view the posts, I don’t want to include information on the poster. Just please note that anything in quotations below are not my original thoughts and were written by someone else (which, if it was you, let me know and I’ll add a link for you or take it down if you’d like).

So, first, the question:

What is expected of a designer? Over the years, my job has evolved from spec’ing type to writing branding guidelines to puzzling through code, with everything else in between. But there’s a ceiling on the perceived value of a graphic designer, or “Design Consultant”. What are your experiences juggling the many aspects of our work?

My response, verbatim, is this:

Designing without any concept of how the whole project comes together (think website or brochure or presentation) or what the limitations are (platform or budgetary or format) puts you at a total disadvantage. I’ve worked with designs from people who understand the web and from people who don’t and the difference, in both time and final product, is clear.

I think a designer should be expected to think about the whole project: the medium, the message, the format, the audience, the technology, and the client. The closer the pieces of the project are to the design, the more they should know. Should a front-end designer be fluent in SQL? It might make for an interesting combination but knowing the syntax isn’t going to make the site design better. Should the designer understand how the site is going to interact with the database? It’s not necessary but it might help them work better with the developer.

In short, a designer needs to see the big picture of what they are doing. Possessing incredible design skills is great but, without seeing how your creativity plugs into everything else, you’ll perpetually be at a disadvantage (and, potentially, be difficult to work with).

What do others have to say?

Employers recently seem to get the sense that the term “Designer” should also encompass the title of “Developer”. It’s amazing and frightening the perception of what a designer is now – especially in web. I’ve read so many posts that wanted a “Rockstar Designer” … who also did ASP.NET , PHP, and other coding skills on top of the standard (X)HTML and CSS.

Employers have to realize that we’re not a dumpster for all the cumulative skills and knowledge of communication. I do admit that the role of the “designer” has to evolve however.

“A dumpster for all the cumulative skills and knowledge of communication;” I’m certain I could not put it any better.

There’s give and take with everything. Hiring someone with both design and programming skills means that you want a jack/jill-of-all-trades. This implies that you’re not looking for a designer at the top of their field and you’re not looking for a programmer that can write applications with their eyes closed. There is nothing wrong with desiring this particular combination but the problem comes when your expecations are not in line with what you’re asking for.

I have to use myself as an example. I’m proficient in the Adobe products and really love playing with layout, typography, and colors. I have an eye for detail and, if I can toot my own horn for a second, I’ve come up with several effective, pleasing designs. I’m always improving and always learning but always humble because I’ve seen the kind of design work that’s out there and I’m very impressed. If a project requires a very polished, unique design, I might end up hiring someone else (not after trying it out, of course). I do that because I know that practice begets mastery and, because my practice is broad, my skill level is not at the same level as professional designers. Same goes for code; I can hand-code an XHTML page or email, use CSS very effectively, and add some PHP to make it dynamic and easy to use. I can build templates for WordPress blogs and make the PHP code do what I want. I can also find my way around the ASP.NET of DotNetNuke enough to make small modifications. I am not, however, capable of building a dynamic MySQL driven site (big “yet” there… in the process of learning). I’m also not able to write a Facebook app, a WordPress widget, or a Pligg module.

What I do, I do well and do often. What I can’t do, I reach out to experts to have it done right (while learning at the same time).

I heard an interesting talk by Milton Glaser a few years ago. His approach was that designers need to stay with what they are good at—the magic that makes people look; that makes people feel a certain way, etc. He seemed to feel that designers were going down the wrong path by positioning themselves as business experts (via emphasizing their marketing skills), as that’s not what makes them special.

This is from the orginal poster and adds to what I was saying above. When you hire a designer, you’re making a statement, you’re saying “what this looks like really, truly matters.” You can hire a designer for almost anything you do… home construction, documents, car modification, advertisements, web sites; the list, of course, goes on ad infinitum. You hire the right designer for the job (i.e. don’t hire me to design your kitchen), you communicate what you want and need, and you leave the project in their capable hands.

It’s all about separating roles and jobs. If you hire someone to both design and develop your website, they better be good at swtiching hats (cough). I’ve done several top-to-bottom web pages and blogs and I love the process. As a classically-trained scientist, a life-long artist (I create a lot more than I share, that’s for sure), a constant writer (see this blog, former blog, long emails, and technical documents), and an occasional programmer, I’m comfortable in both halves of my brain. Where I get into trouble, however, is when I’m not able to separate these skills and take each one on individually. If I’m given a big project with a tight deadline, it can be sure I’ll reach out to other people for help. If, however, I’m given the time I need, I take each step on individually and enjoy switching hats.

If you’re looking for someone who takes great pride in what he does, is constantly improving, and seeks help when he needs it, please get a hold of me. I’d love to get you and your business on the web!

Related posts:

1. What’s that crazy Amazon thing on the right side of your blog? why, it’s my Amazon Affiliates widget! Introduction There are two...
2. Curing Underemployment (or) Josh’s Six Step Plan to a Great Resume (part 2 of 6) Read the first step towards writing a great resume, write...
3. One components of Josh Can Help’s website philosophy – Understanding Introduction One of the most challenging and interesting parts of...

1. What should the website accomplish?

First, we need to start with the goal of the website. It could be as simple as “generate leads” or more in-depth like “improve specific community interaction.” It’s fine to have a primary goal and a sub-goal or two but, just like anything, as the purpose gets broader, the efficacy for each goal will decrease. A specific, attainable goal is key.

Who builds a website without a goal? Why go through the time and effort, why spend the money, and why go through the hassle if there’s no reason to do it? And yet, time and time again, websites are built, time is wasted, money is spent, and hassles are created without a solid outcome at the forefront of this flurry of action. As a thought experiment, think of a popular website. In fact, think of ten of them. Now, think about why they are popular. This should go a long way towards convincing you that a good website needs a goal. I’ll let a few and take an educated guess as to the goal they had.

2. What are the design, content, or technological constraints for the site?

There is no right answer to this; many people start out with no content and no identity which is fine. Other people already have a logo, slogan, content, and color scheme that can’t change. Before building a site, I have to understand what already exists and what my limits are. Here are some of the questions I’m going to ask you and it’s OK if the answer is “I don’t know:”

• Do you have a web host and/or domain name (the domain name is the main name of your site and costs about $10-15 per year depending on where you go. My domain name is “joshcanhelp.com”)?
• Do you have any content that has already been created? This includes product images, marketing copy, articles, company logo, anything.
• Does your company already have a logo? Color scheme? Marketing collateral that needs to be mimicked?
• Do you want to learn how to update content on your site by yourself or will you need assistance? This will depend on the site, your staff, and the amount of involvement you want to have.

3. Do you envision anything for your site?

Are there features, designs, or layout aspects that you’re interested in? This step is optional because you may not have a vision for the site but it’s important to ask. To answer this question, I usually ask people to send me 3 or 4 sites that they like and tell me what they like about them (interaction, usability, aesthetics, layout, etc). It’s good for me to understand your vision of the site so I can create something that you like and something that you’ll be proud to show people. I have worked with many people that come to me with a site that they did not have a lot of creative control over. If I see sites that you like then I can get into your head a little more.

During this step, I also want to explore what you see for the site in the future. Will there be more information later? Additional products? A blog? A gallery? The more information I have at the start, the easier I can make changes later. Having a short-term goal for the site with a vision for it’s future is great and will save you expense and time later.

4. Plan, budget, time frame, and paying Josh

With this information, I come up with a plan of attack for the site. This plan includes:

• A vague idea of the design and layout
• A list of suggested features based on what you want and your goals
• A cost estimate
• A suggested timeline

Once we agree on a budget range, I ask for half up front with the expectation that the rest is paid upon completion. Other payment options can be explored but I don’t release any files until the final amount due is paid.

5. ATTACK!

At this point, it’s time to get busy. First, I’ll come up with a content structure and navigation suggestions. Before we move on, I explain this plan in detail and make sure that everything is up to client expectations. Next, using this structure, we’ll come up with a Photoshop design for the pages themselves. Usually one or two photoshop files can suffice for the site unless each page is different. Tweaks are made, images are shared, and the project moves forward.

If we’re also handling keyword analysis, we’ll walk through the selection process and settle on the words to be used throughout the site. It’s important to nail these down early so they can be build into the site instead of being added at the end (saves time).

At this point, I also ask for all content, images, and logos that will be used. It’s ok for this information to come little-by-little but I need to be aware of everything that needs to created so the project does not go over-budget or far past the deadline.

6. Ongoing…

Throughout the process, I keep in very close contact with my client. I host the site on my URL and email as steps are completed. Tweaks are made, content is added, and everything comes together.

7. In the home stretch

Once the site is build according to specs and I’ve had a chance to scrutinize everything, I’ll ask you to make a very thorough walk-through to make sure the content is what you wanted and that no mistakes slipped through the cracks (we’re all human). You’ll want to look for the following:

• Correct images and content in the right places
• All information provided is incorporated
• Navigation works well
• Aesthetics are what you were expecting

I ask that all changes and modifications be submitted within a couple weeks of finishing the site. Mistakes on my side are corrected no charge (of course) but deviations from the originally supplied content and design will be charged at the regular maintenance rate.

8. That wasn’t so bad now was it?

When the site is completed and approved, I burn all files (PSD, HTML, JPG, everything) to a CD and, once the final payment is made, I upload all the files, send the CD, and test the site one last time. Your sales go through the roof, praise comes from far and wide, and the book/movie deals come rolling in (results may vary).

Sounds good, doesn’t it? If you need a website, blog, or other kind of on-line presence, download my pre-website homework form and let’s get it started!

Related posts:

1. Building a homepage from a blog: Part 2: Finalizing the design and planning out mark-up and CSS structure. Introduction Last time we left off, I had put together...
2. Building a homepage from a blog: Part 1: Conceptualization and Planning I’ve grown bored of my original homepage’s look and feel...
3. Recommended reading for web site owners The JoshCanHelp Recommended Reading list This post is because you...

On Friday, I posted the 5th step to a great resume, writing a “final” draft.

Step 6: Lay it out as you go through it again (and again [and again])

blueprint by dog on wheels on flickr

This is the final step and possibly the most important one. This is called “checking your work” or “avoiding the if-only-I-had’s.”

If you haven’t formatted the document, now is the time. You’ll probably want to check out my guide on simple typography in any document to give you an idea on how to keep it simple and effective. Remember to style for the position. If you’re applying to a law firm, keep it tight, simple, and classy. If you’re applying to a graphic design company, spice it up a bit, use some color, and show them you know a thing or two about alignment.

I like to style as I read – as long as it is the first re-read of many. Reading concurrently keeps the flow of the document in mind as I put it together. It also breaks things up because reading, re-reading, and editing can wear a little thin, especially if it’s your writing.

Read it through normally once or twice, then mix it up a little bit:

• Read it out loud to yourself or someone else. If it sounds awkward, it’s probably wrong. If it’s awkward to you, the person who wrote it, imagine how it will be to someone else. Toss the sentence out and re-write it or consider breaking it up. Sometimes, the only problem is a missing period and another capital letter.
• Read it “backwards.” Start at the end and read each sentence in opposite order. This is annoying and a bit frustrating but it does work. Since you wrote this masterpiece, your brain knows what is coming next. If you read it in the wrong order, it forces you to think about each sentence individually. This is a good thing.
• Give it to someone else to read. This is a critical step, especially for resumes. It’s improbable that a second set of eyes WON’T catch something that you missed. Bite the bullet and hand it off to a spouse, friend, or parent.

If you’ve read it more than 3 times, tried all three tips above, and feel good about it, then it’s time to get it ready to print.

Final steps to get ready to send these out

I said six steps but here’s a few bonus ones that bring this process home…

Save a copy of each document with some kind of indication in the file name telling you the position to which it corresponds and the date it was finalized. Obviously keep an editable copy but also make sure you’re making PDF versions and sending those out. A PDF will look the same on every computer in every program without exception and that’s a good thing. Get yourself a free PDF maker (CutePDF works great if you don’t have the Word plugin or Adobe Abrobat) and make yourself some PDFs.   Make sure to review the PDF before you send it to make sure nothing changed during the translation (rare but it happens).

Keep a copy on a USB drive if you have one with you, in online storage if you use it, or email it to yourself so it is always accessible. There’s nothing worse than needing your fresh, amazing resume and not having it. Plus, keeping it in your email makes it easy to forward out at any time. Google Documents now allows PDFs so you have no excuse to have this important document handy.

Finally, make sure you have some printed copies around. Go to Kinko or FedExko’s or whatever and have them print it out on nice paper. Don’t go crazy with the marble-finish, 98% cotton paper, just get something nice, relatively thick, and nice to touch.

Following this process to a “T” will make sure that your resume puts your best attributes forward. If you need helping writing or deigning your resume or want to put together an online presence to promote yourself, please get a hold of me!

Related posts:

1. Curing Underemployment (or) Josh’s Six Step Plan to a Great Resume (part 3 of 6) Check out yesterday’s post, the second step towards writing a...
2. Curing Underemployment (or) Josh’s Six Step Plan to a Great Resume (part 5 of 6) Yesterday, I went through the fourth step in my resume-writing...
3. Curing Underemployment (or) Josh’s Six Step Plan to a Great Resume (part 4 of 6) Yesterday, I wrote about the 3rd step in the Josh...

Step 5: “Final” draft time… buckle down

Greyhound Racing: Home Stretch by sombraala on flickr

OK, you have a resume, you’re about 80% there. Now it’s time to bring it all together.

First, lay it all out. Personal statement is first, then what? Education? What is the most important thing about the job you’re applying to? If you’re applying to be a web developer, your skill set is probably more important than your BA degree from a few years ago. If, however, you’re applying to be a college professor, your education is probably pretty darn important. Don’t stress too much about the order, however, because there’s plenty more to do.

Once you’ve got everything in place, it’s time to start collecting, cutting, and collating. In your skills list, group similar skills together and cut out parts that are non-essential or just distracting. Use commas, connectors, and creative words to cut down on length and content.

Next, take a hard look at your positions and do the same. You want to reduce the length of your resume as much as possible but include the most important things. This is a delicate balance and it might take a few iterations to get it right.

You also want to be telling an interesting story about your employment. Stop laughing, I mean it. It’s all connected and you had the jobs you had for a reason. For each position, you want to show your progression and why you were important at each step of the way. Just because you did the same thing everyday for 3 years doesn’t mean you weren’t an integral part of the process. Make sure that the progress and the story you’re telling ALWAYS relates back to the job for which you’re applying.

A few tips:

• Watch your tense. If it was a previous job, then use the past tense (you “were responsible” for this and “facilitated” that). If it is a current position, then use the present tense (you “are responsible” and “facilitate” this and that).
• Go easy on the stock “jobby” words (like the two I used above). You can only say that you were responsible for so much before it gets a bit repetitive. Be creative in your speech and color it up a bit. Say what you need to say but inject your personality in there.
• There is no absolutely correct way to write a resume. One place might look down on a super-corporate, dry, humorless resume while another might expect it. The only thing you need to be sure of is the grammar and the punctuation. If you suck at either or both of these, there are services out there that can help you for cheap. It’s worth it to spend a few bucks to make sure it’s right instead of ending up in the “no” pile just for a mis-key.

Get it written, make sure it’s not over a page (unless it really needs to be [show-off]), then give it a rest. The more you work on something so boring and important, the more you’re going to hate it. Crank it out and put it down for a day.

Related posts:

1. Curing Underemployment (or) Josh’s Six Step Plan to a Great Resume (part 4 of 6) Yesterday, I wrote about the 3rd step in the Josh...
2. Curing Underemployment (or) Josh’s Six Step Plan to a Great Resume (part 3 of 6) Check out yesterday’s post, the second step towards writing a...
3. Curing Underemployment (or) Josh’s Six Step Plan to a Great Resume (part 6 of 6) Ha! I thought forgot about the last one, huh? Nope....

Introduction

There are two companies online that I like a lot (love?) and will always patronize (as long as they stick to their formula); Amazon.com and Newegg.com. Put simply, the prices are great, I’ve never had an issue, what I order shows up fast, and, when I need it, the customer service is great (Newegg’s service is off-the-charts great). As such, I also give them respect on here and by word-of-mouth.

Someone clued me into the whole Amazon Affiliates program where you advertise books you like from Amazon on your site. Since I wanted SOME kind of monetization and I like to show my support for things I really like, it seemed like the perfect combination. I think, however, it requires a bit of explanation so you don’t think that those are just random books. I actually picked them out and read them myself and now I think you should do the same.

I’m a newbie so what’s in it for me?

So, let’s say you’re a bit web savvy and let’s say you’ve got a lot to say so let’s say you start yourself a little blog. You start off slowly, write a few posts, get some momentum and now you want to see what you can do about raking in the dough.You get to researching blog advertisements and, BAM, too much information.

I don’t think you can go wrong with the Amazon widget, to be honest. Pick books that match your content, pick books you support and why wouldn’t people click on the links? I think it’s honest, it’s up-front, you can support something you agree with, and their widgets look great.

I’ll report back when I’ve retired off of the revenue and tell you how to do the same.

So what’s so great about those books?

In the spirit of being honest, I thought I might put a little review on here of each to prove that I ACTUALLY own these books and ACTUALLY read them (well, you don’t so much read a CSS guide or an Illustrator book.. I did read the XHTML one though). Here’s why I like them (I’m posting these on Amazon as well)…

The Elements of Style (Illustrated) by Strunk, White, and Kalman

I wish I could remember who originally recommended the original Strunk & White Elements of Style to me. If I could remember, I would find them and hug them unabashedly.

If you’re writing ANYTHING and care AT ALL about how it turns out then do yourself a favor and pick this one up. The organization is very strange (there isn’t any to speak of) and the writing style is very direct. The result is a no-nonsense book that teaches you to cut the crap out of your writing.

There are many, many valuable lessons contained in Strunk’s short and useful guide but the best ones, for me, are the ones regarding comma usage and his favorite command, “Omit needless words.” During everything I’ve ever written since reading this book I’ve heard a disembodied voice telling me to remove words. I’ve noticed while editing other people’s work that the piece can be improved dramatically by deleting all the words that say nothing.

It’s a quick read but a necessary one for anyone doing any kind of writing.

Bird by Bird by Anne Lamott

As with “Elements…,” I’m not sure how I heard about this book. It was one of those odd series of events that ends with something in your mailbox. I read a few quick things about it online and suddenly decided that I must read the book. I’m glad I did because this was one of the most enjoyable books I’ve read in a long time.

Anne has a casual but polished writing style that you can’t help but to get lost in. She writes like a close friend speaks to you, eschewing ego and pretentiousness to deliver her simple, personal message. It started out a  bit slow but the stories she told were very entertaining. By the time I reached the middle of the book, I was totally hooked and found the last half hilarious and very informative.

This book is, in the end, a guide on how to be a writer, not a guide on how to write. What I mean by that is you won’t really develop your style or improve your sentence structure by reading this book. What you will do, however, is come to terms with a lot of the obstacles facing writers at every stage of their careers. Her humor and her honesty makes you feel really good about contributing, failing, hating yourself, and moving on.

Though I would definitely recommend this book to anyone writing their own book, I would recommend it even more to anyone living in this world and doing the best that they can. She talks a lot about failing and self-hatred and giving up and charging through. I found myself particularly centered after reading about her embarrassing reactions and consequent success over jealousy and writer’s block. I learned more about my life and myself than I did about writing. I don’t necessarily consider myself a writer but I explore my creativity in different ways and this book really speaks to all of them.

Pick this book up, read it, and feel better about just being yourself.

Positioning: The Battle for Your Mind by Al Ries and Jack Trout.

Finally, a book with a history I can share.

This book was given to me by my dad, the king of business books and the fastest, most prolific reader I know. This guy blows through almost 1,000 pages a month on top of all the magazines, newspapers, and online sources he devours. Though our reading tastes aren’t completely aligned, when he recommends a book, I typically read it (or at least add it to The List in earnest).

This is the kind of book I don’t read. Though I find the advertising industry slightly interesting, I mostly hate it and wish it would go away (despite having a hand in it). This book, however, really cuts through the crap and explains positioning and branding in a way I’ve never heard before. In terms of marketing and branding, I pretty much live by the concepts in this book. Oh, and it’s about 30 years old. That’s how good this book is.

The  book shows you what successful companies have done to become that way and what other successful companies have done to screw it all up. With tons of examples and a very straight-forward writing style, this book will explain why certain products win and why others fail.

I read this book quickly and moved onto others by the same authors. They really know their stuff.

The Noonday Demon by Andrew Solomon

This is the best book I’ve ever read and likely will ever read. Period.

I have suffered off and on from depression throughout my life and this book, the first and only book I’ve ever read on the subject, did so much for my understanding about the condition. I’ve really never read a book that explained what I think and feel better than this.

First off, Andrew Solomon is an excellent writer. He gets a bit verbose at times but I found each sentence, regardless of it’s complexity, an adventure in and of itself. He paints such an incredible picture of the feelings and thoughts that accompany depression. Like anyone able to describe depression, Andrew has been through it and reading what he’s suffered from made me realize how lucky I have been with my own depression. Andrew has seen hell, been through hell, and came out enlightened.

Strangely, I always find this book difficult to describe adequately. His words were just so well chosen and the research so personal and interesting, I feel like it’s a book that needs to be experienced to be understood fully.

If you suffer from depression, clinical or occasional or undiagnosed or anything, I completely recommend reading this book from cover to cover. If you know someone who suffers from this condition and are struggling to understand what they’re going through, this book will go a long way towards helping you see what they see. I’ve really never had a book that explained something as well as this.

The Non-Designers Design & Type Books by Robin Williams

I wanted to write a quick blurb about this little book that has gone a long way towards teaching me proper design.

I’ve been dabbling seriously in graphic design for about a year now and find it one of the most frustrating things I’ve ever done and also one of the most satisfying. It’s very subjective, hard to describe, very time consuming, very sensitive, and totally maddening. When it works, it really works but when it doesn’t work, it shows you the highest level of frustration possible.

Robin explains all the basics very well which puts you in a position to begin to experiment. If you just stick yourself in front of Photoshop and try to bang out a business card or a menu or a technical document (which you really wouldn’t do in Photoshop), it’s probably not going to work out well unless you’ve had some experience. If, however, you read this little guide and try it, you’re going to have a few more ideas and at least understand the contrainst you’re working with in terms of color, alignment, etc.

This book is great for people without any experience in design who want to improve the way their documents, webpages, application screens, and printed material looks. You’re not going to win any contests with this knowledge (and neither are her examples) but what you produce will immediately look better. The writing style is a bit goofy but I use what I learned every day in everything I produce from graffiti to webpages to technical documents to resumes.

CSS: The Definitive Guide by Eric Meyer

A solid plot, well-formed characters, and an intriguing writing style make this… wait, what?

This is a boring, very useful book. I’ve read a lot about CSS on the web and nothing came close to the  explanation in this book. Instead of saying things like “we won’t bother you with the complex way this is calculated,” Meyer bothers you with the complexity. Each property I read made me really understand how it works and how it should be used.

I’ve been reading this bad-boy from cover to cover and I think I’m doing myself a bit of a disservice. I think I’m going to skip to the positioning section (everyone could use a better understanding of this mysterious and magical world), read that, maybe read a few other things I’m interested in mastering and then leave it as a reference. It makes a lot more sense to read the properties you don’t understand than trying to get through it all.

Learn (x)HTML and CSS online, then buy this book is you’re serious about getting into web page design.

Visual Quickstart Guide to HTML, XHTML, & CSS by Elizabeth Castro

I think I bought this book a bit late in my web design learning process but I still find a lot of use out of it. I use it as my general reference book and I’m constantly in the appendix and the chapter about forms.

Though I would recommend this book to people because I found it useful, I think there might be better books on the subject. I say this because it does not go into the level of detail you really need to master HTML. It does a great job explaining what it does but there are quite a few things left out or breezed over to keep the book and appropriate size. Also, combining HTML and CSS in the same book is probably a bad idea. The CSS book I reviewed above is bigger than this book and, ostensibly, covers 1/3 of the material.

If you want to learn enough about HTML to get by creating simple web pages or fixing your own, this is a great book for you. If, however, you want to really understand HTML and get into web development, I would suggest finding a book with a bit more content (probably something from O’Reilly [publishers of the CSS book above]).

Related posts:

1. Creating a functional, useable, linkable website: start and maintain a blog There is nothing better for search results, returning visitors, and...
2. 3 things that help me to write quality content I have, accidentally and otherwise, come across several articles about...
3. Building a homepage from a blog: Part 1: Conceptualization and Planning I’ve grown bored of my original homepage’s look and feel...

After this last 2 weeks, I totally understand what that means.

See, I had a great idea at the end of last month. It started out as a cool idea (which is far less dangerous) but after talking with someone else about it, it turned into a really good idea. Now, after several brainstorming sessions, it’s become a GREAT idea and there’s no turning back.

I wanted to write about this great idea not to actually introduce the idea (because that would be silly at this point) but to chronicle what’s going on and what I’m doing about it. I look forward to more of these great ideas in the future and I hope to learn from my mistakes as well as my good moves. Also, if you have a GREAT idea and don’t know where to start, maybe this will help.

First, find someone.

Find someone and find them quickly, especially if you have sense that your idea is a really good one. Find someone you trust and find someone that knows what they’re talking about with respect to your idea. If you have a software idea, talking to an English major might not be too helpful, especially as you’re trying to put the different pieces together.

Also, make sure this is someone you can trust. The chances that your idea would be stolen and implemented without credit to you is pretty low but the closer to zero the better.

So, step one, go talk to someone you trust, someone that knows what they’re talking about, and someone that might want to help. It might be hard to find the right person but this is a critical step. Here’s a few hints:

• How did you figure this idea out? Is there someone you work with that could help you? Be very careful about the fine line between proprietary information from the company and your own idea. The closer tied to the company you work for, the easier it might be to get sued.
• Are you in school? Professors are great resources for things like this. They like to help students (most of them) and it’s unlikely they would be motivated to steal your stuff.
• In my opinion, finding someone you trust is the most important thing. If you don’t have anyone that really knows what you’re doing, at least find someone with half-a-brain that you can trust.

Talk to this person you find, blab the whole idea, and then get their honest feedback.

Second, get it down on PAPER.

Literally on paper. Paper and pen is underrated these days (ever thought that would be said). Write furiously, draw sketches of what it looks like, take notes, just get it all down. Get the idea as it is and get the idea of what it could be. Write down everything you want it to do/be and everything it could do/be. Get everything down, the bad, the good, the ridiculous, the impossible, put it all down. Do this with the person from above if they want to be involved or by yourself if not. Keep taking notes for a few days, mull it over, let it sink in.

The other thing to say about this step is that you might find yourself with an incomplete plan and a sudden urge not to chase after this idea. You also might get so caught up in planning this thing out that you never end up doing it. Be very “present-minded” as you’re planning out your idea so you don’t miss any internal red flags and yuo’re sure you want to commit a piece of your life to this project.

There’s no substitute for a good plan that outlines everything you could expect in the beginning but don’t wear yourself out planning absolutely every single move you are going to make.

Third, get it down on computer.

Now it’s time to boil that plan down a bit. Type your notes up and start mocking things up that need pictures. Here’s a few tips:

• When you transfer into a computer, write it in the most functional way you can. If your idea is a new business, format it like a business plan. This won’t be your final copy but the closer to the final copy you can be thinking, the less work later.
• If you’re working with 2 or more people on this, use something like Zoho or Google Docs so everyone can share. There’s no reason to be emailing master documents between people and risk losing changes. Just put it on line and relieve some stress.
• Remember to always be painting a picture. If you can use Photoshop, make realistic models of the interface you want to design or the web page you want to build. Make a video, draw something on paper and scan it into your computer, take a screenshot of a similar site and change it around in a Paint program. You’re going to need to explain things to people eventually (or right away) and if you can show them a little piece of the reality you’re creating, you’ll go a long way towards selling them on the concept.

Fourth, think long and hard about the money, the time, and the marketing.

Listen, I haven’t been neck deep in business forever but if there’s one thing that I know it’s that this is where things quickly break down. If you’re taking out loans for this great idea, you better have a solid plan on how you’re going to pay them back. If you’re using your down payment money for your house, make sure you have things in place to pay yourself back.

Also, consider how much time you really have to put towards this project. If you off-the-cuff assume that you’ll do all the HTML or writing or layout work but you have a full-time job and a family, think again. Time doesn’t just come from nowhere and you may have to resort to paying people to accelerate the process. Figure in extra money for staff, for incidentals, and for yourself.

Finally, and this might be the hardest, come up with a plan for how you’re going to get the word out there. Great products, great websites, and great blogs don’t just appear and suddenly become popular. Even if you’re offering the most amazing thing in the world, you’re still going to need to get the word out there.

Come up with an idea of how many people you need to reach and then figure out how you’re going to talk to those people. You can’t just say “email marketing” if you don’t have already have a list of people that want to hear from you (unless you’re a spammer). Your marketing plan won’t go anywhere if the only thing written down is “website.” How will people find your website?

Good luck with your great ideas!

Related posts:

1. Insane Ideas Are Life’s Great Equalizer If you take a good look around, you’ll probably find...
2. Advice to a client: don’t just have a great idea and act on it – remember the bottom line too So you’ve got a great idea, do you? Good for...
3. Curing Underemployment (or) Josh’s Six Step Plan to a Great Resume (part 3 of 6) Check out yesterday’s post, the second step towards writing a...

I’m at a crossroads between several different career paths and, though I know, for the most part, what I want to do and what I don’t want to do, the state of the job market and the industries themselves have to play a part in my decision. On my own, I can only know about career opportunities by what I read in blogs and what I experience myself so, at time like these, it’s good to have someone to talk to that can put it all into perspective.

Microsoft’s perfect developer job description

I asked my friend to tell me what kind of trends he is seeing in online design/development (if any). Where does he think things are moving? More importantly, where is the money? Is it worth it to learn a language or use your people skills?

Here’s what he had to say (verbatim but broken down):

I think that the online design/development world is currently going through some major changes.  This is both product wise as well as company/business wise.  Over the past year there have been a lot of changes around Adobe, Corel, Apple and even here at MS.  Check out Expression, if you haven’t, to see some of the things that we are starting to do.  I think a large trend is moving from overall design to building experience that are truly media rich (video, interactive, etc).

I just started working with Expression Blend 2 to design a Windows user interface for a developing piece of software. This software allows you to draw things in completely scalable format and then see the XAML code that was created. I liken this to being able to draw vector graphics in Adobe Illustrator and then seeing the equations that are needed to make the artwork.

The application also lets you manage the “code behind” files (created in a language that I don’t understand like C# ["see-sharp"]) which creates an interesting “generalist” situation where I can have a hand in both the aesthetic design and the application code itself.

The implications behind this situation is that versatility is poised to become a skill in and of itself. There will always be a need for a specicalist but the Henry Ford style production line scenario, in software design at least, is going the way of the dinosaurs. If you’re taking computer science classes, it might behoove you to also pick up a few art classes or a digital design minor if it is available.

Taking this idea a step further, picking up two (or more) different disciplines at the same time means that you’re going to sacrifice something: sleep, your life, or absolute mastery of either. In order to be the best at something, it takes lots of practice which stems from complete commitment. It would be impossible (or, at least, undesirable) to put in the work to become the best, say, formula one driver AND the best short story writer; one of the two must suffer. But, if your intention was to simply blend the two as best you could and become really good in both, this is possible. You could probably become a world-ranked driver and someone who wrote great short stories (about racing, likely).

How do you build skills that are needed? Branch out.

To become a great designer and a great software developer, you would need to bring the two together. I would say that web development does this very easily. As a rule, if you’re writing usable, good-looking web pages on your own then you’re going to need a solid sense of layout and style as well as a good eye for syntax and, if you’re using Javascript or PHP, some idea of functions, variables, and good programming practices. Bringing it all together successfully means that you’ve learned all of this and practice it on a regular basis. There is just no way to be the top technology blogger with an award-winning blog that you designed and built yourself along with custom sidebar widgets implemented by you. Show me this guy or gal and I’ll show you my resignation from the field. You can, however, understand search engines, have a polished writing style, know how to construct themes, know enough PHP to not ruin anything, have a sense of design, and put it all together on-line. Understanding each of these skills and also knowing your resources well enough not to memorize everything is key.

This idea of versatility was echoed by another person at Microsoft I talked to recently. He works for the MSN team and has a background in journalism. He said (paraphrased):

There are amazing developers out there. These people can write code that works well all day long. There are also great graphic designers out there. But the person with great development skill and a strong sense of aesthetics is the one I’m hiring on the spot.

Versatility is key and there is nothing better to convey versatility than to actually SHOW versatility. Learn Blend and create something in it. Create something in Illustrator, modify it in Photoshop, then start a blog and post it on the web. It’s one thing to read the books and it’s a whole other to use the skills, hone them, practice them, and put yourself out there.

Answering my money question, the Microsoft recruiter said:

The money is in all of these areas, especially if you are using the latest products and are well versed in the product offerings that are out there.  If you already have some language knowledge, or know how to work with managed code such as Java or C#, etc. and have people skills, then you are in a good position.  If you look at the .NET Developer Platform and Visual Studio as well as other developer tools, more time is spent on creating a rich experience (application, UI or whatever) and less on overall coding.  That is why companies like MS make these tools for developers.  So, basically, if you can master the use of these and code ad hoc, then, IMO you are set up fairly well.

I’m the type of picky person who wants a career doing things I enjoy AND I want to get paid well doing it. Am I asking for too much? I don’t think so.

Should you learn a new programming language? The answer is yes.

There are hundreds of programming languages currently in use around the world so knowing one language perfectly is probably to your detriment. If, however, you understand the concepts of syntax, systems architecture, and variables very well and are able to use several different languages, you are set up well for progressing in the future. When you start a new job or gain a new client, there is a variable learning curve based on information related to that job. If, for example, you learned Adobe Flash and Actionscript perfectly, you might have a hard time picking up the Javascript that is necessary for one job. Being knowledgeable and able in several different disciplines shows that you are flexible and able to pick up new skills. It also becomes more likely that you’ll find a job that requires one of your existing skills.

The other part in that paragraph that it’s easy to breeze over is the comment about having people skills. I’ve worked in several different industries and, let me tell you, there is no substitute for a positive attitude and an open mind. In my own experience, there are more people that think that their skills excuse them from getting along with others than those who put their people skills first and their productive skills, robust as they may be, second. Especially in the sciences, being personable and likable goes a long way.

Last but not least, my recruiter friend makes a very astute observation about the tools available to people these days. While I choose to write HTML in a notepad, there are tools out there like Dreamweaver that are making it easier and easier to create great content without being a ten year veteran of a certain piece of software or coding language. This speaks directly to my mission statement, helping people do more with the technology available to them. You might want to get into design or upholstery or personal training but don’t know where to start or how to manage everything that needs to be done. Through Google, blogs, free software, and a plan, you can do a lot more with your time than you ever thought possible.

The relics of the past clinging to old processes, dusty and stagnant tradition, and archaic methods are finally beginning to see some competition from people who know how to manage their time and are smart enough and brave enough to see past the status quo and blaze a new path. The people clinging on to the “same old same old” are getting surpassed, naturally, by those who have an open mind. Maybe the old way to do things is a way that’s going to be around for a while (think about books and the Amazon Kindle) but if you’re not at least looking at other options then you’re going to be blindsided when change happens.

Just think of all the industries, products, and companies that seemed like they would be around forever – newspapers, fax machines, radio, any of the number of collapsed financial institutions. When you assume nothing is going to change and when you take it for granted that the way things are is the way  they will continue (and the way they should be without question), you put on the figurative blinders. Learning new tools, new techniques, new pieces of software, meeting new people, trying new things… these all either lead to great new innovations and change they way everything is done for the better OR they reinforce what is already in place which is just as good. Nothing has replaced HTML as a web presentation language (unless you count XHTML which I guess you could) because there isn’t anything better right now. What did affect HTML was CSS and now that’s the standard. Sadly, there are still people coding exclusively in HTML but this won’t go on forever.

So, there’s a bit of job advice from a guy in the know and a little analysis from the guy who breaks it all down. If you think you match what they’re looking for up there in Redmond, feel free to send me your resume and I’ll pass it on!

Related posts:

1. Building a homepage from a blog: Part 2: Finalizing the design and planning out mark-up and CSS structure. Introduction Last time we left off, I had put together...
2. Free software and websites that really, really, really help me From time to time, I go searching for a utility,...
3. Curing Underemployment (or) Josh’s Six Step Plan to a Great Resume (part 1 of 6) I’m helping a colleague of mine put together her resume...

Anyone charged with finding business for themselves dreams of the days when you’ll be able to reject more projects then you take. In the meantime, drumming up business can seem like a very daunting thing to do. There are lots of places to find ideas but what will work for you depends on what work you do, what you like doing, and what resources you have at your disposal. It can be frustrating to face an empty inbox or a clear schedule but if you’re not going to get out there and do the leg-work, no one will.

I’m new to all of this… how can this help?

I’ve worked with several people who wanted to increase the amount of paying customers they were seeing. Together, we came up with a few ideas for how this could be done. Some of these things work and some of them don’t but if you’re at a slow spot, it’s certainly not going to hurt you to market yourself a little bit.

Idea #1 – More/better search-able content.

If it’s been over 6 months, it’s time to change, update, and add to the content on your website. Even if your information is timeless, correct, full of tasty keywords, and prolific, it pays to continue to build on what you have. I can’t think of one popular site out there that has information on it that doesn’t change. What to write? You can detail the services you offer. Do you teach a class? Are you attending or speaking at an event? Do you do something that no one else does? Write about it and post it on your site. Search engines can’t do much to find your site without text and if your site is just a few sentences and your phone number, why do you have a website? Tell a story about yourself.

Contact me if you need help coming up with ideas, want a second pair of eyes, or you’re not sure how to make your content as findable as it could be.

Idea #2 – Strategic flyers

Internet marketing is one piece of the puzzle, but maybe you’re missing another big piece. Put a flyer together (or have someone like me do it for you) and put it in coffeeshops, post it on college campuses, and tack it to appropriate corkboards locally. Not everyone uses the internet to find everything they need (I know, crazy, huh?). Get yourself out there locally and don’t be afraid to talk to different people.

I can help you lay out a flyer, figure out what to say, and make sure that it’s optimized for printing. I also know some amazing print designers if you want to take it to the next level.

Idea #3 – Hit the streets

Talk about what you do to everyone you meet. Almost anyone I meet for the first time knows what I do after a minute or two of conversation. I’m not pushing it down anyone’s throat but it can be a great icebreaker, first of all, and it can always lead to paid work. Not meeting many people? That’s not true, you meet new people all the time. You talk to people at the store, on the street, to people ringing you up, to other people in line, maybe to classmates. If you’re afraid to put yourself out there then it’s going to be hard to drum up any business.

Let me help you design a business or use the internet to find groups in your area.

Remember: it’s only as hard as you make it.

This kind of leg-work can seem like the hardest thing in the world to someone who doesn’t know where to start or has no experience in it. Working for yourself, even if it’s a part-time, off-hours hobby or niche, has to involve putting yourself out there and making your services known. Answering ads and helping friends only goes so far with respect to interest generation. Once you’ve milked your network, it’s time to move beyond.

The one thing I keep in mind when I post on this blog, reach out to a potential client, or hand a business card to someone is that I’m a unique person offering a unique service. I might not be the only one doing what I’m doing but only I do it the way that I do. There are people out there who don’t know me that couldn’t find a use for what I’m doing if they tried (these are the people falling behind their peers, FYI). There are also people who aren’t a fan of my aesthetics or my color choices or my layout tendencies. These people will never call me for a job and will never use my services. There are, however, far more people that could use what I have to make their lives easier. There are small businesses out there who want to do more with the internet but just don’t know how. And there are individuals who just want what they have to work. I can help all of these people but, until I find them or until they stumble onto my site, they’re putting up with processes and equipment that does not work.

Take a chance, risk a little bit of rejection, and make yourself known. You’ll be glad that you did.

Related posts:

1. Random design inspiration post #1 – Currency I’m always looking for a bit of inspiration, be it...
2. Great Excel tips link! 70+ Excel tips “Are you working with Excel and want...
3. Blogging 101: How to Write a Great Blog Post… a Reader’s Perspective This is a guide I wrote a few months back....

After first seeing an interesting printing style called letterpress on an art and design blog, I got it into my head that I wanted to have a set of business cards made in that style. At the same time, I was talking to a complete stranger on a forum about his upstart letterpress printing company. They had not even gotten the press yet but were going to be up and running in no time. I knew it would take me forever to design what I want (I had zero experience with Illustrator, the program I needed to use to design it) so I took his email and got started on the design process.

Many iterations, a page orientation change, and many hours bumbling though Illustrator, I had my design (you can see the iterative process here):

All through the design process, I had Preston Grubbs, co-founder of Fresh Impressions printing, on my Google Talk application, talking me through the design, making suggestions, and teaching me about the process. He was helpful, friendly, and a complete professional. We chatted at long length about paper weight, ink color, design elements, and the process in general. I had never met him before, never talked on the phone, but I was already convinced that I would be completely satisfied by the end of the process.

The check was sent, cleared, and cashed, the paper ordered, the plate created, and pictures to ease my anxiety about the whole thing. Finally everything was complete and I had a tracking number. Here’s where Preston and his partner really started to shine.

When the cards showed up, they weren’t really what I expected. I was new to the process so I may have been confused but I wanted to talk to them about the final product. Preston told me explicitly “BE HONEST” when I told my opinion so I typed out an email detailing my issues. Here was the response:

I talked with my ‘business partner’ and we both agreed that we would be more than happy to reprint them. Unfortunately, last night we did a little more printing and we were able to fine tune the press even more. It turns out we were using our roller gauge incorrectly so we were putting down too much ink, therefore creating an inconsistent ink density as well as impression.

If you would like, I will express you some of the samples we printed last night on various stocks to show the quality we have reached now. We will not be able to reprint on 220lb because it is so much more expensive, but hopefully we will be able to do the pearl 110lb now or we also have access to some really amazing handmade paper that receives a beautiful impression. I can send all of this to you today if you would like me to and you can choose what you want your reprint printed on.

Again, I apologize for you not being happy with it and hopefully this doesn’t affect our relationship and you will accept our offer.

I was honest, he was honest and nothing beats complete honesty in a business relationship.

I kept some of the original cards on the thick stock and had a new set of cards printed on the thinner (but, in my opinion, easier to manage) paper stock. They were printed quickly and shipped out as promised. When they showed up, I was totally impressed:

In the end, I’m helping Preston get the attention of someone who might be able to help him rise to great heights in this printing endeavor… though there is no doubt in my mind that he could do it on his own. These cards are unique, tactile, and each one feels like a work of art. Preston’s passion for what he does shines through in every communication and especially in the product itself. I would never hesitate to recommend his services to anyone.

Thank you, Fresh Impressions, for your unmatched service and truly “needs-to-be-seen” product.

Related posts:

1. Letterpress cards cut, packed, and on their way… Amazing work… this iPhone photo looks like it was from...
2. Business cards featured at Design Cubicle I saw a Tweet a couple of weeks ago inviting...
3. The Mad Printer… an interesting coffeeshop activity I live in California and, as such, I’m generally less...

My first post about HTML emails was a bit premature. This list should have come first, then that post, then this one about sending HTML via Thunderbird. I realize my mistake and I apologize. I think that’s a good firt step towards regaining your trust. I hope we can move on from this, I really do.

I also realize that I might be missing my audience by posting this potentially overly-technical information. I am, however, consciously taking the risk for a very important reason: I hope, like me, that you always want to learn more. Maybe you have no interest in putting an HTML email together from scratch, that’s just fine. This blog is about figuring things out, doing the best with what you have, and understanding the stuff that you might, in the end, contract out to another individual (hopefully me).

I bring to you the W3C (via JCH) Beginner’s Course in HTML for Emails. This list below are links to classes on the W3C site along with instructions for how to use it. Because you use a limited subset of HTML and CSS to put together emails, it’s probably a good idea to just concentrate on this subset. Go ahead, learn everything, but if the point of learning HTML is strictly for emails, you might end up confusing what is allowed with what is not.

If you already know HTML and CSS, it might be a good idea to walk through these anyways. You might regain a long-lost HTML tag or element you never thought about anymore. It’s also a good idea to get am HTML table refresher (because you don’t use them hardly at all, right?).

I’m new to all of this… how will this post help?

One of the easiest ways to keep in touch with current/potential clients is through a regular email to a subscribed list. This is probably the easiest thing you can do as a boot-strapping business owner. Bulk-email services are very affordable and putting together an email is not difficult. Likely all of the HTML services out there offer you a few (or a lot of) different stock templates to send your email out on. Simply drop in your pictures and text, upload your list of emails, and blast away… but is it that simple?

Not in the slightest. The trick to HTML emails is getting them consistent across email clients and avoiding the ol’ spam filter (which can catch you even if you have your recipients’ permission). The best way to do this is to use valid, well-formed HTML markup and CSS styling.

OK, so it’s not too likely that you’re going to write one of these from scratch. In that case, use these tutorials to understand the stock templates that your using so you can modify them to your liking. If there are a limited number of stock templates to use, it’s a good idea to know how to at least change the font, color, header, and images to personalize the email to your business. You can also make the email look like your homepage to get that visual connection. Last but not least, you’ll want to make sure that the template is up to snuff before firing off all those mails. Remember, once you send, you can’t go back.

Walk through the classes below and try out a few of the techniques in the W3C Try-It editor (found on each page). It’ll take very little time and, in the end, you’ll have a better idea of what is actually going on instead of just praying and hitting send.

W3C (via JCH) Beginner’s Course in HTML for Emails

Basic HTML training

Introduction to HTML

Elements of HTML
For HTML emails, don’t worry about the “head” or “html” elements.

Basic HTML tags
Minimal elements are used in emails; headings are not used because of inconsistent handling across email clients.

HTML attributes
This is good information but we will be using styles (CSS) more than attributes.

Links to new documents and pages

HTML tables
This section is very important for HTML emails; all layout is completed using tables.

Lists and list items
The necessary elements are ul, ol, and li

Working with images
Pay close attention to floating images and “alt” text

HTML colors
Important but there is more flexibility available (see next link)

HTML colors (advanced)

HTML reference
Not everything on this list is used for emails but it still makes for a good reference.

Basic CSS training

Introduction to CSS

CSS syntax
This section is very important; many errors that occur are syntax errors.

CSS styles how-to
The only styles that are used in emails are in-line styles

Text formatting
Most of these work but some don’t; ignore letter-spacing, text-indent, word-spacing, white-space

Working with fonts
Note that “font-size-adjust” does not work in some email clients.

Borders in CSS
This works fine; can also be done in pixels (see link below)

CSS padding
Padding can also be done in pixels (se link below)

List formatting
Some markers work, some don’t (ignore everything but list-style-type and stick to the simple ones)

Pixel values

Additional resources

MailChimp – HTML Email Guide

MailChimp – HTML Email Tips for Web Designers

Sitepoint.com – coding HTML emails

Related posts:

1. HTML emails: the last word (until everything changes again) Introduction Here is everything I know about creating HTML emails....
2. How to send HTML emails for free using Mozilla Thunderbird Introduction This is just a quick tip for anyone out...
3. What’s that crazy Amazon thing on the right side of your blog? why, it’s my Amazon Affiliates widget! Introduction There are two...

This is just a quick tip for anyone out there that wants to send a few HTML emails from their desktop and don’t have access to an HTML sending service like MailChimp or something similar. The program is called Thunderbird and it’s made by the same wonderful folks who put together the first-class web browser, Firefox (you are using Firefox, right?). This is not a great option for mailing hundreds of emails out because I’m sure your email host will not be too happy about it. If, however, you want to send out, say, 50 email invites to friends or a tight customer list, this might work for you.

I’m new to this… how will this help?

This is a great way to try out any email templates that you may have created on your own or modified and want to send out. Instead of wasting email credits with your HTML service, try sending out to a few different email clients using the great Thunderbird email client.

Step 1 – What you need

Not just anyone can send out emails using Thunderbird. You’ll need access to the SMTP settings to your email client. Uh oh, did I lose you already? You’ll have an SMTP server if you have a website host (ask your webmaster to get the settings for you if you’re unsure). You’ll need your incoming server name, outgoing server name (typically the same as incoming), the username for the email account, and your email password.

You can also use Gmail as a sort of proxy host but, keep in mind, they set strict limits to the amount of emails you can send out:

In an effort to fight spam and prevent abuse, Google will temporarily disable your account if you send a message to more than 500 recipients or if you send a large number of undeliverable messages. If you use a POP or IMAP client (Microsoft Outlook or Apple Mail, e.g.), you may only send a message to 100 people at a time. Your account should be re-enabled within 24 hours.

I’ll show you how to set up your Gmail account quickly and easily within Thunderbird. Then, you can even check your email, sort it into folders, and save copies on your local hard drive (meaning the computer you’re using the email program on). For some people who have trouble trusting Gmail to hang onto their data (I wouldn’t be too scared but, hey, they aren’t perfect), this might be a nice stress relief.

You’ll also need to download and install Thunderbird (I think you can handle that on your own).

Step 2 – Configure Thunderbird for use

When you first open Thunderbird, it’s going to ask you what you want to set up.

The choice is yours: choose Gmail if that’s the route you want to take or Email account if you have your SMTP settings ready to go.

If you selected Gmail, it asks you for the name you want to use (outgoing name on your email, what shows up as the “sender” for your recipients) and the email address. Click Next, then Finish and you’re ready to go. When you check your email, Thunderbird will ask you for the Gmail password (which you can save by clicking the checkbox when you sign in).

If you selected email account, it first asks you for your sender name and the email address you wish to add. Select the type of server you’re using (IMAP should be available on most standard SMTP servers but if you have a problem, you can delete the account and re-add it as POP), input the server name, and click Next. Finally, input the user name for your SMTP server, click Next, input an account name (whatever describes the account in the Thunderbird window), then Next, then Finish.

If everything worked out well, click on the Inbox name in the left-hand window and Get Mail.

Step 3 Write a new email

If everything worked as planned, you should have the email from the email account you chose in your inbox now. Keep in mind, because this client is now linked to your email box, moving or deleting mails here will do the same on your other account. If you plan on continuing to use your other email program, I would just ignore the emails here and just use Thunderbird to send.

I suggest trying to send an email to yourself to test the account out. Just click Write, input your email address, and click Send. Make sure it goes and and that you receive it. If that all went well, it’s on to sending HTML!

Click Write again to open a new email and click on the main body of your email. Now, in the menus at the top of the email, click Insert, then HTML…

ht

A small window opens up and, guess what? All you do is paste your HTML code into this window. Find your HTML file, right-click it, open it with Notepad or another plain-text editor, click CTRL+A to copy everything, then CTRL+C to copy everything. Go back to the little Thunderbird window and type CTRL+V to paste it. Simple!

Just click Insert on the Thunderbird window and you should see your HTML designed email in the Thunderbird window. Just add a subject, some recipients, and send it off! Make sure to select one of the options that allows for HTML (like HTML and text or just HTML).

Remember:

• Make sure that code is well-formed, images are small, and your reason for sending HTML is benevolent. See my HTML email guide, please!
• Using this method, keep your recipient list SHORT. This is NOT a good way to push emails to a bunch of people. Start getting a lot of bounces (invalid or rejected addresses) or spam clicks and you could get banned from your SMTP.

Want to get the most out of HTML emails for you or your company? Contact me and I’ll be glad to help!

Related posts:

1. W3C Schools (via JCH) Beginner’s Course in HTML for Emails Introduction My first post about HTML emails was a bit...
2. HTML emails: the last word (until everything changes again) Introduction Here is everything I know about creating HTML emails....
3. Confessions from an accidental spammer “Thou shall not spam” is one of the ten commandments...

Here is everything I know about creating HTML emails. This is the most boring and most useful post I’ve ever created by far. This is the aggregate of a lot of research and my own coding and testing. The title is bold, I know, but the information is solid.

I’m new to all of this… how can this article help me?

That depends. If you’re not going to be doing any coding then this post will help you understand what kind of work has to go into HTML emails to make them consistent and, hopefully, effective. If you’re designing the emails but not creating them then you’ll have an idea of what you’re working with and what you’re allowed to do.

Why HTML emails?

HTML emails are preferred so they are more likely to be read. This is a bit subjective but the concensus on-line is that, as long as they are designed properly and sent responsibly, HTML emails are a great marketing tool.

HTML emails are, however, still hated by some so this is a case of “less is more.”

Emails from you are easily identified and can look similar to your home page. This allows for consistent branding across all mediums, if done correctly. More about this in the “style” section.

HTML emails connect users to the home page, literally through through links and visually through the layout and colors.

HTML emails are “cutting edge,” pardon the expression. They are impressive and colorful and are a major part of marketing campaigns in all industries. Sending out a properly-coded and carefully designed HTML email says that you’re current

HTML Emails Are Different than brochures

• Inconsistent across email clients instead of exactly the same
• Much less expensive to produce and create
• More difficult to get it “just right” (design limitations)
• Completely different medium and delivery
• Less mobile than email for most people
• Different timing (in the moment rather than later)

HTML Emails Are Different than Web Sites

• More email clients to consider than browsers
• Much less CSS support (mostly just text formatting)
• Also more difficult to get it “just right” (design limitations)
• Tables are recommended above CSS layout for emails
• Explicit code is the name of the game
• Less time and audience attention to get your message across

HTML Emails Are Different than text emails

• “Pops” better out of an email box
• More to consider than just the content (in addition to the content)
• Plain text doesn’t break down (plain text is as consistent as it gets)
• Accessibility concerns with HTML emails that don’t exist with plain text

The basics of HTML email design

• Different email clients do different things and it’s hard to predict and test for everything.
• Concentrate on the lowest common denominator and make sure the content layout makes sense.
• Assume that images will be blocked and layout will break.
• Make sure the emails degrade gracefully. This means that alt tags need to be used, images should be used sparingly and table layouts should be as simple as possible.
• More time and effort should go into the motivation and the message rather than the visual design.
• Design is not a substitute for a relevant message.

Understanding email campaigns

Permission is king. If you didn’t get someone’s permission before you sent the email then it is probably considered spam. There are a lot of companies out there just yelling their name and products and, at best, they’re getting lost in the chaos. At worst, they’re generating negative attention for themselves. When it comes to marketing, bad attention isn’t just attention, it’s a brand killer.

Quality above quantity of recipients. If you have a list of 5,000 people that may not have heard of you before and might have interests that match your product, you have little more than a bullhorn and a crowd. If you have a list of 150 people that know what you’re offering and want to hear more, you have a captivated audience. It’s easy to assume that all people need to hear is what you’re offering and they’ll come running. The fact is, if there’s any sort of negative connotation to your brand (for example, showing up unnannounced in their email box), they’re not going to want what you’re selling. Strive for targeted lists of interested people instead of just bigger ones.

At the very least, your emails need to be relevant to your recipients. If someone signs up for a specific newsletter or a specific notification list, that does not mean they want everything that your institution can send out. Send less emails with better, more relevant content and you’ll see better conversion rates. In the same vein, if you can personalize emails, do it. Most HTML sending services allow you to input the names of your recipients (along with other variables) so take advantage.

Mass HTML email senders have been likened to a “loaded gun.” First, there’s nothing stopping you from spamming thousands of people, on purpose or accidentally. All it takes is one bad batch and your domain might get blacklisted from your recipients’ email cients. This is definitely a bad thing; getting blacklisted from Hotmail or Gmail means you’ve lost the ability to send to millions of people. The responsibility to send out relevant, targeted emails to the right people is yours.

A good thing to keep in mind, along with the other points so far, is that these bulk emails (or any emails) cannot be recalled once they are sent. It’s easy to shoot off an email to a co-worker or a friend and correct yourself later but it’s not possible with big email campaigns.

In the same vein, it’s important to test your emails in several different email clients. We test with Outlook 2007, Yahoo, Gmail, Hotmail, and the Windows Mobile 6 included email client. There’s no substitute for checking different email clients and your recipient list should give you a good idea of where to look. If you have home accounts with Cox or AOL, try these as well if you can. The best you can hope for is that all of the styles, images, and table layouts come through OK. The worst you should have is a broken design but text content that shows up legibly.

Last but not least, make sure you are up to date on the CAN-SPAM regulations. In a nutshell, here they are from the FTC website:

• It bans false or misleading header information. Your email’s “From,” “To,” and routing information – including the originating domain name and email address – must be accurate and identify the person who initiated the email.
• It prohibits deceptive subject lines. The subject line cannot mislead the recipient about the contents or subject matter of the message.
• It requires that your email give recipients an opt-out method. You must provide a return email address or another Internet-based response mechanism that allows a recipient to ask you not to send future email messages to that email address, and you must honor the requests.
• It requires that commercial email be identified as an advertisement and include the sender’s valid physical postal address. Your message must contain clear and conspicuous notice that the message is an advertisement or solicitation and that the recipient can opt out of receiving more commercial email from you. It also must include your valid physical postal address.

Basic HTML elements used

p
span
img
a
table
tr
td

Basic tags used

style=
width=
align=
colspan=
href=
cellpadding=
cellspacing=

Basic CSS properties used

background-color:
border:
color:
font-size:
font-style:
font-variant:
font-weight:
letter-spacing:
line-height:
list-style-type:
padding:
text-align:
text-decoration:
text-indent:
vertical-align:
white-space:
width:
*font-family: this doesn’t work in gmail but there’s nothing wrong with adding it for the other clients.

HTML Email Layout

Tables determine the layout. If you are not trained in table design, good for you, you’re on your way to being a great web designer. You do, however, need to have a solid understanding of them to build HTML emails.

No head, html or style tags are used as these are often stripped out by the email client before viewing. HTML editors might add this and, while it won’t cause any problems, it should be removed. Keep in mind, the big client that strips these is Gmail. If you’re not concerned about styles in Gmail, it is ok to use this element but make sure it appears WITHIN THE BODY TAGS, not before.

Be sure to close all HTML elements! Use an HTML checker like the one in PSPad to find errors easily.<br /> - Wrapper table should be used with a 98% width if a centered layout or background color is desired. Content section is a nested table inside the wrapper table. For full-width designs or left-justified designs without a background color, the wrapper is not needed.

For 2 or more columns, the “colspan” and “width” tags must be used together. Remember the spreadsheet model and add as many columns as you need with the first row of cells. Again, make sure to add a wrapper table if you want a background color or you want the design to be centered in the window.

Design for the preview pane of email applications. That means you’ve got about 500, 600 pixels tops for your email designs. Most email windows do not take up the entire screen (do yours?) and some people intentionally make them smaller. Make sure your main content section is slim, under 600 pixels, and that your logo, tag line, or another “grabby” piece of content is near the top-left corner. Some email applications, like AOL, allow for about 150 to 200 pixels to make sure your content will appear.

Styling your email

Simple CSS is widely supported and can be used in all HTML elements with a style tag. This is called “inline” styling and is the best way to apply CSS to an HTML file being sent. This is what I mean by “explicit;” all styling cues are added to each element inidividually. To style two different paragraphs the same, the same style tag and CSS properties need to be added to both. Keep in mind, sometimes the body styles don’t carry over; stick to colors and minor “throw-away” styles in case this element is tossed out.

Some sources recommend CSS shorthand to cut down on file size while others say that it should be written explicitly. Declarations like “margin: 0″ are usually safe but it might be a good idea to spell out font declarations completely. This helps the design process down the line.

Use images carefully and correctly in your design. Pictures, icons, and headers are great but can easily become cluttered and bloat the size of the email. Turn down image quality and use images that enhance your design or draw attention where you need it. Also, never send an all-image email. Some email clients block images as a default so your message might be lost and/or might be marked as spam.

Make sure you always include the width and height in the image tag for every single image. This ensures the empty placeholder images don’t get stretched and completely throw your design. Also, store the email images on a web server, preferably in a folder separate from website images, for example, in /images/email not /images. And don’t delete them.

General notes

• link element not supported, style elements barely supported so use in-line styles to be safe.<br /> Since <style> elements are unstable, selectors are as well.
• 530px is a safe width for certain clients and certain preview panes (AOL in particular). Not including AOL, 600px is maximum.

Gmail notes

• Keeps only the HTML between the body and /body tags. Discards the rest.
• Removes any style element and its content, even if it’s within the body element.
• The font size is bigger in table elements, so you’ll probably have to force it with font-style
• Gmail removes CSS rules with the property height.
• Gmail removes CSS comments found inline.
• Gmail doesn’t allow the url() value and will completely remove a CSS rule that uses it.
• Gmail is one of the only email clients that does not use the font-family: property
• Images are blocked by default but alt= tags are displayed

Hotmail/Live notes

• Keeps only the HTML between the body and /body tags. Discards the rest.
• The style element and its content is preserved if it’s inside the body element.
• Hotmail will completely remove any CSS rule that uses a url() as its value.
• Hotmail removes CSS comments found inline.
• Hotmail does not block images by default but Live does

Yahoo notes

• Keeps almost intact the complete original HTML sent and puts it directly in a div. So if you had any of these in the HTML, they will be found in the middle of the Yahoo! Mail HTML: DTD declaration, comments, html, head, title, style and body elements, etc. But, the DTD declaration won’t be taken in consideration by the browser since it’s in the middle of the page, same thing for the title element;
• Will rename the body, meta and link tags xbody, xmeta and xlink, so they will be “disabled”. This means that no external stylesheet can be linked to the document through the link element.
• Be careful with style elements; when replying or forwading this message, Yahoo! Mail will convert your style definition as plain text and your declarations will appear in the message.
• Does not block images by default

Outlook notes

• Outlook support varies greatly across versions; older versions have better CSS and HTML support
  head, html, meta, style elements are removed.
• img alt= tags are removed so images that are not shown will not be replaced with text.
• 2003 and 2007 blocks images by default

AOL9 notes

• “preview pane” is extremely tiny. Make sure to design your emails to peek out enough from the preview pane.
• HTML code needs an extra line break or two after the final /HTML tag, or you’ll see weird “equals signs” in your email
• Blocks images by default, alt= tags are not displayed

HTML coding sources

MailChimp HTML email guide

How To Code HTML Email Newsletters

HTML Email Tips for Web Designers

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007

CSS support in webmail clients/a

Optimising CSS usage for email

A guide to CSS support in Email

Email marketing sources

Email Marketing Strategies – Email Marketing “Must Dos”

How To Build a Basic Email Marketing Capability

Related posts:

1. W3C Schools (via JCH) Beginner’s Course in HTML for Emails Introduction My first post about HTML emails was a bit...
2. How to send HTML emails for free using Mozilla Thunderbird Introduction This is just a quick tip for anyone out...
3. Goodbye San Diego, stay connected, monthly website reports , and other news It’s been a long time since I’ve sent out a...

One of the most challenging and interesting parts of what I do is bridging the gap between potentially confusing technology and people who are far removed from how it works. I think people intentionally avoid this massive gray area because of lack of patience, lack of interest, or inability (or no desire) to communicate properly. It can difficult to explain concepts like table-free design, search engine optimization, and digitizing art for print to people without the necessary experience. Despite that, it’s necessary for people who are promoting themselves or their business to understand these concepts on a basic level and realize how they can expland their work into new, expanding markets.

I’ve taught billing systems and wireless networking to customer service representatives, math and science to family members and classmates, and blogs and social networking to colleagues and clients. What I’ve found to be the hardest concept to get across to people is the proper way to design and implement a website. I’m not exaggerating; explaining standards-based, table-free, search-optimized design to people without any experience can be a painful process to all parties involved. Clients want to understand what they are paying for – explicitly – and the only way to make this happen is to explain why I do what I do and why they want me to keep doing it that way.

I’m new to all of this… how can this article help me?

Clients (those who need the design)

This post explains the very basic ins and outs of website design and why it can be such a pain in the butt. Are you confused why you were charged for three hours of time just to change a few words? Have you asked for what seemed like a simple change only to be met with a sizable estimate? In adding my two cents to the conversation, I hope to clear up issues like these for people who might be looking to understand the process a bit better.

Designers (those who provide the design)

While I’m relatively new to the discipline, I’ve been teaching people and promiting understanding since I first strapped on that inbound call center headset. Let me help you find the words to use so you and your client are on the same page. Use your knowledge, skill, and people skills together to show your clients exactly what you do and why you do it that way. The worst that could happen is you lose 15 minutes and gain some personal clarity.

Understand: Web design is it’s own discipline with it’s own subsets.

I have always known this but it took an article at A List Apart, one of the most reputable voices in web design, standards, and usability, to really solidify this in my head. To quote the article (to avoid unnecessary paraphrasing):

Web design is not book design, it is not poster design, it is not illustration, and the highest achievements of those disciplines are not what web design aims for. Although websites can be delivery systems for games and videos, and although those delivery systems can be lovely to look at, such sites are exemplars of game design and video storytelling, not of web design. So what is web design?

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.

At the risk of flinging this topic from comprehensible to hopelessly high-concept, it is important to address the implicit abilities and obstacles of this very interesting medium.

Taking an idea for a website and moving it from concept to execution has an interesting middle step. This middle step, the one where you weight the benefits of making precisely what was visualized against the negatives of spending an inordinate amount of time building it, is something that designers are painfully familiar with but clients may not entirely grasp. It is quite simple to sketch an idea out on paper, somewhat difficult to translate this idea digitally, and very hard to build the exact product you had in mind to begin with. Maybe the technology does not exist, maybe you’re not sure how to build it, or maybe the idea was too complicated to begin with but, in the end, what is created never seems to exactly match what was conceptualized. Please keep in mind that there is nothing inherently wrong with this frequent occurrence.

There is another force at play here as well. In the end, even if you’ve created exactly what was on that bar napkin to being with, there is a chance (a good chance) that it just won’t look exactly how you thought or it simply functions poorly. It could be that all the artwork required to make the page look amazing makes the whole page load slowly. It could also be that the revolutionary way to navigate that you devised is not at all as intuitive as what you thought. Regardless of the reason, a perfectly executed concept does nothing to correct the errors that existed in the concept to begin with. While the “it just doesn’t look right” factor occurs in all segments of art and design, the “it doesn’t function properly” can only occur where interaction is happening.

Both of these factors work together to add unique facets to web design that threaten to destabilize the relationship between client and designer.

Clients

You don’t have to fully understand the internet and navigation and usability and optimization to understand why your designer tries to dissuade you from certain things. What you do need to understand is that your expertise in other fields does not translate directly to the web. Because something “looks” easy or “seems” easy does not actually make it easy to complete. Something as simple as content change or color change could require a lot of back-end work.

• If you don’t understand, do yourself and your designer a favor and just ask. If something seems easy but you are being told that it isn’t, ask her explicitly. Anyone able to make the changes should also be able to explain what they are doing.
• Get an estimate, even if it’s just a verbal agreement. Knowing up front that your image update is going to cost $200 might persuade you to approach the problem differently.
• Good web design takes time and, unless you can do it yourself, costs money. Making everything look right and function properly is an act of art, science, and patience. If you trust your designer, let him do what needs to be done and keep in mind that you’ll be glad you spent the money now rather than deal with fallout later.

Designers

You know what you’re doing and you’re as honest as they come so it can be downright insulting when someone questions your judgement. Still, what would you think if a contracting firm kept coming back for more money and more time on a remodelling job? Would you keep handing over money, no questions asked, or would you try to understand what is going on so maybe you can make an executive decision? It’s your job to patiently and effectively explain where the time and money is going so your client can budget effectively and potentially cease problems that get out of hand.

• Communicate well and often. If you think you might go over budget, say so. If problems are occurring, explain them. You might be used to guiding a project and making decisions but, when you’re on someone else’s time and money, it’s up to them. Give them all the information they need to make the right choice.
• You’ve heard of Always Be Selling (ABS), right? Well, for this post, it’s ABT, Always Be Teaching. You can never go wrong if you spend a little extra time sharing some of the knowledge you have. Don’t just say “the code was screwed so I fixed it,” explain what was wrong and what you did to fix it. This helps you by honing your knowledge and keeping you honest; this helps your clients to better understand what you do and showing them that you’re willing to give a little extra.
• While you might know the best way to do something, maybe the client has a different idea in mind. It can be painful to leave behind ugly code, deliver an unfinished product, or stop working on something that clearly needs more attention but it’s even more painful to fight against it. Explain the situation (#1), share the knowledge (#2), and leave your ego at the door.

Did I miss anything? What can clients do better to help designers understand the goal? What can designers do better to make the customer know the value their getting?

Related posts:

1. Make it Simple, Focused, High-Performance, and Polished: My Web Philosophy I was asked recently by a potential client what my...
2. Josh Can Help updates… I meant to use this blog as a place to...
3. The 4 Components of a Great First On-Site Visit I’ve done “on-site tech support” for a long time now....

Related posts:

1. Fresh cards from Fresh Impressions in Florida It’s not everyday, or even every month, that you can...
2. Business cards featured at Design Cubicle I saw a Tweet a couple of weeks ago inviting...

Letterpress cards are on their way soon

Thanks to Preston Grubbs for a great deal and awesome customer communication. I’ll be giving him official props on here once my cards show up and he gets his website up. Needless to say, I’m very excited. If you’re interested in cards like mine, I can design them and get them printed for a great price.

Client Success!

One of my recent clients was chosen to appear in a featured artists section the magazine she was advertising in. I created her print ad for the magazine…

Could my ad have had a hand in her success? I’d like to think so but plausible is that she has a great talent with a niche artistic style and her paintings can’t help but to make you smile. Good job Elise Nicole!

Two new websites added to my profile

I’m working on two projects, one of which I’m blogging about on here, the other is a site for my lab group. The theme for my redesign in progress is here if you’re interested in seeing how far it’s come (and how much further it has to go).

This one can be found here, though it is still a work in progress. I’m really excited about how it has turned out so far, particularly because the idea (a website that looks like a chemistry textbook) was a little bit out there. Using my minimal Photoshop skills and maximal creativity, I came up with a liquid layout that retains the look of a textbook. The design will look a little more true-to-form once the two columns below come together. The other thing contributing towards my excitement with this is the fact that I’ll be linked from a University which is kind of a big deal.

HTML emails

I just spent a few days researching and exploring the best practices for sending HTML emails. It’s a bit of a P.I.T.A. but once you know, it makes a bit more sense. Look forward to a big post on this.

On that same note, I was asked to do a live video training on building HTML emails next month. This is very exciting for me because I love training (particularly over the net) and I really wanted to spend some time perfecting my email-creating skills. It’s nice getting paid to do what you like to do!

In the meantime, here are some excellent references:

How To Code HTML Email Newsletters

Sitepoint gives a great break-down of how to create HTML emails that most people can read. It covers the necessary table layout, how to use CSS, best-practices, and information on Gmail (which, surprisingly, doesn’t support very much CSS at all).

HTML Email Tips for Web Designers

MailChimp (my new favorite little company) has a great blog that shows off interesting email campaigns and shares best practice information. The link above goes to an entry that gives some great tips for people coding emails. Also check out their template library for some free templates (they need a little bit of work, in my opinion but they’re free and work very well for the most part).

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007

A bit dry but that’s to be expected from MSDN and Support pages from Microsoft. Incredibly useful as well, another characteristic of their pages. If you want to know what will and what won’t fly in Outlook, check this article out. If you stick to this, it would be hard to go wrong in other clients as well.

I’m Older

I got officially got older on Tuesday. No outbursts, drunken debauchery, or mental breakdowns. I think those come next year.

Related posts:

1. Business cards featured at Design Cubicle I saw a Tweet a couple of weeks ago inviting...
2. One components of Josh Can Help’s website philosophy – Understanding Introduction One of the most challenging and interesting parts of...
3. HTML emails: the last word (until everything changes again) Introduction Here is everything I know about creating HTML emails....

Last time we left off, I had put together a structure of what I wanted my website to display and what it might look like. After about weeks of stressing out in Illustrator, I finally decided on a design I like.

Matt Jurman’s article, mentioned in the previous post, speaks to a high quality design and says that the following elements should be present for a design to be considered “high-quality:” balance, unity, emphasis, contrast, and rhythm.

I’m new to all of this… how can this article help me?

Welcome to the new format of all of my blog posts (news items and quick ones not included). I’m worried that I might be struggling in a vacant gray area between the “knows” and the “know nots.” This blog is specifically for people who are just starting to explore what technology can do for them and their business. As such, I want to position everything that I write to face towards the novice, not the expert. I feel like a perpetual novice, always learning, and when I share that knowledge, I feel like I know it better in the end.

So, what does this article do for the novice? You’re either someone exploring web design for the first time, a web coder or developer who is trying to improve their design skills, or a complete web novice who wants to come up with a picture of what their business or personal site should look like. Whatever your situation, you want a web site that looks good, does what it should, and isn’t too hard to maintain. I strive as much as possible to build with those goals in mind.

This article walks through some basic aspects of design and shows you how I used them to create a picture of what my site will look like when it is finished. I used to this “design language” and “core elements” were just a bunch of fancy words people used to look smart. I was surprised when I actually took the time to understand them and practice them and found that my designs improved drastically. I want to help explain these concepts to you, show you how they work, and give a few resources where you can read even more.

My web site design in words

Balance … the headings (like “Home,” “Hire Me,” etc. as well as “Contact” and “News & Information”), logo (“Josh Can Help”), light header text (the “tame your technology” at the top), and lion tamer icon all provide the “heavy” while the rest of the text provides the “light.” It’s the interaction and distribution of heavy and light that make appropriate balance.

Balance can be used in several different graphic design elements… Creative Curio explains

Unity … All my freelance-related elements (yellow text) are grouped together on the right and all of the blog content on the left. Also, navigation elements are together, blog sidebar functions are together, and the posts are formatted similarly to come together as one. Groups of objects allows for macro white-space and makes finding the information you need much easier.

A List Apart speaks about white space (excellent article)

Emphasis … The left sidebar is prominent and draws the eyes through the navigation down to the tamer icon at the bottom. On the right, the headlines grab the attention subtly. Though the emphasis in this final design is how I want it, it’s the flow from focus point to focus point that is the most difficult. You want to provide a bold visual element to attract a visitor’s attention and then lead their eyes through the elements you want them to see. I’m not sure if I’m doing that appropriately but it should not be too hard to fix ex post facto.

Contrast … There is the obvious contrast of the left sidebar with the white space on the right. There’s also contrast within the sidebar with the colored navigation items along with the logo at the top. In the white space to the right, the black text on white background is the ultimate contrast. I would like to use a bit more exciting colors but it seems like the more vibrant they become, the more I lose the already minimal vintage feeling the website has. I may need to play with this.

A List Apart (again) with a very in-depth look at contrast. It’s a lot to understand but important.

Rhythm … the blog posts are formatted similarly and the blog widgets on the right will have similar formatting between them. The navigation items also have a rhythm between them. I see visual rhythm in a similar way that I see unity. Each of the different elements should roll from one to the other within the group. As soon as the

Here are a few of the highlights:

>>> I had a little bit of fun with the colors without going overboard. As you can see, there aren’t a lot of colors and the ones that are there are not particularly bright. I’m a big fan of very colorful artwork but I save my own exploration of this for my graffiti. My audience and my potential customers are typically over thirty (possibly far over thitry) and probably wouldn’t have the best reaction to a busy, extravagant design. My own design style concentrates on typography, cleanliness, and simplicity and I think this page reflects that.

>>> One recurring theme you see on the site and in my business in general is the lion tamer silhouette. I really like this symbol and want to use it as one of the few shapes I’m using on the site. You can also see I’m playing with some of the vector decorations that frame my business card. These two elements lend a slightly vintage feeling to the design while keeping it from feeling stuffy.

>>> The emphasis is clearly on the information to the left of the screen. This is (in order) a description of the work I do, a summary of the work I’ve done, and a blurb about me and what I’m all about. The next element are the blog posts which are secondary to the information you need to hire me for your projects. Finally, if you’re interested in reading more on my blog, there is the typical sidebar with information, ads, and more widget fun.

Here’s what might change:

+++ The description in the center might be different or look different. I don’t want it to compete with the “Josh Can Help” logo but it should draw the eye back up from the left sidebar.

+++ The left sidebar color may change. I’ve tried many different ones and I think I like the current one best but I’m not sure.

+++ The menu item descriptions may fall below the main text or appear when the mouse hovers over… not sure yet.

What’s next?

Complete and total destruction. I’m taking the default WordPress theme, stripping it bare, and building back up into something wonderful. I’ll give an overview of what I’m doing and why but I don’t want to get into the nitty-gritty code details because it might be a bit too high-level (la-tee-da).

Related posts:

1. Building a homepage from a blog: Part 1: Conceptualization and Planning I’ve grown bored of my original homepage’s look and feel...
2. New custom WordPress theme and structure at JoshCanHelp I finally made the time to finish my site’s re-design...
3. New new business card design: the process + feedback My last business card ordeal was such a cluster that...