I had put Teri’s original site together based on a WordPress theme that I created; but, in retrospect, I realized this wasn’t really the best use of the homepage. I set out to redesign her landing page (not the interior pages) to present a cleaner and more humble jumping-off-point.

The previous design

It’s not terrible, but your eye doesn’t quite know where to go. The visual hierarchy is left to chance, and to me that’s just not a good design. First thing to address in my mind was the structure and hierarchy. Next, I felt that the links to interior pages weren’t presented with enough emphasis. The interior pages are where the bulk of the content lies, so why not focus on them. The blog was given a sort-of second-place spot in the hierarchy, despite the fact that it holds the most current content on the site.

I also felt that the visual identity was a little too “all-over-the-place” for me. Standardizing a layout that worked off the 960 grid system seemed like the best fit for the task-at-hand. I wasn’t upset with the color scheme, so I sought to keep that in place. I also felt the typography could use a little work.

Concept

I decided to start off with a simple wireframe that I worked up to properly address the emphasis on hierarchy and adhering to a grid-based layout. Moving the description of Teri’s services front-and-center helps to put emphasis on this content, whereas it was getting lost in the previous design. Another major change was moving the interior page links into a more dominant position so that visitors could find what they want quickly.

Fleshing out a Design

The markup (HTML) took me about 2 to 3 hours to put together given the simplicity of the content. I decided to keep the random generation of recommendations similar to the chalkboard in the previous design, while tying it into the new layout. CSS didn’t take too long either, but I suppose that’s the beauty of designing with a grid. Naturally, some Photoshopping took place to produce the background, separator and text images, but I was able to salvage the use of the icons from the previous design. If you’re wondering about typefaces, I used Droid Serif, Lucida Grande, and Palatino. All in all, I think it turned out pretty well. You be the judge.

Editor’s Note: On Teri’s site, I’m serving IE6 users the Universal Internet Explorer 6 CSS by Andy Clarke.

1. Multiply decimals (not whole number) by 60. The whole number remaining is your minute value.
2. Now multiply the minute value’s decimals by 60. The entire number (including decimals) remaining is your seconds value.
• Example: 12.9975°
• 12° (0.9975 * 60)’ = 12° 59.85 = 12° 59′ (0.85 * 60)” = 12° 59′ 51″

Hope this comes in handy for someone at some point.

That’s Great! But…

I’ve got to say there’s still a caveat with this announcement. Corporations are NOT going to give up their precious IE6. Far too many companies have invested resources in building custom applications that work only in IE6 and it’s unlikely they will shift from this line of thinking. Despite the fact that every web designer/developer’s bane of existence known as IE6 is dwindling in market share, it still occupies a formidable percentage. And one that I doubt is going anywhere soon, despite what we all wish.

Ultimately she wants to increase the frequency of her blog posts to drum up some traffic as there are only a handful of other blogs on the interwebs with a similar focus. What’s that to me? Well, she really needs her own, dedicated site to be taken seriously. That’s where I come in. I’m always looking to pad my portfolio, but this is a unique situation. Why? The obvious answer is the client is my wife. And this will be her “personal” site as opposed to the Tiny Toes site I created for her last fall.

Do I really know her as well as I think I do?

I’ll be designing the site for public consumption and for my wife’s enjoyment. A tightrope walk for sure. How can I balance her ideas (without offending her) with the ideas I have for the UX? Luckily, we’re in the very initial phases of the site design, so I may skirt by OK. Planning for the public audience will require a consistent voice telling me in the back of my head to consider my wife’s concepts.

How is this any different than a typical design project?

If I don’t survey Steph’s suggestions and objectives closely, I run the risk of hurting her. That’s the last thing I want to do. Tell me what other client (apart from yourself, perhaps) would be emotionally hurt if you didn’t guess their ideas correctly. If I don’t read her right, it might just show her that I’m not as attentive to her as I claim (certainly a possibility). So far I’ve been successful. She bought into my logo design (and even the color scheme!) for the site. But there is much left to accomplish.

Maybe I’m over-analyzing this…

Yea, maybe. Maybe not. After all, we are just talking about a website. But after watching Fireproof this weekend, I don’t think it’s worth the risk. At the altar, I made a (less literal) vow to understand her the best I can for the rest of my days. To show I listen and pay attention is to show I care. And to show I care is to show I love her. With women, I think, it’s the not-so-obvious things (the small things, if you will) that make the most significant impact. For someone I cherish and appreciate, it’s the least I can do.

Morning came and more air was coming through the pipes. Naturally, we called our local water provider, Shiloh Water System. The gentleman that answered the phone was extremely courteous and patient while he explained to me that there was no way the air was caused by a water main break. Great, I thought, now I have to call a plumber — on a Sunday. We all know what that amounts to: $$$$. Au contraire! He explained to me that what would likely be causing the problem is known as a Thermal Expansion Absorber, or Thermal Expander. To verify this was the cause of the problem, he suggested testing the valve (just like a bike tire) with a tire pressure gauge to see if water came out. Sure enough! He explained that I could replace this “fairly easily” and my problem would be solved. I thanked him for all his help and went to the computer to start researching.

Thermal Expansion Absorber? What’s That?

After some Googling I found out that the expansion tanks are sized based on the size of your water heater. Also, in my engineer ways, I wanted to learn the purpose of the tank. It’s quite simple, actually. As water heats up in the water heater, it expands but it needs someplace to go. The tank, which is pressurized with air, allows the water to expand against the rubber diaphragm. Failure to use the tank could result in the hot water heater expanding or even exploding! Well, I guess I’ll be needing that then!

Purchasing and Replacing the Tank

Armed with the proper capacity of the water heater (40 gallons in our case) and an idea of our incoming water pressure, we took a trip down to Lowes to buy the right tank. It was only about $50 and was pretty light, so no problems there. Now, the fun part! The steps for installation are fairly straightforward, as far as DIY projects go:

1. Shut off water and water heater

2. Drain water from pipes

3. Release excess air from expansion tank

4. Remove existing expander

5. Prep. new expander

6. Install new expander

7. Turn water on and purge

1. Shut off water and water heater

Go find your incoming water supply and turn the valve off completely. The best way to find this is to trace the pipe marked as “Supply” back from your water heater. It’s important to turn the water heater down to a low heat (vacation setting) or off completely while you’re performing this work. No point in risking an injury.

2. Drain water from pipes

I’m assuming you don’t want a minor flood in your basement or utility closet. Unless you enjoy that sort of thing. Go open the faucet that’s farthest away from your water heater until water stops coming out.

3. Release excess air from expansion tank

Using an air hose attachment or a cheap-o tire pressure gauge, depress the valve at the bottom of the expansion tank. Oh, don’t forget a bucket! Remember, there’s water in that tank. If there isn’t water, you don’t need to do this!

4. Remove existing expander

Get ready for a fight. This step took me the longest by far. You’ll need two pipe wrenches and quite a bit of elbow grease. I recommend running a razor knife or painter’s tool along the threads to help loosen any gunk that may have built up over time. With a little brute force, you’ll have it loosened in no time. When you’ve almost got the tank off, get into a position where you can hold the tank effectively, as by this point it is likely full of water. You definitely don’t want to drop it.

5. Prep. new expander

The tanks come pre-charged to a certain PSI (check the label), so if you’re water pressure is within 5 psi of that, you can skip adjusting the air pressure. Otherwise, hook up an air compressor and pressurize it to within 2–5 psi of the water pressure. Of course, if you’re water pressure is lower than the pre-charge, you’ll need to release a bit of air. I also recommend using PTFE tape or plumber’s putty around the threads to ensure a tight, leakless seal.

6. Install new expander

Pretty self-explanatory, just tighten the tank into the T-fitting clockwise. Make sure you use the pipe wrenches on the hex fittings to get a tight seal.

7. Turn water on and purge

Now to test your handiness! Go turn the water on slowly and check for leaks. If you’ve done a good job you can continue to open the valve until you’re back to normal. Let the faucet that is farthest away from the water heater run for a few minutes to get out any excess air and you’re back in business.