CSS list spacing bug in Internet Explorer 6/7 (thank you, Italy)

As usual, Microsoft can just go to hell for cursing us with Internet Explorer, the browser that costs us billions.

On a new site I'm developing, I had a problem with IE 6 & 7 messing up my list that displayed fine in standards-compliant browsers like Safari and Firefox. Here's the bug, and here's the fix (links to my Sparklejet site).

Here's the ugliness that only Explorer gives us:

Thank you, Italy. The best solutions I’ve found for dealing with CSS problems have come from Italians: Bruno Fassino’s CSS tests and experiments and Alessandro Fulciniti’s Layout Gala.

GrayBrechin.net - geographer and author Gray Brechin’s new official site

I am working on a new site for Gray Brechin, an author and geographer of the San Francisco Bay Area. Gray is well known as a public speaker and frequent contributor to op-ed pages, letters to the editor, and various publications. He's also written several books about the historical geography of San Francisco, the most famous of which is Imperial San Francisco: Urban Power, Earthly Ruin. I got to know him when he taught a class I took at U.C. Berkeley in the mid-1990s.

His new official site is www.graybrechin.net. (Note: graybrechin.com is not his site! Only graybrechin.net is authorized.)

Here's how his home page looks (a work in progress):

Technorati Tags: GrayBrechin, GrayBrechin.com, GrayBrechin.net

New work from Sparklejet web design

I recently launched a few new website projects from the Sparklejet design studio:

For the Bayshore Sanitary District, a government agency in San Mateo County, I did the complete site development, including photography. The site features a pure CSS layout and a print style sheet that hides photos and other unnecessary page elements. Compared to many other government agency websites, this one may actually be a pleasure to use.

This large project for California Health Advocates, a Medicare-related non-profit, combined 2 existing  sites with over 550 pages of content into a new 300+ page site. The content-intensive website has a range of design features which facilitate the understanding of the somewhat complex content: Google Custom Search, a text size adjuster, carefully planned typography, a beautifully minimal pure CSS layout originating from Layout Gala, CSS print styles for paper-saving print-outs, a “skip navigation” link for screen readers, and my usual gawjus HTML markup! Pages load quickly and reliably across the spectrum of browsers and devices; the use of plain old semantic HTML optimizes usability.

My work on Just Art Pottery involved a somewhat quick-and-dirty redesign of an old site. While a full redesign was in order, it wasn’t possible given the budget, as well as constraints of an existing e-commerce system. Still, I was able to make big improvements in page speed by converting much of the site from deeply nested tables to modern CSS. I also improved the site navigation — removing duplicate links, reorganizing link location based on usage statistics, and improving legibility of links and content.

It’s going to be a busy year here at Sparklejet — keep an eye on my Web Design Projects page to see other new sites as they launch.

What happened to WebIntellects!? Web sites are down for over an hour (so far)

For years I've been hosting various websites through WebIntellects.com. Service has been mostly good, with occasional minor hiccups. Today, Dec. 17, 2007, though, things are really bad. All my hosted sites are offline, and have been since around 12:30pm (California time). I can't send or receive e-mail, I can't access the online tech support, and they're not answering their toll-free number, (800) 994-6364.

So, if you're in the market for web hosting, I can now say with conviction: don't choose WebIntellects.

UPDATE, July 8, 2008: After WebIntellects' outages of December 2007, I moved my hosting to MediaTemple. So far, I have been more satisfied with them that I was with WebIntellects. I especially like MediaTemple for:

+ 24/7 phone tech support
+ better help documents
+ better admin software (Plesk 8, as opposed to Ensim 4 on WI) {UPDATED: WebIntellects new accounts have Plesk}

If you sign up for MediaTemple's hosting service, please tell them that you were referred by Matt Jalbert / Sparklejet Web Design. Thanks!

UPDATE July 30, 2008: Closing comments on this one, partly because of a bug in the comment system which I don't have time to track down.

Running Internet Explorer 6 and 7 at the same time

Thanks to Todd Dominey, who publishes What Do I Know, I've been able to get two different versions of Microsoft's browser, Internet Explorer 6 and 7, running on my Virtual PC. (Virtual PC is a Microsoft software application which gives me a 100% real Windows XP machine running virtually on my G5 PowerMac.)

Normally, when you install Explorer 7, it wipes out your previous version 6. But if you're a web developer like me, you need to keep version 6 around for testing, since that's currently the most used browser out there.

In a nutshell, what I did was run Microsoft's update to bring IE to version 7, then I got this standalone installer for old versions of IE, and used that to install Explorer 6. I'm not interested in older versions of Explorer because they constitute a miniscule portion of the market, so I didn't install them, but it's possible to install versions back to 4.

If you use Virtual PC on a Mac, you should also see my related blog posts: How to shrink your Virtual PC disk size on Mac OS X.

# # #

And now, a bit of personal history: in 1996 I was on a team in San Francisco working on a new Web site called NetGuide Live. We were in crunch mode, working long hours up to the launch date, in order to implement the newest thing out there called “Cascading Style Sheets.” We were doing this because Microsoft was about to launch its new Netscape-killing browser, Internet Explorer 3, and NetGuide was one one of 10 sites working with Microsoft to feature the use of CSS. That experience was so painful that it took me years to warm up to CSS, even though my exposure to it was about as early as you could have had.

By the way, all good people should stop using Explorer as their browser ASAP and switch to the Firefox browser — that will truly make the world a better place. Once you've done that, I encourage you to join the anti-war movement, an even better way to make the world a better place.

Technorati Tags: browsers, explorer, Firefox, IE7, InternetExplorer, Macintosh, MacOSX, Microsoft, VirtualPC

Major paradigm shift in web design! The Right-side Navigation Underground

It dawned on me today, months after finishing what I consider to be be my best site design to date, that the way sites distribute navigation on a page is often poorly considered, resulting in diminished usability. I'd suggest that the best way to place navigation on a large portion of Web sites is to bunch the navigation links in the upper right hand corner. I'm calling this paradigm shift (in my mind, anyway) “The Right-side Navigation Underground,” and I encourage you to join my little cabal of truly forward-thinking site designers.

Here is a screen shot of the site I designed, WhitMcLeod.com, where I've used this technique:

What this layout does is provide comfort to users, who will at first experience the joy of having their navigation links always in the same place — close at hand to their scroll bar which they're going to use once in a while.

The right side of page is a good place for something that users don't really need to focus on, since we usually read from left to right. This layout makes it easy for the user to focus on the content, which, from a user-comprehension perspective, is best if it starts in the upper-left of the page.  All the while, users will be able to click through the site easily, knowing that the main site navigation is clearly called out in an unobtrusive space. Their mouse rarely needs to move into the content area of the page, thus it rarely crosses into the content, which would put the cursor in the way of text content.

In the case of my Whit McLeod design, there are two portions to the navigation system: the main site navigation, consisting of 2 columns of 5 links each, and the sub-navigation, consisting of a list of 8 links. On the main navigation, I've chosen to render the links as text images, although this would make the site less usable for sight-impared visitors. An even better solution would be to do the main site nav as HTML text styled by CSS, the same way the sub-navigation is rendered.

This, of course, brings up another design deficiency — not being able to use an extra-saucy Photoshop-created text image for the nav, which in many cases could provide more options for a designer to make visual improvements, such as a professionally selected typeface or other sophisticated graphic effects. But users are quite used to viewing browser-rendered type in navigation, so not a big deal. Sure, it looks good if you can use cool GIF images for navigation, but really, most people don't give a damn if you've done that.

With plain HTML+CSS navigation text links, the usual caveat applies: it looks great in Mac OS X browsers, which have Photoshop-quality anti-aliasing of browser text; but it looks like crap on Windows simply because of Windows' inferior bit-mapped text rendering in browsers. (Although Microsoft's new Internet Explorer 7 browser has improved in this regard, by implementing anti-aliased text rendering, thus smoothing the jagged look which fonts have had on Windows browsers.)

Bottom line: whether you do your main navigation as HTML or images, it's best to put that nav in the upper-right of the page — it's a good place for users, who will find that position “natural” (despite years using the crap navigation on Amazon.com). This  layout goes beyond   merely looking good, to being something that is probably actually a usability improvement.

I'm looking forward to testing this myself or hearing from any folks about their own experience with using the sample site's navigation. If you're a web designer or usability tester, I'd love to hear your own experiences with this layout — does it provide the usability improvements I think it does?

Technorati Tags: design, Firefox, IE7, InternetExplorer, Mac, Macintosh, MacOSX, OSX, Right-side, RightSideNavigationUnderground, usability, userinterface, webdesign

Does your Web developer wear Diesel and a really, really big watch?

{ “Your web developer should have an outside pursuit, like a rock band, which they consider their 'real thing.'” }

From the very funny zefrank.

Technorati Tags: ZeFrank

Ikea's Dirigent shelving // the aluminum workspace

UPDATE 2007: See more info about this desk at my other post » "Ikea's Vika Inge legs by Olle Lundberg: aluminum is the metal of modernism?"

At one point in the evolution of my work space, I put my Apple 23“ Cinema Display onto a shelf in Ikea's wall-mounted Dirigent shelving, while I nestled my Ikea frosted-glass table beneath. My Powerbook sat on a ”Powertray“ which  I designed and built.  My speakers (KRK V6's, self-powered studio monitors) sat on another Ikea piece — an oak veneered cube with a frosted glass door, set on thin steel legs. It made for a handsome and efficient work setup, but I was locked into the one location because of the relative permanence of fixing the Dirigent shelving to the wall. This was the height of my Aluminum Period.

My PowerTray (patent pending):

After a few months of living with this setup, I began my apartment remodel/restoration/pimp-job. I put so much work into smoothing out the walls that, after I painted, I didn't want to make holes to mount the shelving. I stopped using the Dirigent shelves and rested the display right on the table top (now attached to a G5 PowerMac).

Here's my workspace after finishing the remodel:

While the orange wall as my office backdrop was a huge improvement over the nasty off-white this apartment was originally painted, I didn't achieve a significant space-mind breakthrough until only a few weeks ago when, for the first time, I placed my workspace directly in front of my living room window. After more than six  years of working from home (you have not known cabin fever until…), I finally got wise enough to shift my perspective 90 degrees.

Now I have the great urban outdoors as my backdrop.


Which is especially cool because I get to watch the vast psychedelic lightshows in the sky that unfold most days in San Francisco:

See more info about this desk at my other post » "Ikea's Vika Inge legs by Olle Lundberg: aluminum is the metal of modernism?"

Technorati Tags: dirigent, HomeOffice, ikea, macintosh, moon, moonrise, PowerBook, Powertray, SanFrancisco, setups

Arts & Crafts home design services by The Craftsman Home

My client The Craftsman Home offers home design services that'll whip your place into shape all Mission/Craftsman/Arts & Crafts style. I just added a section to their Web site showcasing their work. Here's the page promo graphic:

I'm showing the photos in a very simple way: by grouping small sets of photos on each page. For example, on one Living Room page, the set shows all the images from one home. You scroll down the page to view all, and at the bottom, you click “Next” to see the next set of photos of a new home.

This presentation isn't fancy, but I think users will appreciate it; it's really fast to click through the sets of photos — each click shows a page with 2-7 photos. And it groups together the related photos, something you wouldn't get from a presentation that shows one image at a time.

Re-design CraigsList, save the world!

Craigslist could really use a lot of design and functionality help. Years ago after meeting my (supposed) dream gal on CraigsList, I was inspired to do a minor redesign, which included some implied functional changes to filter search results. I sent it on to Craig, who politely replied that they weren't planning any changes.

The sad thing is that since CraigsList is so widely used, its relatively poor user interface has a huge negative impact on our collective productivity. If some great User Interface designers and programmers could impart their wisdom on the CraigsList application, our world could be a whole lot better. Too bad CL is so stuck in their old ways.

Technorati Tags: craigslist, userinterface, webdesign