| Put on a Happy Face by Daniel Will-Harris
eFuse.com's home page went from long and wordy, to short and graphic. Here's why and how the change was made. Redesigning the face of eFuse I've always said that a Web site is like your personality in pixels. So, the original eFuse.com home page was an accurate reflection of me. When people told me it was wordy, I just said,
"Yeah, so, I don't see anything wrong with it; I mean, it's descriptive, it's informative, it's long, big deal, what of it, it works this way, and I have feedback to prove it." See—loquacious (not to mention a very long sentence). Here's how the page looked: 
To see the original home page full size,
click here.But sometimes, even when you're happy with yourself (or your Web site), you want to see what you can do to improve. Despite being naturally verbose, I've always known it's important to condense your message (and believe it or not, I have done that in the past!).
It's also an issue of "who you are" vs. "who you want to be." The original page was detailed and plain, and I decided to try for concise and enticing. So I tried to rethink the home page—from scratch—always a good exercise, even if you end up deciding that what you have is fine. I spent the past few weeks trying out many variations, each time e-mailing people I know and respect and asking their opinion (and learning from them).
I've had a lot of e-mail from people asking the whys and hows, so here goes. Why? There were a few reasons, both from other people and myself. Some other people thought that not enough people were "clicking-through" the home page. My rationale was that the page was so detailed and clear that people knew if
they wanted to come in or not, so this was actually an indication of success, rather than failure.You know, you really do have to look at things from as many angles as possible. Numbers are misleading because they can mean a lot of things. I personally get annoyed when people spout off numbers to me as if they're "the truth." Because you can look at the same numbers in many ways. Also, there's generally more than one reason why people do
or don't go to various parts of a site. Maybe it's the design. Maybe it's the name of the section. Maybe it's that people are new and feel like they should try step one before they jump into step five. So, while few people were going directly to step five, and some people thought it was because the page was long and step five was near the bottom, I say it's because most people coming to eFuse felt like they were at step one or two. People were
reading articles in the 5/Publish section, they were just working their way there, which is how the site was designed. So once again, they could consider it a failure, but I saw it as a success. You also have to be careful about expectations. Not only do they have to be realistic (or you're doomed to disappointment, even in what others consider a successful site), but they can blind you to reality. Instead of expecting that all sections will be visited equally (which is an unnatural
assumption to begin with), you build it and see what happens. Then, if you want to change what happens, you try something else. That said... That said, I was interested in trying something different. The Web is still so new that no one is totally sure of anything. Are short pages really more effective than long pages? Well, we
pretty much know that isn't true for content pages, but what about home pages? And, honestly, I like design. It's fun. It's like a game. Move this there, move that here, and after a while things fall into place. So it sounded like an interesting challenge to me as well. Finally, my very smart wife has always said that things must have a "sense of mystery"—and I could see the original home page left nothing to the imagination. Finally, it's important to remember that you can
try anything on your Web site. If it doesn't work, you don't have to publish it. No one has to know what awful things you did. And sometimes, you can come up with great things by trying. So you can't lose by trying. Rethinking OK, so the challenge was to create a shorter, faster page. One
that was more enticing, to lure people inside, where they then might find something of interest.To me, perhaps the single most important part of the site is the content and navigation—what it says and how you get there. So that's where I started. While a very few people have said they don't like "Start, Plan, Design, Build, and Publish," I had to draw the line somewhere. I've received a lot of positive feedback about that organization and I wasn't
going to change it. And, an important (and difficult) part of any redesign is that someone (hopefully you) has to have the final say on what happens. Otherwise, instead of a single vision that most people can like, you end up with a mishmash of ideas that no one likes. Too many cooks really do spoil the broth. Starting with what you have (and need) I already had some elements to start with, and things I had to include:- A short description of the site
- The section names
- The FuseLetter sign-up box (more people sign up when they don't have to go to another page)
- A full-text search box (so people could find anything right from the home page)
- The elements of the eFuse.com visual identity or brand
- A logo
-
Typeface
- Colors
I have always liked the eFuse.com logo (it's kind of like a modern, rustic da Vinci man, only plugged in), but it's always been used small (except on the right side, very light). So I decided to start with it, blew it up (and it blowed up real good :) It looked a little bare, though, so I gave it an embossed look. I've always felt that single pages can use some "borders" or
"containment," so I added the circle to draw the eye in, and to contain the page. Playing with design One of the most important things to remember about creating a design is that you have to play—literally. Experiment. Have fun with it. NetObjects Fusion makes this
easy because you can just drag text and graphics onto the page and drag it around until it's the way you like it.Moving one piece one way can give you ideas about moving a different piece to another spot. And little by little, all of the pieces just kind of fall into place. It's a good idea to let any idea sit, at least overnight, so you can come back and look at it with a more objective eye. I did this and made more changes, and finally found a layout that worked.
For a complex design like this, though, I started in a graphics program because the page itself was going to be made up of graphics. Working this way allowed me to mock up the page and export the pieces as GIF files into NetObjects Fusion to make the final, working Web page. I used CorelXara
to try various layouts. One of the potential risks of working this way is that it's easy to create a design that is virtually impossible to produce. I see that happen a lot—that's why a lot of sites end up as a bunch of giant graphics, because you can't get the design they created to work as HTML. But I wanted a page that used real text and small graphics, and since I know what's possible, and practical, I knew what wouldn't work, and avoided it. 
Building it in Fusion The basic page was no problem at all. NetObjects Fusion's pixel-precise layout ensured it looked right. I just dragged
the graphics I'd made where I wanted them.Tip: Because I'd designed the page in a graphics program, I exported the entire page as one big graphic, and then I used that page as my "background" in NetObjects Fusion. That way I could drag in the individual pieces (the buttons, the text boxes) and place them exactly where they were in the graphics program. The background acted like a "template" to help me put the page together smoothly and accurately in
NetObjects Fusion. Once I was done, I added the real page background graphic, and voila, it was done, and it looked just right. More is more Now, I have to admit I've never been "Mr. Subtle." That's just not me. And as a friend of mine said at a recent birthday, "When you get to be this age, you start to accept who you
are." And who I am isn't subtle. So I wanted more.The first step was to add "rollover" buttons that change color when the mouse moves over them. That's very easy in NetObjects Fusion using the rollover component. That gave the page more feedback. But the page still didn't say much. There was one short paragraph about what eFuse.com was about. I included a form to sign up for the FuseLetter and one for full-text searching the site.
On one hand, this was good—perhaps it would pique the visitor's interest to "come on in." Or, perhaps it wasn't enough, and people would wonder what the site was about, or not wonder and just leave. So I decided to create the page so that when a visitor's mouse rolled over one of the section names, a description of what was in that section would appear in the middle of the eFuse.com logo circle.
DHTML (dynamic and problematic) So came the long struggle with DHTML (Dynamic Hyper Text Markup Language), the latest flavor of HTML that combines HTML and JavaScript. Once again, NetObjects Fusion makes this easy—just click and choose from options. But the format itself has drawbacks. To get things to overlap, I'd have to use CSS (Cascading style sheet) placement,
rather than tables. That excluded some older browsers. Since a majority of eFuse.com visitors have V4 and newer browsers, that wasn't too much of a problem. But Netscape won't let you put forms inside CSS areas, it just doesn't work right, so I had to get more complicated. I set the page to use tables, but created layout regions that would use CSS for the interactivity. This all worked fine in IE but still wouldn't work in Netscape. More research taught me that Netscape doesn't like DHTML
and nested tables. So I used regular tables, which required some design changes. Now it all worked, but the text that appeared in the middle was in rectangular boxes (your only choice for text in HTML) and looked pretty bad. (To see this version, click here.)
So I removed the text box backgrounds and instead started stacking the text boxes on solid backgrounds. This took more and more clicking and jiving with Fusion's DHTML controls, but it was still pretty easy. (To see this version, click here.)It also allowed me to create very interesting transitions, so
the text would slide into the middle, or roll down like a window blind, or "iris" in or out (like an old movie transition). Testing, 1, 2, 3... The more complicated your Web page or site, the more important it is for you to test it yourself, and ask others to look at it on their different machines and browsers.
Because DHTML is complex, some browsers just don't handle it well, and some computer graphics aren't fast enough. So I quickly learned that while these effects worked great on my newish Pentium II laptop with IE4, they didn't work as well with Netscape, and most of my "testers" said it didn't work for them, or didn't work very well. Back to the drawing board There's no sense in using some cutting edge technology like DHTML if people aren't going to see the page correctly. One of the people I had looking at the page was Peter Sklar of Coolmaps, a company that makes add-on components for
NetObjects Fusion. He suggested I look at his company's rollover component, because it would create a smaller, faster, and more "universal" page.So I downloaded the component (which only took a couple of minutes) and followed the animated screen tutorial (another couple of minutes) and I was off. While it didn't offer all of the bells and whistles of DHTML, it was easier to create, and it actually worked on every browser I tested (except one
weird beta version of Windows 98's original browser). 
To use it, I'd place the component on the page, tell it what graphic to use normally, what graphic to use as a rollover, and what other graphic (meaning the circle in the center) to change when someone rolled over the section name.  To the right you can see the
coolmaps rollover properties palette that lets you specify
what graphics to use for the rollover, and what other "targets" (meaning other graphics) you want this rollover to trigger.I did have to make some design changes—like setting the text that appears in the circle as a graphic. That's because JavaScript like this will only display graphics, not text boxes. But, then, not only did I get to use a more interesting typeface ( ITC
's Highlander Italic) which was more attractive, but the combined HTML and graphics of the page were 30% smaller than the DHTML text-only version!Tip: I used a totally clear graphic in the center of the logo for when the mouse wasn't over it, or over the section names. That allowed the logo in the background to show through, and made the first graphic tiny (under 1K). The
"rollover" graphic varied from button to button, so there are six of them, one for each section, and one for when you roll over the center of the logo by itself. The result was the first version of the new home page:
Technicalities, in brief
The page works like this. The large logo is really the Web page background. The "blank" (but really light blue green) part of the page is 1,040 pixels wide by 800 pixels tall. That assures that in most cases it will never tile.The animated logo, section names, and text on the right are all individual graphics or text boxes, placed precisely where I want them in NetObjects Fusion.
The "mouse-sensitive" (eek!) section name buttons use the Coolmaps rollover component, and they also control a rollover component graphic in the center that is either blank or filled with a graphic circle and text, depending on which section name your mouse encounters (eek!).
Each form (the FuseLetter sign-up and the Find box) are in a separate "layout region." That allows me to have two separate forms on the same page and keep absolutely precise placement. The text navigation at the bottom, though it looks very much like what NetObjects Fusion generates automatically, is really typed in and linked by hand. That's because this page is so complex I thought it would be easier to build it in its
own file, rather than in the 200-page main eFuse.com file. Comments from readers I was excited about the new page, and while my testers all liked it, I wasn't sure that real people who didn't know me personally would be so kind! It turned out that of the hundreds of people who responded to the eFuse survey
about the makeover, one out of three said they didn't like it. Well, you can't please all the people all the time, so I considered this a very high success rate.Just as important as people liking it, though, was their impression of speed. All but three people said it loaded either "fast enough" or "fast." That was very important to me because K-wise, it was larger than the previous, text-heavy home page. Virtual liposuction 'n' more All that feedback did give me some good comments that helped me revision the page to it's current state:
One person said the page was just a bit too long, so they had
to scroll to get to the "Find" box. So I made some adjustments. I rewrote the intro paragraph to include a "click here" statement, which allowed me to remove the "contents" button. That gave me room to move the "Find" box up and raise the FuseLetter sign-up, which in turn gave me more room for text underneath that to announce new things on the site. That made the page more versatile. I made two changes to the background. First, I added "a
NetObjects resource" to the background rather than placing it on the page as a separate graphic. I did this in case someone saved the background, it would contain this "brand." Next, I gave the FusePerson a little virtual liposuction under his or her right arm. I don't really believe in retouching photos—it gives people totally unrealistic expectations. But in this case, I can call it "artistic license" and the result is a bit smoother and more streamlined.
I had also looked at the server logs and noticed a low percentage of people were going to the "what's new" page from the home page. So I made the "what's new" text flash, subtly, once every eight seconds, to remind people it was there. Of course, since the site has a lot of new visitors, they're clearly going to be less interested in what's new than "what's up," so when you look at logs, you have to keep these
things in mind! It's easy to get all upset and try desperately to get more people to go to your "goodbye page," but they're not going to read it until the end, so chances are they aren't going to link right to it from your home page. Your turn  For now, I'm happy with it. I hope you are, too. Please take a look at http://www.efuse.com and tell me what you think. 
|
