Tag: Web Design - Page 6 - UNDERDOG of PERFECTION

New Coltrane site launched

I’m pleased to announce the launch of a brand new version of my John Coltrane website.

This is the first step in an ongoing process of splitting my currently mammoth website into distinct, separate websites tailored to specific content areas. Basically, each of the top-level navigation items you see at the top of this page will eventually become its own site.

For now there’s not a lot of new content on the Coltrane site — the big “draw” is the redesign itself. But I’ve added a blog to the site, and eventually I’ll also be adding a multimedia section where I’ll be featuring audio and video clips. Check it out!

This site design was also an opportunity for me to test the effectiveness of my new Room 34 Baseline WordPress theme. Believe it or not, that barebones theme really is the foundation upon which the new Coltrane site is built. So it works!

This site also takes advantage of some cutting-edge web design features: it’s built with HTML 5 and the Blueprint CSS framework, and it uses the emerging @font-face CSS method to render text in a custom font. I am using the free Museo font family throughout the site.

Internet Explorer and transparent CSS layers

Here’s the scenario: I’m working on an image gallery for a client site, sort of a slideshow concept. The client wants the user to be able to click on the left half of the current image (“slide”) to move to the previous image, and on the right half of the current image to move to the next.

OK, no problem.

In the days of yore, I might have handled this with an imagemap. But my solution now, drenched in jQuery goodness, involves a pair of empty <div> tags, with set dimensions, absolute positioning and z-index in the CSS. These transparent <div>s are overlaid on the image, and the jQuery code triggers a refresh of the HTML code in the slideshow <div> itself, underneath, that contains the <img> tag for the current “slide.”

If you’re not a web developer that last paragraph is probably little more than a steaming pile of (to follow John Hodgman‘s lead) “bullroar,” but the point is that this allowed me to stick to semantic HTML (more or less — there is a chunk of JavaScript code directly in the page, but I may optimize that out of there soon), and keep most of the presentation in the CSS and the functionality in a separate JavaScript file, the way it should be.

Only it doesn’t work in Internet Explorer.

“It doesn’t work in Internet Explorer” is nothing new to me, and in fact I wasn’t totally surprised by that. My first hunch was that IE didn’t like the empty <div>s, even though they have dimensions specified in the CSS, so I gritted my teeth and stuck   inside each one. Didn’t help.

Next I decided to make sure my dimensions were being interpreted properly, since it seemed clear that they weren’t: when I say it didn’t work in Internet Explorer, that’s only a half-truth. It didn’t work properly in Internet Explorer, but there were clickable areas on the slide — they were just really small and not in the right places.

So I set the background of the “previous” area to red and the background of the “next” area to blue. Reloaded in IE. Yep, the dimensions looked perfect — my photo was now covered precisely by equal-sized red and blue rectangles. And, curiously, the links worked properly now. I thought maybe it was just because I had added some CSS code for these <div>s in my IE-specific stylesheet (yeah, I do that… get over it). So I changed them both to transparent within the IE-specific stylesheet, and the problem reappeared.

And then, it hit me. No… could it be?

Yes, it could: IE was just ignoring the presence of those z-indexed <div>s simply because their backgrounds were transparent. This is probably a “known issue” with IE, but I had never had to deal with it before, and regardless, it sure as hell didn’t make any sense.

My solution? I went for a play straight out of the book of web design circa 1997: a one-pixel transparent GIF. Except I used a PNG, but same thing. I made a completely transparent image, and in the IE CSS file, I used that as the background for these <div>s.

Problem solved. But as is so often the case with IE issues, the solution is so bitterly unsatisfying, so fundamentally wrong, that there is no joy in its discovery. Just the impetus to blog about it.

Wheeler Kearns website launches

I usually avoid mixing business and Blather, but I want to make an exception in this case. As of today, the new website for Wheeler Kearns Architects has gone live. Wheeler Kearns is an award-winning Chicago-based architecture firm. I love their clean, geometric designs and the open, welcoming spaces they create. I could spend hours looking through the vast archive of photos, sketches, models and renderings of their projects featured on the site.

But I have a special interest in this website as well, because I developed it. The project consisted of a custom, CakePHP-based CMS with a WYSIWYG editor (TinyMCE), extensive tagging and image management tools, and a polished user interface with lots of cool interactivity — fading slideshows, custom scrollbars, sliding navigation menus, etc. — courtesy of jQuery.

Yet another new home page redesign

I’ve reorganized the room34.com home page yet again. If you’re looking at this page and the layout looks totally hosed, you either: a) need to clear your cache, or b) are using Internet Explorer 6.

I still need to test the site in Windows, so maybe there are some other “legitimate” errors on my part, and ultimately I do try to make the site look right in IE6 these days, but… well… that’s all. I’ll be testing the site in Windows within the next day or two and adjusting as needed.

Enjoy!

The iPhone version of Amazon.com is better than the regular version of Amazon.com

Amazon.com (as if you don’t have it bookmarked) is (probably, still) the undisputed king of the mountain of e-commerce. Even though many of Amazon’s former brick-and-mortar partners, like Target, have since gone off and launched their own (usually better) individual e-commerce sites, Amazon is still at the heart of it all and is the go-to choice for buying… well… just about anything online. These days, as I’ve noted before, I use it mostly to buy MP3 downloads, which despite my usual criticism of Amazon in general (wait for it!), offers a great selection, better prices, and higher quality than iTunes… and no DRM.

But that’s not my point today. My point today is to address that one usual criticism I have of Amazon: their design sucks. And I am talking about both the surface-level graphic design and layout of their pages, and also much of their application flow as well. There are two main ways in which I think their design fails: there’s too much of everything, everywhere, all the time on their site, and (consequently, perhaps) many options that I think should be prominent and visible are instead hidden in microscopic type at the bottom of the page.

Case in point, from the Amazon MP3 realm: as a web developer, I’m constantly tinkering with web pages in ways ordinary users do not, and as a result I am frequently clearing my cache and my cookies. Now I could be careful and just delete the cookies from the sites I’m working on, but I’m usually in the middle of something and therefore in too much of a hurry, so I just delete them all. (And, yes, waste a lot more time in the long run retyping all of my usernames and passwords for the sites I visit… but at least that helps me remember my passwords!) As a result, I lose the cookie that tells Amazon that yes, dammit, I did already download and install your MP3 Downloader app so I don’t need to download it again! The first couple of times this happened, I was dumbfounded, and frustrated, and I re-downloaded and reinstalled the application, even though I knew I already had it. Finally I scrolled down and discovered a sentence in 8-point type telling me that if I already have the downloader app, I should “click here” to activate it in this browser.

Yeah, thanks.

Which brings me finally to my point. Today I finally took the plunge (what with it being Black Friday and all), and bought myself an XBOX 360. Later in the day I was sitting inside a Caribou Coffee (which itself was inside a Lunds grocery store), enjoying a Cinnamon Wild (though not as much as I would have enjoyed a Gingerbread Latte), and I decided to check the IGN Reviews app on my iPhone to see what good games were coming out for the 360, the better to fill up my Amazon wish list (one of the primary reasons Amazon is still so central to the e-commerce universe).

Once I had picked a couple of games I felt that, yes, I wish for, I decided to go right to Amazon on my iPhone and add them to my wish list.

Many websites have decided to leverage the popularity of the iPhone and also to adapt themselves to its cramped 480×320 screen real estate, by developing iPhone-aware versions of their sites. They detect the browser is an iPhone, and so direct the user to a streamlined, stripped-down version of their site that will be more manageable on the iPhone’s screen.

And you know what? A lot of times, but perhaps none more so than is the case with Amazon, this streamlined, stripped-down version is in fact better than the usual bloated, overstuffed standard version of the site. If they want you to actually be able to go about your business with their sites on the iPhone, they have to stay focused and not waste a single pixel with distractions and clutter.

Sometimes the sites have predictable, distinct URLs for their iPhone versions. It’s common these days to preface the URL for a mobile (read: regular cell phone) version of a site with “m.” and occasionally then the iPhone version with “iphone.” But sadly Amazon’s URLs are as cluttered and inscrutable as many of their pages are, so an iPhone-specific Amazon URL was not immediately apparent to me, and beyond that it seems that their site is handling the iPhone version as a more integrated feature rather than a separate standalone version of their site.

Too bad, really, because if I could I think I would use the iPhone version of Amazon.com all the time.

(For what it’s worth, I am aware that Amazon’s iPhone version has existed for over a year; it’s just that I had never bothered to use it before today, and besides, most of the attention it received upon its debut focused negatively on the fact that it was un-iPhone-like, without also recognizing, positively, that it was un-Amazon-like.)