Mar 172011
 

Final version of the DCP logo as it will be seen on the site redesign.

I finished up the redesign of my dad’s site, Dan’s Custom Plans, this week and I wanted to point out a couple of things from the header that I think are particularly cool. Since I’m not sure what browser you’ll be using I am going to provide screenshots of the site as it looks in Google Chrome because many of the most interesting aesthetic and experiential features of the website are written in code that is not fully supported in Internet Explorer yet (some features not even supported in the latest version, Internet Explorer 9). I also want to make it clear that all of the cool little features that I’m going to outline in this post are applied exclusively to the experience layer; in other words, even though some older and non-standards-compliant browsers (read “IE”) will not display some of these features, that absence will not “break” the website in those browsers. I went to great pains to make sure that the site looks good and works the way it’s supposed to across all browsers. There are just some browsers that make the experience more rich.

So, without further ado, here is a screenshot of the header as it looks in Google Chrome:

Dan's Custom Plans Header

The header for Dan's Custom Plans

Click on the screenshot above so you can notice a couple of things. The two pictures in the header are actual images but those are the only images in that screenshot. The rest of the elements, including the text and the tabs, are all nothing but HTML and CSS. I’ve already described how I created the logo image using Photoshop and Illustrator and the picture on the right is an image of an elevation Dad had drawn up for a past project. I used Photoshop to give it an inset drop-shadow and a little bit of a yellow-orange highlight around the edges. But what I really want to talk about is the text and the tabs.

Dan's Custom Plans logo text

Logo text with drop shadow

The “Dan’s Custom Plans” and “Custom Home Plans Designed For You” text both feature a feature of CSS3 called “text-shadow.” Before CSS3 if a web designer wanted to put a drop-shadow on some text he or she would have to create an image in something like Photoshop and then link to that image in the source code. This was not a great way to put text on a web page for a couple of reasons. Primarily, disabled people who use screen readers to surf the web were at a disadvantage because these screen readers only read text, not images on a web page. Secondly, search engines like Google use the text in headers (things like the HTML <h1> tag) to decide what a web page is “about” and rank it in search results accordingly. Most of the time you put the name of your business or some other important information in the header and it’s nice that search engine algorithms know automatically that they should place more emphasis on header tags and rank your site correctly. If instead of a heading tag you use an image then Google’s algorithm won’t understand that the text in your header is very important. Thirdly, images are obviously much bigger than the code it takes to create a header tag. A good web designer always looks for ways to make his or her web pages as light weight as possible so that they load quickly and use as little bandwidth as possible.

So in my CSS I put the following line of code:

#header > h1 {	text-shadow: hsl(0,1%,16%) 1px 1px, hsl(0,1%,16%) 2px 2px, hsl(0,1%,16%) 3px 3px, hsl(0,1%,16%) 4px 4px;}

I won’t go into much detail, there are many very good resources on the web that describe how to format the text-shadow property, but that line of code above gives the text a drop-shadow. Now, you can go overboard with drop-shadows. You should always be able to justify why you’re adding a feature like drop-shadows. In this case I think the drop-shadow sets the logo text apart with a little lift and also makes it easier to read. The good thing about the text-shadow property is that browsers that don’t support it simply ignore it. Internet Explorer 8 and earlier will simply display the flat text. Web designers call this kind of thing “graceful degradation.”

I used similar code to create the inset effect on the “Custom Home Plans Designed For You” text right below the header. Here is the code followed by a close-up:

#maincontent > h2 {	text-shadow: #8CB2FF -1px -1px, #8CB2FF -1px -1px;}
Custom Home Plans Designed For You

Sub-heading with inset shadow

Next I wanted to talk about the navigation tabs. I knew I wanted to used a tabbed navigation system because tabs just seem like a very natural, instinctive way of creating navigation for the web. Tabs make it very easy to know what page you’re on as well as get to the other pages on the website. They also seem to take up less screen estate than sidebar navigation. Also, for this particular redesign I knew I wanted to put the contact form in the sidebar so I had to find another place for the navigation. Here is a close-up of the tabs:

Tab navigation for Dan's Custom Plans

The tabbed navigation for Dan's Custom Plans

For the tabs I used CSS3 linear gradients to give them some volume and I used the border-radius property to make the top corners rounded. There’s really not much to say. Again, you can read more about the ins and outs of border-radius and gradients in CSS3 at many sites all over the web. Here’s part of the code. I had to place this on both the a‘s in my navigation bar as well as the pseudo-classes a:hover and a:focus.

#nav > ul > li a, #nav > ul > li.selected a, #nav > ul > li.selected a:hover, #nav > ul > li.selected a:focus {  	                                                                                             -moz-border-radius: 10px 10px 0px 0px;	                                                                                                                                    -webkit-border-radius: 10px 10px 0px 0px;	                                                                                                                           border-radius: 10px 10px 0px 0px;	                                                                                                                               background-color: #7FA8FA;  	                                                                                                                                         background-image: -moz-linear-gradient(top, #C5D7FA, #7FA8FA); /* FF3.6 */  	                                                                                                    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #C5D7FA),color-stop(1, #7FA8FA)); /* Saf4+, Chrome */  	                            background-image: -webkit-linear-gradient(#C5D7FA, #7FA8FA); /* Chrome 10+, Saf6 */ 	                                                                                      background-image: linear-gradient(top, #C5D7FA, #7FA8FA);}

I think the gradient on the tabs gives them a very nice look. The gradient makes the tabs look like they have more than just two dimensions. You might not be able to tell that there is a gradient on the inactive tabs (the lighter colored ones) but trust me, it’s there. It’s just subtle. Also, the rounded corners make the tabs distinctive and attractive. I also used a very small (1 pixel) border at the bottom of the header and around the active tab to give the main content section some lift and separate it from the header and footer (the 1 pixel border is also at the top and bottom of the footer). Details like this border hopefully set my design apart and give it that little something extra.

Again, even though border-radius and gradients aren’t supported in Internet Explorer (not even IE9) or Opera those browsers will just ignore that code and serve up a solid color tab with right-angle corners. I think the addition of the subtle white border manages to still set the tabs apart even these less modern browsers.

Here is what the header looks like in Internet Explorer 8:

Header for Dan's Custom Plans in Internet Explorer 8

Header for Dan's Custom Plans in Internet Explorer 8

I think it degrades nicely. Sure, it doesn’t have the pretty rounded corners and gradients on the tabs or drop-shadows on the text, but it still looks like a site designed today instead of 10 years ago. I could not be prouder of the site and honestly am constantly surprised when I’m able to create something like this out of just words in a text editor. It’s just amazing.

So what do you think about the redesign? I would love to hear any comments or criticisms. I am eager to soak up knowledge from both professionals as well as users. Tell me what you think in the comments. And if you really like it and would like a website of your own, get in touch with me via the contact form on my home page, paulcrittenden.net. And if you are in the market for a new house or an addition to your house, Dad is among the best in the home plan business. Visit Dan’s Custom Plans and drop him a line. There’s a contact form as well as pictures of houses he’s designed for people in the past. He is very talented and his rates are extremely reasonable.

Thank you for visiting and I hope you enjoyed my blog. Subscribe to The Rabbit I Pulled Out of My Hat by Email and please come back soon!

  2 Responses to “The Redesign of the Dan’s Custom Plans Website”

  1. Very Cool, but I have an issue that may just be me. I get TRIPOOMH emailed to my inbox. I use OE. I have (as you know) a 24″ (11X21) LCD monitor. Your text runs off the screen to the right & I have to scroll right to read it.I think maybe the tabs need to be set in some to use an old typewriting phrase. Again, this could be a problem I have using OE but I have never had it reading emails from other sources.

  2. @Dan Crittenden: Hmm… interesting. I also get my blog emailed to me and I don’t have this horizontal scrolling issue in Gmail. I use a Google service (Feedburner) to create my blog’s email subscription service. I don’t really have any control over how it’s laid out. If I had to guess I would think the issue here is that you might be looking at the email in OE’s preview mode instead of double-clicking on the message and actually opening the email. Which I understand; when I have to use Outlook at work I rarely ever open emails and instead just use the previews. If you could, double-click on the message so that it opens in its own window and let me know if you still have to scroll horizontally. Thanks for the info!

Sorry, the comment form is closed at this time.