In the past several years many designers have take to present phone numbers in a format with dots. For example: 206.555.1212. But I have no idea why they do this. It is difficult to recognize as a phone number. This dotted format - at quick glance - looks more like an IP address than a telephone number. So I ask, which group of numbers below is more easily recognized as a phone number to you?

(206) 850-9798
206-850-9798
206.850.9798

I’d argue day and night that (206) 555-1212 is the easiest to recognize format.

Aside from human recognition, some applications (like Microsoft Outlook 2003) won’t recognize 206.555.1212 as a phone number. This led me to check in with the Microformats folks to see if they had a specification or a standard format for phone numbers. Unfortunately, their list of Microformats doesn’t turn up anything for phone numbers. vCards are as close as they get.

Looking past function for a moment consider the aesthetics of the three options above. The (206) 555-1212 format is much more beautiful and elegant. It has subtle curves in the parenthesis, more white space overall and a clear call to locality (that is, separating the area code from the local number).

Do you feel as strongly about using 206.850.9798 as I do about using (206) 555-1212? Tell me why in the comments below. If we end up getting any comments on this (especially from non-American viewers who have different phone number formats) then we’ll have to expand the discussion to include international telephone number formats.

The first is called Yumga. Forget the paid services; Yugma works great and is free. I’ve been using it now for several months and have now become an affiliate to help spread the word. In Yugma’s own words:

Yugma is a free web collaboration service that enables people to instantly connect over the internet to communicate and share content and ideas using any application or software. Whether you using a Windows, Mac or Linux computer, you can connect on-demand and real-time with co-workers, clients, friends and family — regardless of whether they are across the city, nation or even the globe.

Popular uses include hosting study groups or tutoring sessions, hosting virtual clubs or social events, presenting proposals or creative work, product demonstrations, conducting training, customer service, team reviews, remote support and troubleshooting, and collaboration by artists, writers, and design professionals.

The second great new free app is call LogMeIn. LogMeIn has been around for a while but I just started using it when I travel. Rather than worry if I transfered my latest design files to my laptop when I travel, I know that with LogMeIn I can access all my computers at home from anywhere, for free! Sure, some versions of Windows have this kind of functionality built in, but LogMeIn makes it plain-Jane easy to use. There are many upgraded paid products from LogMeIn, but the free product works quite well for me. Here’s a snippet from them:

ogMeIn, Inc. (formerly 3am Labs, Inc.) offers a suite of remote access and support solutions that provide instant, secure connections between remote PCs over the web. Powered by the LogMeIn Gateway, the service has applications for desktop remote control, data backup, file sharing, remote system administration, and on-demand customer support.

LogMeIn offers the industry’s fastest, easiest remote access and support solutions – and has been recognized with eight Editors’ Choice Awards and “Best of the Year” honors.

“Designers, developers, project managers. Writers and editors. Information architects and usability specialists. People who make websites have been at it for more than a dozen years, yet almost nothing is known, statistically, about our profession. Who are we? Where do we live? What are our titles, our skills, our educational backgrounds? Where and with whom do we work? What do we earn? What do we value?

It’s time we learned the answers to these and other questions about web design.”

Fill out the A List Apart 2007 Web Design Survey.

It is common these days to you use the » character on web page bread crumb trails and to call attention to certain links on the page. As a designer the » symbol looks much better than the > symbol.

However, if you use these characters in your pages be sure to use the « character for « and the » character for ». Do not use the « for « and » for ». Why? JAWS and other screen readers will read « as “left angle quote” and » as “right angle quote”.

Just to make sure this isn’t confusing, unless you’re specifically wanting to put your content in left and right angle quotes be sure to use these characters:

« for «
» for »

PS. Dreamweaver by default creates the right and left angle quotes when inserting these characters form the INSERT » HTML » SPECIAL CHARACTERS menu.

Updated below with some more. And note, that I can not find the non left/right angle quote version of these characters…

‹ for ‹
› for ›

I recently had some projects where the client wanted the page layouts and CSS tested in Firefox 1.5 and Firefox 2. I can’t seem to find any difference in the way Firefox 1.5 or Firefox 2 renders CSS. I haven’t found other blogs, forums or Mozilla help docs that talk about it either (though I’m still looking). Please reply to this post if you have any light to shed on the issue. For now I consider them to be the same when it comes to CSS.

In the process of my search I came across Mozilla’s CSS Developer CENTER. It has some essential links and good introduction to CSS. It also has some good info on CSS3 (which may someday be part of the day-to-day real world).

I’ve been running IE 7 beta on test machines for a while now, but just installed it on my production machine through auto-update.

It was a smooth update. The poor bookmark UI in IE 7 however, is the one thing that keeps me using Firefox as my default browser. That’s too bad. I really like the DOM explorer add on for IE versus the Firefox developer toolbar extension).

After installing IE 7 you may notice that Dreamweaver does not remember your FTP passwords for your sites. Adobe … released an update that’ll fix the disappearing passwords.

(1) Buy more ram for Photoshop. I know many people are skeptical if you’ll see much performance difference when using 1 gig of ram versus over 1 gig of ram. But, if you’re running Photoshop with large files you will benefit from more ram. I’ve been running 1 gig of ram on my Dell 9150, Pentium Dual Core 3Ghz for about 8 months. It’s been nice, but lately, I’ve had to work with 100+ layer Photoshop docs and things were getting slow. The extra gig I just added (for a total of 2 gig) has increased my typical Photoshop tasks 30% to 250%. The time savings will pay for the $99 gig of ram update in no time. Below is my very unscientific benchmark test of Photoshop speed before and after the ram upgrade.

(2) The next tip. Buy your ram from The Chip Merchant. I remember buying my first ram upgrade for my Mac Quadra 700 from The Chip Merchant in 1991. They had the best prices and service then, and still do 15 years later!

I had a ram slot question about my Dell when I went to install the new 1 gig module so I called The Chip Merchant. Within minutes their tech support knew my exact Dell model and everything about the installation. He explained some nitty gritty details for options I’d have down the road and we were done. I love The Chip Merchant.

1. Design for the user experience not for technologies and tools
2. Design with semantic mark-up in mind
3. Design for accessibility, you’ll get more than just accessibility benefits
4. Make menus from lists
5. Use CSS and image sprites for hover effects or when you need a related set of graphics to be available on the client at the same time
6. Use the yellow fade technique to give feedback to users
7. Create wire frames as full size storyboards that “play” in time like animation storyboards (flow charts and static Visio line drawings don’t communicate the real life experience of the UI and will ultimately hurt the end product)
8. For complex web apps start with wire frame storyboards instead of full color Photoshop comps
9. Know your target browser “folds” (horizontal and vertical)
10. Hand off XHTML & CSS to developers not PSDs

Check out the new (free) beta download of Microsoft Expression Web Designer. It’s looking quite nice and heck of a lot cheaper ($0 currently) than Dreamweaver. Vitamin has a good review if you want to see screen shots before downloading.

If you’ve tried to use rounded corners on the ASP.NET 2.0 menu control you’ll notice that the control renders a white background behind the entire bounds of the drop down menus (in IE 6). There is no user interface in Visual Studio (or Visual Web Developer) to get rid of this white space.
read more …

I just started writing this blog. Stay tuned for more nitty gritty on PNG post processing (lets hope Macromedia whips Photoshop PNG output into shape), how to format CSS for ASP.NET 2.0-centric developers, storyboarding rich AJAX UI’s and hopefully some more (no promises : ).