May 27, 2002-- Newsletter #182

By Joe Burns



Goodies to Go (tm)
May 27, 2002--Newsletter #182

This newsletter is part of the internet.com network.
http://www.internet.com
 


 
Goodies Thoughts - Website Design - Consistency

In the last issue we covered the topic of website navigation and how it is a key element in keeping visitors at your sites. In this issue we'll cover another very important element in keeping your visitors happy, consistency.

 

Consistency in web designs is often an overlooked element. The more creative you are the easier it is to overlook its importance. What I mean by consistency is a design that flows from page to page with little change in the overall design. This doesn't mean that you have to have the exact same design on each page with only the content changing but rather that your designs should maintain a consistency in all of the key elements.

 

For example, let's assume you are one of those overly creative types that should have been a painter but who's hand just won't cooperate with your imagination (which is why you opted for the computer as your canvas). You are designing a site for your local florist. You started by creating a home page with a wonderful floral border, their logo on the top and the navigation on the left. One of the links on the home page goes to a page about roses. Since you were in a clever mood you designed this page with a giant watermark rose in the middle and you moved the navigation to the top of the page with the logo and decided to split this page into two frames, top and bottom.

 

While both pages that you designed are each quite wonderful in their own right there are some definite problems. After implementing the site you notice that most of your visitors tend to bail out after going only a page or two. The most likely reason is that your design confuses the heck out of them. The only consistency that you have provided for your visitors is keeping the logo in the same place. If it weren't for the logo they wouldn't even be sure that they were still on the same site.

 

My first rule of consistent design is to keep all of your key elements in the same place on every page. Here are some of my most important key elements:

 

Navigation - This is the most important key element in your design. If you move and/or change your navigation from page to page your visitors will become quite weary of chasing the navigation around the page as they move through your site and most likely give up.

 

Logos - Whether you are designing a site for personal or business use be sure to have a unique and easily recognizable logo displayed prominently on the site. In business, the logo is one of the important tools for building recognition. In web design it works much the same way by burning the image of the logo into the visitor's mind through repetition while at the same time giving the visitor a sense of comfort in knowing they haven't been whisked off to some other place.

 

Colors - A consistent color scheme is a must. Imagine viewing a site that changed the background color on you every time you changed pages. Eventually, you would probably become disoriented and run away from your computer screaming. While that is a bit of a radical example you get the idea. Now, some designers will disagree, but I believe that the blending of two or three complimentary colors in a design is the best approach. I also believe that some color change from page to page can be good as long as you don't overuse it. A good example of using a color change would be in a site like the florist example above where you might have two basic color elements and change a third element each time the visitor moved from one major section of the site to another, that is from roses to planters to balloons. You get the idea.

 

Frames - The last major rule I have is to never mix framed and non-framed pages. This will confuse your visitors faster than anything. Personally, I am not a fan of frames but if you decide to include frames in your designs keep the frame structure the same throughout. Don't rearrange your frame structure or pop back and forth between framed and non-framed pages.

 

The elements above are not necessarily the only elements you need to consider when creating a consistent design but they are at the top of my list. The best way to learn about good website design is to visit some of the sites that make you feel the most at home and analyze them very carefully to see what it is that makes you comfortable. Odds are the things that make you comfortable with those sites were carefully considered when designing the sites and probably include some of the elements listed above.

 

In the next issue of HTML Goodies we will consider the effects of download speed on your visitors.

 

Thanks for reading!

 


Quiz Goodies

How do you use JavaScript to write and read a cookie?

 

Read answer below.



Q & A Goodies

Questions are taken from submissions to our Community Mentors. You can ask a Mentor a question by going to http://www.htmlgoodies.com/mentors/.

 

 

Q. How do you make those pop-out menus that you mentioned in the previous newsletter (Goodies to Do #181-Web Design-Navigation)?

 

A. I was wondering when I wrote the last issue if I would get this question a lot and I did. Unfortunately, the answer to this question would take waaaay to much room in this newsletter. So, as a compromise I am going to give you some references.

 

Pop-out menus are a combination of JavaScript and DHTML. If you want to create your own pop-out menus then you might want to check out the MSDN site which has a two part article on pop-out menus. Here is the URL of the first part: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndhtml/html/popupmenu.asp

 

If you don't really want to take the time to learn how it's done you could always buy pre-written software from different sites. Here are a couple of URLs to get you started:

http://www.webreference.com/dhtml/hiermenus/

http://www.likno.com/

 

Lastly, if you are a Macromedia fan and you own Fireworks 4, I believe that pop-out menus are a built-in feature. Personally, I don't use Macromedia products but you can check out the specifics on their site at http://www.macromedia.com/.

 

 

Q. If I use <P> and </P> to change the font, an unwanted space is created. Is there a way to set the font without creating a space?

 

A.  I actually do not use P at all. When you need to create space just put <BR>.

I would recommend you to use the DIV tag instead of the P. You may also use the SPAN tag as well. The difference between these is:

You can not put a <DIV> NEXT TO another DIV. A DIV takes up the whole line. Whereas, more than one <SPAN> can be used in a single line.

 

*** This question was submitted to our Mentor Community. The answer was provided by Igal Nassi, one of our CSS Mentors.
 

 

Q.  Hi, I feel somewhat stupid for asking such an elementary question but I am writing a PHP scheduling script for my company and am having trouble with radio buttons. I made a form and put some radio buttons in it, but for some reason you can click and select all of them at once. I haven't made a form in so long that I don't quite know what I am doing wrong. my code is <.input type="radio" name="monday".> (the periods are for the people with html email capabilities) and this is all inside two form tags. I just don't understand. Please help!

 

A. Though each radio button has the same name, they have to have different values.


<input type="radio" name="YesOrNo" value="yes">
<input type="radio" name="YesOrNo" value="no">

 

*** This question was submitted to our Mentor Community. The answer was provided by Eric Ferguson, one of our HTML Mentors.



News Goodies

So, you thought Netscape was dead, huh? Maybe not.

Click here to read the article

 

Patch, patch, patch. Fix, fix, fix. Microsoft releases a "critical" patch for IE 5.1, 5.5, 6.0.

Click here to read the article

 

And the search engine wars continue ...

Click here to read the article

 
 
Quiz Answer

To write a cookie using JavaScript, you use the cookie property of the document. You can specify the information you want to store and the values you want to assign. The "expires" field must be filled in unless you want the cookie to expire immediately when the session ends. The following code stores a cookie that contains the user's name and expires in 60 days. Simply acquire the user's name on your page and call the CreateCookie function shown in the script below.

<SCRIPT LANGUAGE = "JavaScript" TYPE = "Text/JavaScript">
<!--
  expires = new Date;
  expires.setDate(expires.getDay() + 60);

  function CreateCookie(username) {
    document.cookie = "username=" + username + ";expires="

    + expires.toGMTstring()
  }
-->
<\SCRIPT>

To see if the user has a cookie the next time they return, check the document.cookie property for a value. If one exists, you can use the split function of the cookie property to obtain the stored information in that cookie. In the example here, cookiename will be filled with the string "username" and username will be filled with the value that was supplied as the argument to the CreateCookie function.

<SCRIPT LANGUAGE = "JavaScript" TYPE = "Text/JavaScript">
<!--
  function GotCookie() {
    cookiename = "";
    username = "";

    if (document.cookie != "") {
      cookiename = document.cookie.split("=")[0];
      username = document.cookie.split("=")[1];
    }
  }
-->
<\SCRIPT>

Cookies can have many uses on a website such as displaying a personalized welcome to the user when they return to the site, automatic login or retrieving preferences.

 

 

And Remember This . . .

Did you know that Memorial Day in the United States began as Decoration Day, a day to honor those who served in the Civil War. Flowers and flags were used to decorate the graves of those who had fallen. This holiday was celebrated on May 30 from 1868 until 1971 when the 4th Monday of May was made the official day of observance.


Hope you had a happy Memorial Day!


Thanks for reading Goodies to Go!

 

Archive Home Page.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date