Goldman Design Blog

ASP.net 2.0 CSS Server Control Adapters for Menus, Tree Views, Grid Views

Kevin Goldman — Sat, 08 Sep 2007 22:14:35 +0000

Chris Pels posted a great video tutorial of the ASP.net CSS Control Adapters on the asp.net site. If you’ve ever wanted to use the ASP.net 2.0 server controls for page elements like menus, tree views, gridviews, detailviews, etc.. but would like the ASP.net process to render semantic HTML then you’ll love this video and solution.

Here’s a little background. Last year my good friend Russ Helfand at GroovyBits and I worked on a CSS solution for Microsoft that makes ASP.net 2.0 server controls render semantically correct HTML and CSS. That is, I worked on the CSS styling and Russ did ALL the ASP.net code. I wouldn’t have known where to start with the server code.

The stock ASP.net menu server control (that creates 1 tier menus or multi tier drop down menus) uses tables to hold the menu items. But the same server control when used with the CSS Adapters will render clean nested ul and li tags. Enjoy.

The Best Format for Phone Numbers (206) 555-1212

Kevin Goldman — Tue, 21 Aug 2007 17:01:49 +0000

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.

Goldman Design is Looking to Contract or Hire Talented Web Designers

Kevin Goldman — Tue, 14 Aug 2007 01:22:03 +0000

Are you a designer looking for work? If so, contact me; I’m looking for talented designers.

We’ll work with large, high profile clients like Microsoft, Intergraph, Online Resources, vFinance and Universal Records. On occasion we’ll also work with smaller, local businesses, indie bands and startups. In all cases we’ll design creative, custom web sites and web apps tailored to the needs of our clients and their users. You need to be a mid level+ web designer with min 2 to 3 years experience creating user-centered web sites & apps. This is a contract position that can lead to employment.

For the past 12 years Goldman Design has been one person, Kevin Goldman. I’ve worked solo and have sub contracted designers on occasion. Now the time has come to expand and bring in key designers on contract that could eventually become design directors as the company grows.

Interested? Send a brief email including (1) portfolio link (list your involvement with each project if not already shown) and (2) links to two of your favorite sites and explain why they’re your fav.

A List of Sites I’ve Designed That Are Not In My Portfolio Yet

Kevin Goldman — Wed, 18 Jul 2007 15:56:45 +0000

Recently I had a potential client ask what sites I’ve designed. Since I haven’t updated my portfolio in almost two years I figured I’d put a short list together here. There are a number of sites that are not public facing - so no links. Some of these include sites and apps were for the US Government (work I’ve done with www.Intergraph.com) and for banks (work I’ve done with www.orcc.com).

There are also several distributed app user interfaces I’ve worked on the last few years, but I’ll need to find some time to add these to my portfolio since I can’t link to them.

http://asp.net
Microsoft product site for ASP.net (now in beta)

http://www.iis.net
Microsoft product site for IIS

http://www.wintellect.com
Prominent Web Development company

http://www.refreshskincare.com
Spa in Scottsdale (and eStore)

http://www.asp.net/cssadapters/
CSS adapters for ASP.net server controls

http://quickstarts.asp.net/QuickStartv20/aspnet/
Microsoft ASP.net Quickstart Tutorials

http://www.stephenpond.com
CRM company in Phoenix

http://www.zimini.com
Internet Coupon startup

http://parkervanilla.com
110 year old wholesale flavor manufacturer

http://www.ibucho.com
A rockin’ San Fran band

http://starterkits.asp.net/SmallBusiness
Microsoft Small Biz ASP.net starter kit - used by developers around the world

http://starterkits.asp.net/PersonalWebsite
Microsoft Personal ASP.net starter kit - used by developers around the world

http://starterkits.asp.net/Club
Microsoft Club Site ASP.net starter kit - used by developers around the world

http://www.dumberthandolphins.com
T-shirt retailer

Two Great New (and free) Apps - Yugma and LogMeIn

Kevin Goldman — Fri, 08 Jun 2007 21:10:07 +0000

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.

A List Apart, Web Design Survey

Kevin Goldman — Sun, 13 May 2007 03:29:42 +0000

“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.

Write Blog Posts Directly From Microsoft Word 2007

Kevin Goldman — Sat, 28 Apr 2007 00:13:53 +0000

This is a test post published directly from the new Word 2007.

I’ll explain this more later …

Text

Change font

Change color

Change size

H2 Heading (verdana)

H3 Heading (default Calibri font)

Bullet
Bullet
- Nested bullet
- Nested bullet
Bullet

Pre Code Test

Arrow Glyphs, What’s Best for Semantics and Screen Readers? ( « » « » )

Kevin Goldman — Fri, 16 Mar 2007 19:21:07 +0000

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 ›

CSS Rendering Differences Between Firefox 1.5 and Firefox 2

Kevin Goldman — Wed, 28 Feb 2007 22:17:20 +0000

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).

IE Dev Toolbar - Beta 3

Kevin Goldman — Sun, 14 Jan 2007 15:19:22 +0000

The new IE Dev Tool bar has been released. It now has a button for “find by click” (so much better than the old drop down menu). With this addition it’s better than the Firefox developer tool bar extension in a lot of ways. The “trace css” is fantastic, but unlike the Firefox Extension - and the crème de la crème of all developer tool bars, Firebug - you can’t edit the CSS once it’s traced.

Update Dreamweaver 8 after Installing IE 7 (fix for unsaved passwords)

Kevin Goldman — Mon, 27 Nov 2006 20:10:56 +0000

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.

Buy More Ram for Photoshop from The Chip Merchant

Kevin Goldman — Thu, 27 Jul 2006 01:00:38 +0000

(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.

Seconds taken to perform my common Photoshop tasks with 1 gig of ram versus 2 gigs of ram. The file that was tested is 45 megs, with 100+ layers, rgb, 72dpi and 1000×1800 pixels.
	Seconds taken using 1 gig of ram	Seconds taken using 2 gig of ram	Percentage increase in speed with 2 gigs of ram
open the file	175	121	144%
action: duplicate the file then flatten it	7	4	175%
save for web	5	2	250%
save as new file name	138	105	131%

(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.

www.ASP.net Redesign

Kevin Goldman — Sun, 16 Jul 2006 18:48:03 +0000

I started to redesign www.asp.net this week. The project has been in talks for months but was green lit recently. I spent this past week on full scale black and white wire frames / storyboards. They’ll be more storyboards of the user experience than abstracted flow charts. Flow charts of information architecture are too abstract and can get people agreeing on concepts that just don’t matter to end users. The current site has a ton of information, product types and a diverse audience. The redesigned site will sing with less visual fluff and more easily findable content for specific audiences. Slick visuals and pretty graphics will be the easier part, as they always are. Working the information design, writing style, extensibility and seeing the transfer of the existing content into semantic formats will be the heavy lifting.

IIS.net Site Design is Up and Running

Kevin Goldman — Sun, 16 Jul 2006 18:38:06 +0000

The last few months I’ve been designing the Microsoft IIS web site. It was a pleasure to work with Bill Staples, Chris Adams and all the folks at Telligent to pull this site together. We have some new features and design additions coming this summer as well.

Top 10 Modern Web Design Techniques and Methods

Kevin Goldman — Sat, 08 Jul 2006 17:42:11 +0000

Design for the user experience not for technologies and tools
Design with semantic mark-up in mind
Design for accessibility, you’ll get more than just accessibility benefits
Make menus from lists
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
Use the yellow fade technique to give feedback to users
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)
For complex web apps start with wire frame storyboards instead of full color Photoshop comps
Know your target browser “folds” (horizontal and vertical)
Hand off XHTML & CSS to developers not PSDs

Microsoft Expression Web Designer Beta

Kevin Goldman — Sat, 24 Jun 2006 20:39:23 +0000

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.

Designing Intergraph’s Rich Web App UI

Kevin Goldman — Sat, 01 Apr 2006 22:38:45 +0000

My friend Jeff Prosise at Wintellect referred me to the Government and Securities Division at Intergraph. After an NDA, some talks and a clear statement of work I started a new user interface project with them. The developers at Intergraph are top notch. I’m humbled and eager to work with them and their products. Thanks Jeff, I owe you sushi at least.

ASP.NET 2.0 Drop Down Menu Control - White Background Fix

Kevin Goldman — Fri, 24 Mar 2006 20:21:11 +0000

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.

Here's an example of the problem.

It turns out the white background behind the drop down menu is created by an iframe that is dynamically generated with javascript (around line 905 of the WebResource.axd for this control). OK, so you may ask, why don't we simply change the background color of the body tag in the iframe or make it transparent? I'm no javascript whiz but I thought we could change the WebResource.axd around line 905 from "childFrame.allowTransparency = "true";" to childFrame.style.background= "transparent !important"; but this did not work.

So what's the quick "designer" fix? Use an IE-specific CSS "chroma" filter to drop this white background out. NOTE: Only IE 6 will use CSS rules whose selectors start with an underscore "_".

view code as plain text

CSS:

iframe {
_filter:progid:DXImageTransform.Microsoft.Chroma(Color='#FFFFFF');
}

This chroma filter drops out the white background only in IE. Firefox and other browsers are OK since they don't render the white to begin with. The anti aliasing is not world class, but it is a lot better than the buggy looking white!

Designing the Express Yourself Contest

Kevin Goldman — Wed, 15 Mar 2006 22:31:48 +0000

Fun projects are so ... fun. The Made In Express Contest was one of them. The finalists are already chosen, but you can track their progress along with judges Chris Pirillo, Phillip Torrone and Robert Scoble. I'm interested to see how the Community based video remix app (PixelParty) turns out.

Where The Heck are the Design Tips?

Kevin Goldman — Sun, 15 Jan 2006 20:35:44 +0000

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 : ).