Goodies to Go ™
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
https://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/
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!
