While all of these methods are effective, tried and true, I can’t help but feel like it’s about time for something new. We’re writing all the same code and getting all the same results. Why are we still writing work-arounds for anything at this point? Oh, and let’s face it: websites have been looking the same for a LONG time now.

Web design needs a makeover!

Seriously. In recent months, I’ve been sneaking elements of CSS3 into my designs and letting them fall where they may in terms of browsers that support them. The most fun I’ve had lately is reading the Webkit and Mozilla developer blogs and keeping up with features that they’re adding support for. Some (read: most) of them don’t pass validation and others don’t work in IE6, but I make sure they’re all things that those users won’t even know they’re missing. (IE6, of course, is not a priority of mine and I only support it when absolutely required by a client. News at 11.)

I got excited, though, last November, when I started seeing some light at the end of the tunnel. Talk of HTML 5 and CSS3 began picking up steam. There are some interesting and potentially amazing recommendations in the parts that I’ve seen, which could provide the fresh take on design and development that we all need at this point. But there’s a huge problem with getting excited about emerging technology: You never know when you’ll be able to use it.

The Roadblock

Regarding HTML 5, that all changed with the release of TechRepublic’s article featuring an interview with Ian Hickson, editor of the HTML 5 spec. In the write-up Hickson lets us know when we’ll be able to use HTML 5. He drops a time line that is shaking up the industry. If you’ll notice, he mentions that HTML 5 will reach ‘Proposed Recommendation’ phase in the year 2022.

Are you kidding me?

I’m trying to figure out why he even thought that was worth mentioning. Giving a projection that far out in an industry that moves as fast as the Web does is kind of like saying “When pigs fly”! Who does he think is going to get excited about this?

I think he’s failing to realize that the days of old have passed. Back in 1997, it was OK to take 10 years perfecting a Recommendation, because nobody was listening. Back then, there was a very small percentage of the population who were familiar HTML, CSS or The Internet, for that matter. That’s not the case anymore. We’re all sitting on the edges of our seats waiting to see what’s going to happen next. So, it’s no surprise that we’re more than a little displeased to be handed a 14-year cliffhanger. That’s a season finale I’m not willing to wait for.

Numerous Web professionals have expressed their thoughts on this announcement, but Jeff Croft’s rant on the subject has been one of the most entertaining so far. Check out his posting when you get a chance.

With all this going on, and knowing that the next big thing in development is nowhere in sight, I feel more justified in my lax approach to validation and sticking to Web Standards. I’m not giving up completely, but I am taking more liberties these days and making sure that my code is as clean as it can be and my design is fresh to def.

I’ll let my kids learn HTML 5.

Yes, I have access to T-Mobile hotspots. Yes, there is a Starbuck’s on every corner. But sometimes I need access from random places. The moments when I find myself in a situation where Internet is not readily available are rare. But when I need to get online, and I’m on a meeting with a small business in the middle of nowhere, $60 per month is chump change considering that could mean the difference between my landing the account or heading back home passing the time with Facebook Word Challenge.

Although I’m not fond of their cellular plans, I decided to go with Sprint, since I’m confident that they’ll have the broadest coverage in the areas where I’ll likely be.

I chose the Sierra Wireless Compass 597 USB aircard. I didn’t want to worry about whether or not the computer I’m using has a wireless card slot. (Especially, since Apple still hasn’t decided to put one on the regular MacBooks.)

Installing the software for these devices is seemingly straight-forward. But, contrary to what the instruction booklet tells you, their software does NOT immediately work with OS X. This is something I discovered after trying it, and later calling tech support.

How To Get a Sierra Wireless 597 Running on OS X

When you insert the broadband card into the USB port on your mac, the TRU-install CD image will automatically appear on your desktop. It will also pop-up the folder on the image that contains the installer for Sprint’s connection manager, SmartView.

Double-click the file called ‘Install Sprint SmartView.mpkg‘ and proceed with the normal Mac installation process. This will require a restart.

After you’ve restarted your Mac, you’ll notice that there is a new shortcut on your desktop for the Sprint SmartView software that controls the Sierra 597 USB device.

Launch the Smartview software.

The program displays the status of your wireless card. In this example, it’s ‘Ready: Sprint Mobile Boradband’. If this is a brand new wireless aircard, you’ll need to activate it. You can activate using the steps outlined on Sprint’s support website, or you can let the SmartView software do it for you. Some have reported failures during the automatic activation process, but it was seamless for me.

Go to the Tools menu and select Activate Device.

Once you’ve installed and activated, the software (and support representatives) will have you thinking that all you have to do now is hit ‘Connect’. Lies. While this step is necessary, it’s only 50% of what you need to do.

When you hit connect, it will probably prompt you for your Mac’s admin password and then just sit there. Lame.

The Fix

What you need to do is configure this new network device in your OS X system preferences.

Launch System Preferences and navigate to Network.

Your system will alert you that a new network has been found. Hit Apply.

Now, highlight your Sierra Wireless connection in the sidebar. You’ll need to enter a telephone number, account name and password to make this work. The phone number and password are not specific to your account. You’ll need to fill in the properties of this panel with the following:

1. Telephone Number: #777
2. Account Name: The Sprint email address associated with your account
3. Password: 123

Click the Advanced button near the bottom and, under the Modem tab, choose Sprint as your vendor.

The only model available is PCS Vision. So select that and OK it.

Check the box to ‘Show modem status in menu bar’ if you choose.

Hit Apply.

Now you can connect using the icon in your menu bar every time you need to use your wireless card.

Let’s start with a test navigation. We’ll jump right to the part where we’ve completed the navigation’s XHTML and CSS. Copy the following code into your own document if you want to follow along.

CSS

body {
	font: normal .9em Helvetica, Verdana, Arial, sans-serif;
	background: #FFF;
	color: #FFF;
}
#sideNav {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 200px;
	border: solid 1px #000;
}
#sideNav li {
	margin: 0;
	margin-bottom: 1px;
	background: #CCC;
}
#sideNav li a {
	text-decoration: none;
	color: #FFF;
	padding: 5px 3px;
	background: #000;
	display: block;
}

HTML

<ul id="sideNav">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Contact</a></li>
</ul>

This code is designed in the way that most nav lists would look. Also, most designers would want their links to change on rollover. Since IE6 does not recognize :hover pseudo classes when applied to any element that’s not the a tag, we have cannot simply apply the hover to the li tag. Therefore, in order to achieve the rollover, we went ahead and applied display:block to the link so that the rollover color will fill the entire button area.

This is where the problem comes in. If we apply a background color (yellow) to the li element, we can see that the gap that appears below the link element has something to do with either the outside of the a or the inside of the li.

Above: Test menu in IE6 after display:block applied to links. Notice the yellow from list items area showing between block-level links.

Space Removal Method 1: Define Border-Bottom

I came up with this solution a few years back and found this to be the simplest fix for the problem: add a border to the bottom of the li element. If your navigation has divisions between the links, then this is a perfect fit. You see how we have a margin-bottom:1px; applied to the list item? We can simply write in border-bottom:solid 1px #FFF; and eliminate the margin-bottom property. So, we still get the one-pixel white separation, and our gaps disappear in IE6. Success!

Space Removal Method 2: Define Link Width

One of my theories about where the gap comes from is that I imagined there to be an unseen hard return at the end of the link. In my vision, this hard return gets dropped down below the link when display block pushes the link all the way edge to edge. With that in mind, I decided to see what would happen if I reduced the width by one pixel or even made it match the width of the containing element.

So, I added width: 200px; to the a to exactly match the width we defined for our nav as a whole. (You could also use width: 100%; but sometimes that doesn’t work.) If my theory of why this happens is close, then this would keep the line return from dropping down below the link. BAM! It worked! The caveat here is that if you have any left/right padding applied to the link element, compliant browsers will add that to the total width. So, if you go with this method, you’ll have to adjust for that accordingly. (My preferred method is to send different widths to each browser using conditional comments for IE.)

Notice how, since we have 3 pixels of padding applied to both sides, defining the links’ width as ‘200px’ results in a 206-pixel width in compliant browsers.

Space Removal Method 3: IE Whitespace Fix Using Floats

After a long time of using the methods described above, I came across some prett useful information: this phenomenon has a name. It has been dubbed the “IE Whitespace Bug”. If I had known that, I could have just looked it up online and moved along. (It’s OK. I ain’t mad.) Anyway, when I did a search for solutions on this bug, I found tons of hacky “solutions”. Some involved commenting out the space after the li, others had a couple of Tantek-styled backslashes. {shudders}

I found this one at Jon Hicks‘ website, which involves floating and clearing the list item surrounding the link. In an IE6-specific conditional stylesheet, I make sure to include the following in my rule for the navigation li:

#sideNav li {
	float: left; 	/* IE WHTESPACE BUG */
	clear: left;	/* IE WHTESPACE BUG */
	width: 200px; 	/* IE WHTESPACE BUG */
}

Note: it’s always good practice to add notes to remind you why you added something. This way, if you choose to go a different route to solve this bug, you know which declarations to remove.

A few things to understand about this method: The width must be defined on the list item once it’s floated. If it’s not, it will collapse down onto the text that it contains. Also, the containing element must be floated as well, since only floated elements can wrap to contain other floated items. Since this is probably a sidebar navigation, it will likely be floated already, so this shouldn’t be a problem.

I know that there are lots of solutions presented to fix gaps in IE6. These are the ones that I choose since they don’t require much to remember and don’t use hacks.

As a designer, I know what it’s like to have an awesome design hit me at 2:00 a.m. and think "I’ll do that in the morning", only to have it disappear in the land between sleep and awake. I also know what it’s like to have an amazing idea that you plan to "get around to later", only to see it show up on television, or in someone else’s portfolio. C’mon, You know you thought of it long before that guy! But, really, who’s gonna believe you?

What happens a lot of times also, is that you may not necessarily be the first to do something, but at the time when you thought to do it there were only a few examples of that technique. Sadly, when you finally get around to it, the style, technique or typeface that you wanted to experiment with has become a huge trend online and most likely lost its appeal. By that point, you simply write it off and move on to something else.

The problem with ideas???especially the good ones???is that they’re like treasure during the Gold Rush. If you know there’s gold to be found in the hills and you don’t go out and get it, then someone else is sure to find it. And once one person finds that gold, everyone else heads that direction and stays there until there’s nothing else of value. Unique ideas are no different. Your idea could be the beginning of a point of change in design.

Not that it was going to be revolutionary or anything, but my latest experience with orphaned ideas is the concept of using watercolor as a primary element in the design of this site. A while back, in an effort to go offline for inspiration in online design, I trotted on down to the nearest Hobby Lobby and grabbed two tubes of watercolor paints in two different shades of blue. Unfortunately, I sat on this one for a very long time and that idea that I neglected for so long was implemented by others who put turned it into something real once they decided it was something they wanted to do. Examples are Antonio Orozco???s new site, launched at the beginning of 2007, Happy Cog and Web Designer Wall, all of whom use watercolors as design elements. Needless to say, I had to take my design in a different direction. But, one thing I had to realize was that missing the boat on this one was all my fault. Foiled, yet again!

So, the question arises: How does a designer avoid being only a back-room innovator??? an idea alienator??? a teacher-but-not-doer… all bark and no bite? Here are a few pointers that I think might help.

1. Solidify Your Initial Thoughts

   If you don’t have a sketchbook, then you’ll probably want to get one. It???s always good to convert abstract concepts into something more tangible. Jot down a brief, written explanation of what you???re thinking or try to rough it out. Even if your idea or the execution of it isn???t exactly clear in your head, scribble down what you have. It might be a bit cloudy, but a very rough sketch is better than a half-memory.

2. Discuss Your Idea With Like-Minded People

   Don???t be afraid to start talking about your new idea. Once you start telling people about what you???re brainstorming, all sorts of good things can happen.

   If you???re one who???s afraid someone will take your new idea and use it, talk about it anyway. The fear of having it swiped from you could be the kick in the butt that you need to get moving! (Although, I would hope that your design peers are cooler than that.)

   Another good thing that could come out of peer discussion is that you get feedback on your concept. This feedback, along with peer suggestions can help you refine your idea and avert certain tough situations down the road.

   A conversation like this also gives you the opportunity to hear yourself talk about it. This has a subconscious impact. It makes a concept feel more real, thus making you more likely to follow through.

3. Discuss Your Idea with Non-Designers

   This could be synonymous with ???people who applaud you no matter what???. Take Mom, for instance. I don???t recall ever telling my Mom about something I plan to do, only to have her respond with: ???Well, how will that approach impact the overall usability???? And, while siblings are usually not afraid to say things like: ???Aaron, that???s the dumbest thing I???ve ever heard?????? the chances of getting negative feedback from them and other non-designers are slim.

   They???re not going to be critiquing the concept; they???re just hearing you out. And what they say usually serves as the positive feedback that you need in order to get over any inhibitions that you may have. Call it moral support.

4. Google It

   It???s always good to jump online and see what???s going on around you when you???re about to do something new. If you???re inventing something that has yet to be used, you want to make sure it truly is a unique idea before touting it as such.

   Also, you can get an awful lot of design inspiration from other designers??? work. Even when you???re striving to be unique in some aspect of design, there is nothing wrong with allowing another designer or artist???s work influence you.

   In my opinion, we are all influenced by each other???s work in some way or another. Sometimes these influences are subconscious, other times intentional. But either way, it???s usually constructive and rarely detrimental.

5. Get Started

   You can???t finish something that you never start. If you do everything previously mentioned a million times over, but never do anything about it, you run the risk of becoming a serial planner whose ideas motivate others, but has no work to show for himself. While you may not realize it, your peer conversations have a sort of symbiotic effect: you benefit and so do your peers.

   So, chances are, that as a result of what they know you???re working on, they???ve gone home and started working on ideas that started churning in their heads during the brainstorming session. While it???s awesome that you were able to motive other people, you don???t want to be the only one who???s consistently trying to ???get around to??? creating your truly original idea.

The point of all this is: when you have a great idea, don’t sit on it. It does you no good to have the creative juices flowing if you don’t create anything that serves as a representation of that creativity. So, whatever you do, stay motivated, stay fresh and keep producing.

I first heard Santogold (Santi White) on Mark Ronson’s July 2007 album ‘Version’, on the track called ‘Pretty Green’. I must admit, though, it didn’t stand out too much to me at the time. After a little while, that song grew on me, and now I have it in iTunes rotation.

A few months later, though, when I heard ‘Creator’ from Santogold’s upcoming album, I was like “Maaan!”

I’m not going to regurgitate her career bio here, as you can easily find it in a Google search. I will say, though, if you like M.I.A. (I only dug her first album) and Bjork, then Santogold is a definite must-have in your playlist.

Trasn Menagerie has an in-depth write up on Santogold along with the script from an interview with Santi.

Music Samples

Santogold - Creator

Santogold - You Will Find A Way (Remix)

Earlier this year I saved up and grabbed a Canon 20D. It was something I had waited a long while to get my hands on so that I could finally replace my Rebel film camera. Finally, after I wrapped a few freelance web projects, I got it!

Then, I put it on a shelf in my closet next to my film camera.It’s sad, I know. But the Web is a busy place, and I have been working on all this CSS, Ruby and Ajax stuff. However, in my link hopping a few months ago, I came across a tutorial of HDR photography. It seemed interesting, but quickly got too complicated for me to take a real interest since I was only casually browsing links on the ‘Net. Well, this evening I came across a few more links featuring HDR or High Dynamic Range techniques and tools that are used to achieve the effect.

What made me stop long enough to really read what was going on was the striking images that I was seeing produced with tools that are common to most graphic and web designers already. After a few minutes reading the previously-linked HDR tutorial at Vanilla Days, I grabbed my 20D and went to take some bracketed photos at 9:30 PM on a Sunday night! I took several sets, but here is the image I used to get started with HDR, (which is probably going to my new reason to keep an SLR on my hip 24/7).

Original Image, 2-second exposure, before any RAW white balance adjustments:

Basically, the technique involves bracketing your images with a difference of -2 or +2 stops. Your settings can be different and you don’t have to limit your composites to just three photos. Another option is to shoot a single RAW image and create your under- and over-exposed images that image. RAW offers you much greater image data than you’ll ever see in standard formats like JPEG and TIFF. (Don’t get the benefits of RAW mixed up with benefits of HDR. You could shoot regular images and then move on to HDR techniques, but all that does is limit your control in post-processing and kills some of your possibilities.)

HDR Experiment 1 - November 4, 2007

These images were taken using a 2 second shutter speed with a tripod and timer in RAW. Since I shot these in RAW, I was able to manipulate the white balance that I wanted applied to the images. I tested several and settled on ‘Tungsten’, since this pulls the orange out of images.

The three original photos: Tungsten-balanced, original -2 +2, respectively:

I used Photomatix to create my composite because I was less than pleased with Photoshop’s ‘Merge to HDR’ results (Found under File > Automate). Since I am only using the Trial of Photomatix, I saved the Radiance RGBE (.hdr) file that can be opened in most of the latest graphics programs. I did all of my color adjustments in Photoshop, since the ‘tone mapping’ option watermarks the images in the trial of Photomatix. No big deal there. Here is the result of my first experiment with High Dynamic Range photos:

Converted to 8bit with exposure of +13.13, gamma 1.00. I also pushed the saturation up to about +24.

As proof that there is definite value in this technique, I decided to try to replicate the results by simply taking the original RAW image and pulling the levels up and attempting to match the HDR version. Even if the color could be matched, it wouldn’t be as crisp. The reason is because the biggest benefit of HDR is being able to display greater detail in the highlights and shadows of the image.

Original image, RAW with Tungsten white balance, levels adjusted

Of course, there will be more. I’ll do follow-ups to this very soon.

As in our previous example of old-school CSS for transparency, we start with our basic background image that includes alpha transparency.

#truck {
	width: 470px;
	height: 294px;
	background: url(images/mater.png) no-repeat left top;

}

And, as expected, it shows up with a crummy blue haze in IE 6. (Which we won’t show here…)

Last time, we isolated which version we wanted to deliver to Internet Explorer by using the parent > child selectors of CSS and a hack that only IE would recognize.

The Clean Solution
This go-round, we will take it up a notch. Start by defining an IE-only stylesheet. Personally, I always have one of these (and another for IE7) at the start of a project. It’s good practice because there will always be little hiccups in IE that you can address easily by serving it a separate CSS file.

So, create a CSS document called stylesIE6.css or something to that effect.

Now, let’s link to that stylesheet using IE’s conditional comments. So, in the head of your document AFTER your existing stylesheet, enter

<link rel="stylesheet" href="styles.css" type="text/css" />

<!--[if lte IE 6]>
<link href="stylesIE6.css" rel="stylesheet" type="text/css"></link>
 < ![endif]-->

*Please note: Wordpress is adding a space before the exclamation point and ‘endif’. There should be no space there in your code.

This code reads: ‘If less than or equal to IE6, then use this stylesheet’. Remember, that all previously defined styles our primary stylesheet will apply to our document. (You can view all of the possible conditional statements at MSDN). In this stylesheet, we simply want to define the things that we want to change. My IE stylesheets usually contain only a few lines of code.

Next, in your stylesIE6.css stylesheet add the transparent graphic on our #truck element using Microsoft’s AlphaImageLoader filter that we used before.

#truck {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/mater.png', sizingMethod='scale');
}

At this point, there are two things that you should notice:
One - We did not have to specify our width and height in the IE-only stylesheet because the #truck element will inherit those settings from the main style sheet.
Two - The #truck element will also inherit the original PNG graphic from our original style sheet. Now, we see two trucks, one of which we don’t want.

Solve this by adding the background property to your IE stylesheet to override the display of the original graphic. Our IE stylesheet wins in specificity because we placed it BELOW our original stylesheet in the source code.

#truck {
	background: transparent;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/mater.png', sizingMethod='scale');
}

Now, we should have the same transparent png graphic in IE as we do in all other browsers without relying on hacks. Using this method to isolate browser-specific CSS gives you the most control and keeps you from having to make changes in the future if a browser update renders your hack useless.

Notes:

Find out more about the attributes of AlphaImageLoader at MSDN
Find out more about IE Conditional Comments at MSDN

Looking forward to that.

In the meantime, I’m busy trying to find all of the usual buttons and features that one would expect to find on any website… But I CAN’T. It seems like they want to force the user to behave the way they want us to. Here are a few of my brief observations regarding how poor the usability is on StumbleUpon’s site:

• If logging out is something users might want to do, they’re forced go to homepage and select “login” to get to the “logout” button. Shouldn’t this be on the ‘Preferences > Personal Information’ page?
• But, If you’re using the toolbar and attempt to log out from the site, forget it! You have to log out using the toolbar.
• Forced to download the Firefox toolbar to be able to change password. I signed up on Safari, so I was lost for a LONG time.
• Toolbar offers to ‘enhance your browsing’ and the alert box disables the ‘close’ button… User is forced to click the tiny ‘No Thanks’ button at the bottom.
• Can’t add friends easily. User is forced to migrate address books from other services as only option to add friends.
• For some unknown reason they use dropdown menus for the birth date. Glad I wasn’t born any earlier, I’d still be scrolling.
• What the heck is this? I have to rollover to find out what these icons mean…
  

That’s all that I’ve noticed so far.

Now, excuse me while I go stumble this posting.

The image below is an example of a Windows alert that I could manipulate by simply tabbing to the checkbox and pressing the spacebar to select/deselect, then tab to the button option I prefer and select with spacebar once again.

To enable this awesomely useful feature in OS X, follow the steps below:

• Go to System Preferences
• Select ‘Keyboard & Mouse’
• Click the ‘Keyboard Shortcuts’ tab
• Choose ‘All Controls‘ under ‘Full keyboard access’ at the bottom

Voila! Now you can tab through input boxes, radio buttons and check boxes, etc in the Mac OS like you may already be used to doing in your web browser.

To disable, select ‘Text Boxes and Lists Only’ in the preferences. It may not stop immediately, though. Sometimes you have to hit Ctrl+F7 to get back to normal mode. (But why would you want to, silly!)

Later on I caught up with familiar faces Molly Holzschlag, Chris Bernard and Caleb J(a)nkins.

The vibe is really cool, the crowd is very energetic and I’ve learned some good practices and tips. Our stay at the Adam’s Mark hotel in Downtown Dallas, however, has been a completely different experience. I’ll brief you here and send you on to Zak’s and Sal’s blogs for the rest of the details.

So, since I have a very sensitive nose, I was dying as soon as I walked in. The building wreaks of age. I promise you that I could smell the 1980s in this old Southwest-patterned carpet. Aside from the indifferent receptionists, brown water that we had to greet us upon return to the room and paid parking, and paid ethernet internet, it’s not so bad.

That said, I will let you check out the other guys’ blogs:
Zak’s take on our stay at the Adam’s Mark, Downtown Dallas and Sal’s Adam’s Mark Downtown Dallas Review