It’s also important to have a well-dressed website. Clashing colors are so hard on the eyes of your visitors, and they won’t stick around long enough to read your marketing message if you have a downright unpleasant color scheme.

On the other hand, if you stick to using ‘safe’ colors like black and white with dark red or navy blue accents, you will probably blend too much into the crowd of other websites out there in cyberspace.

The same thing can happen if all the websites in your field are using a faddish color scheme like blue and orange, and you follow the crowd. Following fads can also make your site look outdated very quickly.

So, what you need is a simple color scheme that is classic and helps you stand out – in a good way. But with the millions of colors out there, how do you know which to combine?

A word about ‘web-safe colors’

You may have heard that there is a limited number of colors that are safe to use online. That may have been the case many years ago, but even that is debatable.

The fact you have to face is that your visitors all have different monitors with different brightness, contrast and color settings, and different video cards. Only designers have monitors that are ‘calibrated’ to show ‘true’ colors. So, your colors can’t possibly look exactly the same on every single monitor out there.

But your color scheme will look mostly the same on most people’s screens, and that’s good enough. So, don’t pay too much attention the ‘web-safe color’ theory.

Here is one technique you can use to choose your color scheme.

The Foolproof Photo Technique

This is one of my favorite techniques. Many websites have a ‘header graphic’ (a.k.a. ‘banner graphic’) at the top of the design. If you plan on using a photo for the header graphic, it’s much easier to choose this photo first, then derive your color scheme from it. It’s much harder to find a photo that matches an existing color scheme, than to find a color scheme that matches a photo.

Step one – find a suitable photo

The first thing you need to do is find a photo for the header. You can buy the right to use stock photos for $1 – $2 from Big Stock Photo and iStockPhoto. It can be tricky to find a relevant photo that suits the long, narrow dimensions needed for a header graphic. You may want some help from a good designer for this.

If you’re not using a header graphic in your design, but you will be using a certain photo on every page, then you can use that photo as the basis of your color scheme – it doesn’t have to be a header graphic.

For this demonstration, I’ll use a smaller photo (of the ‘wrong’ dimensions for a header graphic) to show you how to create a colour scheme. Normally you would crop the photo to the right dimensions to fit your design first.

Step two – create a color palette

Now, if you have Photoshop or you hire a designer, you can turn the photo into a colour palette. (If you don’t, it’s a bit trickier, but you can skip this step and go to step 3.) This is done by using the Mosaic filter in Photoshop. Basically, it turns the photo into big blocks of colours.

Step three – use a color picker

Now you’re going to choose three to five of these colors with a “color picker” to create a unique color scheme.

You can use the eyedropper tool in Photoshop, or if you don’t have Photoshop, you could use a free Firefox extension called Colorzilla (and open your image in Firefox – or just go to your website if your photo is already on your site). You need to find out the hex code of the colours you want.

Or use an online tool that turns photos into color schemes. Here’s one that is pretty good:

http://www.aminus3.com/color/scheme-generator/

The hex code is the 6 digit alphanumeric value next to the # sign – for instance, white is #FFFFFF. That’s the code you’ll need to put into the code of your website.

You can safely use these colors for headings, subheading, backgrounds, buttons, links, and so on in your web design, knowing that the colors harmonize with each other and perfectly match the photo.

Here is the original photo again:

Here are the colors I chose:

And here are the hex codes for these colors:

#5c7ba1

#98ae1a

#b2ab6e

#a58738

#4e6389

Notice they are a bit different from the ones automatically chosen by the online tool. Choosing colors in Photoshop or just by using a color picker directly on a photo gives you greater flexibility.

If you would like some help using this technique, please leave a comment below or email me at me@trishacupra.com

No, not emails that literally bounce. I’m talking about emails that people try to send in reply to a message they received, but nobody ever gets it. Why? Because the message was an automated email from a ‘no reply’ address, and all messages addressed to it end up in a blackhole in cyberspace.

You may have seen these types of email addresses before. Sometimes the email address itself is a message in itself – like no-reply@website.com. Some say, “This is an automated message… do not reply” and some ask you to click on a link to reply using an online form instead.

Do you have a ‘no reply’ email address? Even if you don’t, it’s quite possible that people could get a ‘no reply’ email when using your website. I’ll get to that shortly.

When you send someone an email, you’re in a conversation with them. You send them a message, and hopefully they send one back, and so on, back and forth. It’s a lot like throwing a ball back and forth between yourself and the other person, with the ball being the message.

Are you dropping the ball?

But if you use a ‘no reply’ address, instead of you being there to catch the ball, the ball bounces off a brick wall in front of you. You never get the message, and the other person wonders why you dropped the ball.

I’m assuming you have enough sense to not email people using a ‘no reply’ email account, because you know there’s no point starting a conversation with someone who can’t respond.

But, you may be sending your website’s visitors ‘no reply’ emails without realizing it.

What could be sending no reply messages to your visitors?

Think of all the situations when your visitors could possibly be receiving automated (computer-generated) messages that they can’t respond to.

Automated systems (like some WordPress plugins, mailing list services such as AWeber, and online store programs) very often send a type of confirmation message after a visitor takes a certain action, like signing up or making a purchase.

Act as though you are a new visitor to your website. Carry out the actions that your visitors do, and see what automated messages you receive in your inbox. Look carefully at the email address that comes up when you click ‘Reply’. If it’s not one of the addresses you use for your business, then you have a problem!

Here are some things to check:

1. Sign up for your own mailing list (eZine/newsletter) and look at the confirmation email you get. Click ‘Reply’ and send a message in response. Where does that email end up?

2. Do the same for any autoresponder series you have set up (like an e-Course or a scheduled set of follow-up messages). What happens when you reply to these messages?

3. When you receive a copy of your eZine/newsletter, what happens when you click the reply button? Where does the reply end up?

4. What message do you get after you buy a product or service from your own website? Does your online store system send messages that can’t be directly replied to?

5. Do you use a support ticket system? Can people reply directly to emails generated by the ticket system, or do they need to click a link to go back to your website an fill in an online form? (And if you do make them click a link, I can tell you that personally I find that a hassle.)

6. Send messages via your online forms on your website.  Do you get an automated message from your website saying that the message was sent successfully? Maybe you even get a ‘carbon copy’ of the message you sent via the form – but can you reply to the email?

7. Do you have a blog? Can people sign up via a service like Feedburner to get your new posts by email? If so, sign up and see if the emails that are sent by the service can be replied to.

8. Also, if you have a blog, do you have a feature that allows people to be notified of new comments? What happens when you try replying to one of these ‘new comment notifications’?

9. In the same vein, if you have a forum, what automated messages get sent out by your forum? What happens when someone tries replying to a message notifying them that there is a new reply on a thread? If you send emails to all your forum members via an admin panel, can people reply directly to those email?

Depending on your type of website, there may be automated messages that I haven’t mentioned. But now that you’re really thinking hard about it, I’m sure they’ll occur to you.

Help! I can’t reply to this message properly!

Did you find that your website (or a service provider your website uses) actually does create some automated messages that have a ‘no reply’ address?

Here’s what to do:

1. If the messages come from your own website, check the settings in your Control Panel. If it’s created by a WordPress plugin, check the options for that plugin in your WordPress admin panel. Look for a way to specify the ‘Reply To‘ or ‘From’ address of the messages.

2. If the messages come from a service you use, like AWeber or Feedburner, log into your account and see if you can change the settings for the ‘Reply To‘ or ‘From’ address of the messages.

What if it’s unavoidable?

There are times when you just can’t change the ‘Reply To’ email address that an automated system generates. Here’s what to do if you’re stuck:

1. Can you switch to a system that does the same thing, but lets you use your own address for replies? If you’re using a WordPress plugin, check out other plugins to see if there is a more flexible alternative.

2. Can you contact the developer of the system (such as the author of a WordPress plugin) and ask them to help you? Tell them you would really prefer that the messages the system generates have your own ‘Reply To’ address. Ask them if there is a setting you overlooked – and if not, ask them kindly what the chances are of them making it possible in the next update. (Be especially kind if the system or plugin is free – they’re not making any money so don’t pressure them.)

3. If it’s a 3rd-party service that’s sending the ‘no reply’ messages, contact them and ask them how to change the ‘Reply To’ address. If it’s not possible, check out their competitors – it may be worth switching.

If all that fails? The Last Resort…

If there really is no hope of changing the ‘Reply To’ address, here’s what to do…

Make it extremely obvious that replying to the message is completely futile, and provide an email address that you can actually be contacted with.

And because you are inconveniencing your email recipient, it doesn’t hurt to throw in a bit of your sense of humor. Here’s one that made me smile when I saw it yesterday:

If the system doesn’t let you mention your real email address at all, anywhere in the message, then it’s time to seriously considering ending your relationship with that system.

Ask me for advice

Before divorcing the source of your automated messages, leave a comment here on this post (under a false name if you like) and I’ll let you know if there’s any hope of salvaging the situation.

And if you have any tips of your own, please mention them here in the comment section!

We used to fear bullets, now we fear bullet points. At least I do.

Much like websites, Powerpoint (and Keynote) presentations are brutally awful unless they are well-designed.

Before you design your next presentation, I implore you with all my heart to check out these two lifesavers first:

1. It takes less than 10 minutes to watch this video on YouTube on how to avoid creating the PowerPoint Presentation from Hell.

Click here to view the embedded video.

2. Go buy this book. It will revolutionize the way you create presentations – and I do mean that in a good way.

Beyond Bullet Points

This guy might want to reconsider his strategy…

Thanks to Sean D, owner of 5000BC, for sharing this on his forum. It’s way too funny – I couldn’t help sharing it.

Now, I have to take a time on phone to meet once lover, who are ditched by each other, whatever that means.

What really grabbed me was the creative logo:

I love the font, the contrast between bold and light weights for the two words (which now don’t need a space in between), and most of all I love the orange juice and the blue straw that turns the U into a cup. Awesome in its simplicity!

It’s inspired me to try this idea:

It’s certainly not as simple as Design Juices, but it sure was fun to do!

Similarities

I used a similar simple sans serif font (no ‘curly’ ends on the letters), kept the two words together and bolded one of the words for contrast. I used ALL CAPS like the original design.

My design extends above the words (the owl’s head) in the same way the straw extends above the letters in the original design.

Though not obvious at first glance, both designs also use a similar color scheme. Both use white, black, and aqua, and a warm color – orange in the first design, and warm brown in my design.

Differences

I added more contrast by making the word ‘Blue’ blue-colored. I bolded my second word instead of the first, for a couple of reasons. First, it makes sense to make the word ‘Blue’ blue, so that word already stands out. If I made it bold it as well, it would contrast too much, and throw it off-balance.

Also, because the word ‘Blue’ is longer than ‘Owl’, adding the extra weight to the shorter word balances the two words nicely. (I can imagine putting the two words on an old-fashioned pair of scales and seeing them balance each other quite well.)

My owl graphic (the mascot for this site) is much more complex than the simple glass of orange juice and straw. There might be a way to incorporated a very simplistic owl shape into these words, but I love my little owl so I’m keeping him as he is.

I used a warm brown wooden background instead of a black wood. It works well with all the blue, and warms up the whole design. The warmth also works well with the way my owl hugs the letter W.

Finally, I added a drop shadow to my words to make them pop out more.

Who this style would work for

This is quite a modern style. It wouldn’t work for someone selling antiques, but it would work well for people in the technology industry and design industry (I’m in both!).

It would also work well coaches who help their clients to simplify their lives.

I can see it working for people in the health industry, too.

If you’re trying to communicate concepts like “hand-made”, “old-fashioned”, “fancy” or “intricate”, then this style is too clean and simple. You should look at serif or decorative fonts instead.

This style also works best with two words – if you have a long business name (like mine – Blue Owl Web Design Makeovers) you can consider using just part of it. I still need to work out where I’d put the rest of my business name in this design!

Let’s say you are looking for an RSS icon. (Not sure what RSS is? Just check out this video…)

First, go to IconFinder.net (this links opens a new window)

Here’s what the home page looks like…

Now, type rss into the Search box and click on the Search button. (There are some handy dandy search tips here.)

You’ll get a page of search results something like this…

It’s best to narrow down the results to icons that are allowed to be used for commercial use. So, select ‘Allowed for commercial use’ from the drop-down menu I’ve circled in red in the above screenshot. Up close it looks like this:

Note that this doesn’t mean you’re necessarily completely allowed to use these icons – some designers require you to link to their websites and credit them (in your footer, for example). But we’ll cover that shortly…

You have other options in the menu that can help you find the right icon faster. Let’s take a look at them now…

ICONS PER PAGE

I like to click the third icon here (with the triangle-arrow under it) to see a lot of icons on the screen at once. I have a large screen and a fast internet connection. If you have a smaller monitor and/or a slow connection, then I’d recommend setting it to show fewer icons on the search result pages.

ICON SIZE

This doesn’t change the size of the icons. It narrows down your  search results to icons within the size range you specify. If you have the slider dragged all the way across, it will show all icons from 0 pixels wide/tall (pixels being a unit of measurement) to 128 pixels wide/tall.

In this example below, you’re narrowing down the results to icons under 32px wide/tall…

And in this one, you’ve narrowed down the results to icons between 16px and 48px…

BACKGROUND COLOR

You have three option – white, transparent and black. This doesn’t actually change the color of the icon’s background – it just helps you to preview how it would look on different backgrounds.

All properly-designed icons have a transparent background so that they’ll work with any background you have on your website.

If you’re putting the icon on a part of your website with a white (or light) background, you can check it will look good.

If you’re putting it on a dark background, preview it using the black option. Check that the edges around the icon is smooth.

Notice how the shadow under this icon has disappeared on the black background?

The transparent option shows a gray checker-board pattern behind the icon. Somewhere in history this checker-board pattern began being used to represent a clear or see-through background. You should be able to see the tiny squares go all the way to the edges of the icon, to show that the icon has a cleanly cut out outline.

You can also see if any parts of the icon itself are transparent. See how you can see the pattern through the shadow under this icon? That’s why it disappeared on the black background. But on a white or light-colored background, the transparent shadow will look great.

What to watch out for

So, what does a poorly-designed icon look like?

Here’s an icon that looks fine on a white background…

But if you were to put it on a dark background, look at how untidy the edges are…

In comparison, there are no ugly white bits on the corners of this well-designed icon…

I’ve found a good icon.. what’s next?

Now it’s time to check the usage conditions (the license) to see if you need to give credit to the icon creator or if you can just use it with no attribution. Just click on the INFO link on the icon you like…

Some of the less obvious licenses give a link to a full explanation of how you can use the icon. I tend to avoid icons that make you give credit to the creator, unless the icon is really worth the trouble.

In this INFO box you can also see if the icon is part of a matching set. It can be worthwhile to check this out, because you may need other icons and it’s nice to have them all from a matching set in the same style.

I agree with the license… how do I get the icon?

If you haven’t already, just click on the icon you like, and you’ll get a page like this…

Make sure you have the best size for your project. If it comes it other sizes, they’ll be shown on this page.

PNG or ICO format?

You’ll want to download the icon as a PNG file if you plan to use it on your website. Just click the PNG download link and save the image onto your computer.

If you use WordPress and you want to use the icon in a Post or Page, you can now go ahead and upload it.

Any questions? Do you know a better way to do this? Please leave a comment and we’ll discuss it.

If you’re a blogger, chances are that you’ve heard of WordPress. According to their website, WordPress is a “state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability.” It’s basically a bunch of coding that makes it much, much easier for us bloggers to publish content. Okay, that sounds great, but is WordPress really the best publishing platform? Are any of WordPress’ competitors better than them? Read on to find out!

Why WordPress Is The Ultimate Blogging Platform | WPWebHost…

Mr Quincy Magoo is a cartoon character who was created in 1949. He is a wealthy, short-statured retiree who gets into a series of sticky situations as a result of his nearsightedness, compounded by his stubborn refusal to admit the problem.

There’s a little bit of Mr Magoo in all of us, especially once we start approaching our thirties and forties. That’s why it’s so important to have clearly readable text on your website, even if your 20-something year old designer thinks tiny text in this season’s colors is so much trendier.

You can’t just use any font in any size on your website and assume that it’s easily readable.

Choose a good font

There are only certain fonts that you can safely use on your website, and some of them are plain ugly and hard to read.

(Just because Courier is web-safe, doesn’t mean you should use it as your main font.)

Choose a good text size

The size and the color of the text can also make it unreadable, even to those with good eyesight. Text is hard to read when it’s too small or too large.

A good size for your main body text is 14px.

Play nicely with colors

Is the color of your text the most readable it could be? The most readable text is very dark text on a very light background. Pure black text on a bright white background can be a bit too jarring, so a dark gray on an extremely light gray/off-white background is a good choice for your ‘body’ text.

Other colors are good for headings, but not for the main body of text.

And white text on a dark background can cause eye-strain very quickly…

…and should be avoided unless done by a true expert.

Is that a link?

Is it obvious what is clickable and what isn’t? If you make text blue, and/or underline it, someone is going to click on it. Isn’t it frustrating that the word ‘clickable’ in this paragraph isn’t really a link?

Can your visitors easily tell at a glance whether something is a link or not? Do your links look clickable?

Avoid big blocks of text

Are your paragraphs too long? In print, paragraphs are normally 4 or 5 sentences long. But that is way too difficult to read on a screen. Break your copy into very short paragraphs of 3 to 5 lines each. Larger blocks of text are just too cumbersome to read quickly. Adding subheadings also helps your visitors to read down the page more easily.

Are your lines of text too long or short?

Does your line-length help make your copy easily readable? Every time you reach the end of a sentence, your eyes have to find the beginning of the next sentence. Do lines of text stretch across the entire length of widescreen monitors? Do people look like they’re watching a tennis match while they try to read your text?

If the average number of words in your main column is around 15 words per line, it’s easy enough to read. Any more than that, and you risk fatiguing your readers’ eyes.

Your sidebar (a narrow column of text alongside your main text area) should have a slightly smaller font size than your main text. You don’t want to have too few words per line, either, because that interrupts the flow of reading, too.

Remember Mr Magoo

So, next time you look at your website, think of poor Mr Magoo, and whether he can read your website.

A Personal Note

Tomorrow morning I’ll be on a plane with my family, flying to New Zealand for a family vacation. I’ll be back on November 9.

If you are on Twitter, invite your website’s visitors to follow you. The best way to do this is to put a link to your Twitter profile in your sidebar, and on your Contact page.

Here’s how I’ve done it on this website:

In my sidebar…

And on my Contact page:

There are hundreds of free Twitter icons available online, if you know where to look.

Here is a great set of 50 free Twitter icons that you can use, created by Webdesigner Depot. The image below is a preview only. Please go to Webdesigner Depot to download the set.

Please go to Webdesigner Depot to download the set.

(Need help putting a Twitter icon on your own website? Please contact me. I only charge US$20 to do it for you.)

When I’m about to do something that could potentially make my design look ugly, I slip my website into Maintenance Mode. Then, if someone happens to visit the site in the 10 minutes or so that I’ve taken it down, they’re greeted with a splash screen explaining what’s going on, and when things will be back to normal.

I’ve been using the Maintenance Mode plugin for a long time. It’s very plain – here’s what it looks like when you put your site into Maintenance Mode…

It does the job, but today I discovered a much more attractive option…

It’s called !Wartungsmodus and it comes with a range of different styles for your Maintenance page. Here’s the one I’ll be using, because I have a thing for cute cyber monsters…

But there are others. Here are a few more:

(Yes, it has a German version, but the same style has an English version.)

And even a plain Jane version…

It’s quite simple to use – here’s the interface…

So, if you want an attractive way to cover up your maintenance work on your WordPress site, just install !Wartungsmodus and enjoy!

And if playing with plugins isn’t something you find fun, why not hire me to install it for you? For just US$20 I’ll install it for you and show you how it works. Just contact me if you’re interested.

If you have any questions at all about Maintenance Mode plugins, just ask me in the comments or contact me privately.