“If you can make a solid design in black, white, and shades of gray, it will often allow you to translate your design to almost any color combination—as long as that color combination maintains the same level of contrast between the visual elements. Create your sketches and roughs in black and white and then create comps in grayscale. This workflow not only allows your mind to stay focused on the hierarchy of elements on the page, preventing you from getting hung up on color choices, it also helps you to create a design that uses proper contrast.”

From A List Apart. Geared to help designers create accessible websites that color blind people can see, her approach is excellent for any design for any audience. Includes links to other resources, for example, GrayBit, an online service that will translate any site into grey scale, Color Scheme Designer, a site to help create color palettes and show how different colorblind conditions see your palettes, and Check My Colours.

URLs

http://www.alistapart.com/articles/contrast-is-king/
http://graybit.com/main.php
http://colorschemedesigner.com/
http://www.checkmycolours.com/

“Google Grants is a unique in-kind donation program awarding free AdWords advertising to select charitable organizations. We support organizations sharing our philosophy of community service to help the world in areas such as science and technology, education, global public health, the environment, youth advocacy, and the arts.”

From Google Grants. The value of their grant varies and depends on how the non-profit uses their grant. Google says it is about $300/month. But the goal is to allow non-profits to use AdWords to get donations, volunteers, and other good things.

If you’re a non-profit that qualifies and is accepted, or you have a non-profit who meets their criteria, this could be an excellent program. There is no end date to the grant as long as the non-profit actively keeps up their AdWords account.

“No single visual element has more effect on a viewer than color. Color gets attention, sets a mood, sends a message. But what colors are the right ones? The key is that color is relational. Colors don’t exist in a vacuum but are always seen with other colors. Because of this, you can design a color-coordinated document based on the colors in any element on the page. Here’s how.”

From Before & After magazine. It’s part of their process to collect email addresses so you have to provide an email address to get the document. However, I find their monthly how-to emails often interesting, not pushy.

This article shows a series of basic steps you can follow to take a photograph and extract many different possible color palettes. Picking colors can be hard, especially for business people on a budget. Even with a budget, it helps to know the color picking process if you manage or hire designers. In this case, their article shows how to use colors in one element of a document, a photograph, to then extract palettes from a color wheel. It’s a very good primer on that process.

UPDATE: This document on how to pick colors that work together also works great with an online color wheel to pick analogs, tetrads, and so on. Color Scheme Designer, for example, lets you define an RGB color value (to the lower right of the circle on the left side of their page) and then all its different color relations. Color Scheme Designer also lets you see how your color choices look to color-impaired people. You still have to pick your colors and ensure they work together in a palette, but an online color wheel can make the process faster and easier.

“We’re living in a social media world, and, like it or not, our avatar is often the first impression others get about us as we interact virtually on social networks, blogs, microblogs and other online communities. Our avatars are a representation of our brands — our personal brand or our company’s or organization’s brand. But how many of us are thinking strategically about our avatars?”

From Salon. If you have not figured it out already, the avatar, the small thumbnail sized picture you use on Facebook and LinkedIn, among other places, can say alot about you. This blog post describes six different issues to consider as you pick and change avatars.

As a web designer and coder, I collect tons of emails and attachments from clients that have to be carefully tracked and easily found. And many projects have three, four, or more people attached. Often I have to dig out their contact information to make calls.

Awhile back, I found Xobni, a software tool with an odd name that should be in every version of any email software. Now they have a Plus version, for $29.95, that solves the major issue I had with the software. Both the free and paid versions are a huge value if you collect a lot of email for projects.

Xobni works as a plugin to Outlook. When you set up, it can take a few hours for the software to index thousands of emails. But that is a small price to pay for the features. Once indexed, Xobni sits on the right side of Outlook or it appears when you call it. Typing in part or all of a name or search term in Xobni calls up all your emails from that person or emails that contain that term. You also get the contact information from your address book. And attachments. And email threads, the chains of email by email subject line, nested and sorted by date. The ability to dig out ancient and obscure emails in seconds floored me the first time I used it.

Xobni also is useful in going back to tell your clients the exact email, by date and subject line, that had the information you sent them months ago. You know the phone call: the client calls up and says, “Did you ever do this?” Lawyers and anyone who needs backup often months later will find Xobni extremely easy and helpful.

While I religiously create project and client folders in Outlook and sort email every day, Xobni makes it possible to avoid that chore. Indeed, Xobni really is a totally different way to look at your email and work with it. Which is the reason every email client should have a current email view and the Xobni view.

The only issue I’ve found happens after I archive my emails, when my Outlook file goes over 2GB which happens every year. Happily, Xobni keeps a copy of the text of emails, and contact information, but not the attachments. Often that’s all I need.

Their new Plus version, however, includes the ability to search across multiple Outlook files. So I can have old archived emails as easily found as the ones in my current email file. The Free version still is limited to one Outlook file which may be fine for most people because it keeps the actual email text of archived emails (assuming you run Xobni before you archive your emails, of course).

Bottomline, Xobni is well worth a try if you have to manage large amounts of email. And even if you don’t the ability to quickly find any email based on author or content is amazing and valuable. The free version has a lot of capability. The Plus version, at $29.95, is a huge value even if you only use it to search across your archived email files with their attachments. It’s a small price to pay to support useful innovative software.

“To date, the most common approach to propagating a single user experience standard is the development of UI guidelines and principles documentation within an organization. Development teams — usually incorporating a user experience specialist — then reference this documentation during implementation and upgrade processes.

However, as the numbers of systems grow within an organization, so does the effort needed to maintain the quality and consistency of the user experience. For many organizations, it is now impossible to assign much, if any, time of a user experience specialist to all implementation efforts, and experience has shown that the UI guidelines and principles approach to propagating a single user experience standard does not scale well.”

From Boxes and Arrows. Besides a quick discussion of issues around how traditional guideline documents don’t scale, and alternative solutions, this article includes an excellent set of links to UI pattern libraries.

Recently came across two articles about free website monitoring tools, Top 10 Free Website Uptime Monitoring Services, from Design Live, and 12 Excellent Free Tools for Monitoring Your Sites Uptime, from Six Revisions. Both articles are good for identifying possible services to use. Both have some overlap in the services they document. (I’ve also covered this topic before, Website Monitoring and Support Software).

However, articles like this are a mile wide and an inch deep. For example, some of these free services take up to 60 minutes to notify you if there is a failure. There also could be lag time between the time the monitoring service is notified and the time they send an email or SMS to you. At least one solution involves placing a file on your web server, which yields more detailed data to monitor. In short, the free option for many of these services is limited in ways that might not be useful. So it is caveat emptor, or buyer beware.

I have played with Montastic and Basic State. Montastic is fine. Basic State yesterday caught a server failure within fifteen minutes, which is great for free. Their daily status emails also are useful. I’d also check out the comments on these articles for more vendors. I found Server Density that way.

My recommendation is to compare all services, try the services that meet your needs and then, if you need to, pay for the service. Despite what these articles promise, it is possible but unlikely you will find a free service that does exactly what you want. But free is enough to try these services, to find what works for your website(s).

“How many times have you had to debug your web pages on virtual or multiple machines running different versions of Internet Explorer? Or had to wait for a slow web service to return renderings of your pages?

You don’t have to do that anymore. Now you can debug your pages on multiple versions of IE on the same machine that you use for Web development.”

From the MSDN Blog about Microsoft Expression Web SuperPreview. Found while searching for the next best thing after Multiple IE, an earlier solution to let web designers and developers test their pages in multiple versions of the Internet Explorer web browsers. Multiple IE is no longer supported, and IE8 is out, so Microsoft’s Super Preview software looks like a decent alternative. (The only problem? Take a wild guess. The software is bloated, 250MB. Probably worth it since it is a Microsoft solution to a Microsoft problem. But you’ll need extra time to download their software.)

Other options appear to be IE Tester and Xenocode Browser Sandbox.

The most lightweight option probably is WestCiv’s X-Ray bookmark utility. It is hands down the slickest utility for web designers. Select the X-Ray bookmark then click any part of any web page and see all sorts of useful detail. I can’t get X-Ray to work with IE6, to show me all those nasty bug effects, but X-Ray does work on IE7, Google Chrome, Safari, and Firefox. So it’s a very lightweight easy solution to figuring out how your pages are being rendered across multiple browsers. And how somebody coded a neat web page design.

UPDATE (8/22/2009): If you install the Xenocode Browser Sandbox, and want to remove it, be aware that you may need to remove multiple instances of their software through the Windows Add/Remove Software screen. Also, in your Windows Task Manager (Ctl + Alt + Del), in the Processes tab, Xenocode software shows up as Spoon-Sandbox.exe. It’s a bit obscure. I had installed Xenocode for testing only to see, months later, that every day it loads spoon-sandbox.exe even though I don’t use the software. If you’re compulsive, like me, and want to know what is on your computer, now you know.

UPDATE (11/13/2009): Today there is no need to download software like Super Preview to view your application in different web browsers. Adobe’s BrowserLab currently is free and available anywhere with a modern browser. It’s easy to use and displays the full range of bad browsers, specifically, IE6 and IE7 on both Windows and Mac. But it also shows Chrome, Firefox, and Safari. Browsercam also has updated their service to display your pages at a variety of screen resolutions. I have used Super Preview and while it is useful, it is harder to navigate than BrowserLab and the latter does not require a massive download and installation of software.

UPDATE (02/15/2010): Added a link to the release Microsoft Expression Web product. Unfortunately, the SuperPreview software is no longer free. You have to buy the whole software package. BrowserLab probably is the better option, as a result, unless you need to identify exactly what is wrong with how Internet Explorer displays your web page. In that event, SuperPreview provides excellent detail about the code and makes it relatively easy to find and fix problems.

“There are numerous ways for brands to leverage Facebook but the overall branded experience is becoming increasingly integrated into a single offering as the new Pages product highlights. So what are the primary benefits and changes for the new branded pages?”

From AllFacebook. This article nicely describes how to take advantage of Facebook for your business. It is extremely comprehensive, an excellent how-to and checklist for your pages.

In reading this, however, it struck me that Facebook does (or soon will do) everything a good corporate website must. A Facebook business page is a second website. Only it has better tools to connect with customers and a platform to expose your business to many more people than a search engine (see also John Battelle’s Searchblog article, The Conversation is Shifting).

“Information architecture is an often misunderstood job title. Are they Designers? Developers? Managers? All of the above? In this article we’ll discuss what information architecture is, why it’s related to usability, and what are the common tools/programs used in information architecture.

Along the way we’ll share some of the tweeters, books, and resources we found useful for budding information architects. Even if you’re familiar with the discipline already, you can probably pick up something you’ve missed.”

From UXBooth. This article is comprehensive but the data is presented in neat little boxes, for example, links to the Twitter addresses for several information architects and links to software used to create information maps, not a ton of prose. But the insights are thorough. Information architecture is both a distinct skill set requiring you hire someone to do it and a skill that business and software program managers should possess.

Google stepped up its attack on the telecommunications industry on Thursday with a free service called Google Voice that, if successful, could chip away at the revenue of companies big and small, like eBay, which owns Skype, telephone companies and a string of technology start-up firms.

Google Voice is an expanded version of a service previously known as GrandCentral, a start-up that Google acquired 20 months ago. It is intended to simplify the way people handle phone calls, voice mail and text messages. The service will initially be made available only to existing GrandCentral subscribers; Google says the general public will be able to use it in the coming weeks.

Google Voice allows users to route all their calls through a single number that can ring their home, work and mobile phones simultaneously. It also gives users a single and easy-to-manage voice mail system for multiple phone lines. And it lets users make calls, routed via the Internet, free in the United States and for a small fee internationally.”

From the New York Times (sub reqd, content free only a short while). There’s also interesting commentary from Learn Online (which links to demos) and John Batelle at his Searchblog.

While most commentators focus on the Fortune 500 aspect (who will Google drive out of business next?), the most powerful story about Google Voice (formerly Grand Central) is what it offers small businesses and consultants. They no longer will need a dedicated business line. They can use Google Voice to screen calls, route calls, and handle all the telephone-related tasks currently handled on a one-off basis. For businesses that don’t need a PBX to traffic calls to multiple numbers, Google Voice will be a very useful tool.

I’ve been lucky to use Grand Central for years and it makes a huge difference to have a universal, follow me everywhere, phone number. It even one day got me out of cleaning my teen age daughter’s locker at middle school when a client called just as I was about to start helping her clean out her papers and books. Sadly for her, I had to take the call.

When Google Voice is available to the public in the next few weeks, I highly recommend you look at signing up. The only problem I’ve seen in converting from Grand Central to Google Voice is that my Grand Central inbox disappeared and with it my contacts. For me, I simply have to recreate my contacts. For others, that might be a big deal.

“In this article tripwire magazine presents an overview of more than 75 excellent free fonts you should consider using for your designs. Not all free Fonts are worth using but the Fonts listed in this article have all been picked out because they are better than the rest. Before using fonts please read the license agreements carefully — they can change from time to time.”

From Tripwire. They include some very beautiful fonts, including Museo, that are clean and well-designed. Often free fonts are very hit or miss. Many of these fonts compare well to paid fonts. And some, like Chucara, require you to contact the designer. But all of them are free within their license restrictions.

“How do you scale CSS for millions of visitors or thousands of pages? Nicole first presented Object Oriented CSS at Web Directions North in Denver. Since then, the response has been overwhelming. OOCSS allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.”

From stubbornella at github. The slide presentation does a good job of explaining the problems with current CSS coding, for example, the lack of  CSS code re-use. However, I’m leery of CSS frameworks like Blueprint because (in my view) they go too far and create too much code and require too much learning to implement easily across many websites. Not to mention they can be difficult to maintain if the next coder is not familiar with the CSS framework and has to fix the CSS styles. That said, improving how you code cascading style sheets is an important topic and worth reading about different possible solutions.

“It has been predicted that Apple will have sold 45 million iPhones by the end of 2009. And that’s before it hits China. There aren’t hundreds of type-related apps for the iPhone, but here are few; and a few type-related tips too.”

From I Love Typography. I have way too many apps on my iPhone, most of them games to appease our kids on long trips, but there are a few here worth a mention. In particular, I see that the excellent What the Font? service now has an iPhone app version that uses the phone’s camera. So you can identify fonts just using your phone instead of scanning, cropping, and uploading a font sample to their service. Neat.

By the way, this article includes by chance a link to I Love Typography’s article about how to identify fonts, not just using What the Font? but also other services and techniques.

“A personal portfolio website is all about promoting you. You are a brand, and your name is a brand name. No one is going to know about your brand unless you get it out there; and if you’re a Web designer, developer, writer, gamer or any other type of creative, then it’s essential that you have a good portfolio website.”

From Smashing Magazine. A basic but thorough list of what should be in a portfolio website. Includes links to articles about creating an online portfolio and examples of excellent online portfolios. Basically this is a great article that covers a range of issues related to creating an effective portfolio website: what’s included, how to create one, and examples to inspire and give you ideas for your site.