-- Helping You Get The Most Out of Your Website --
January SiteSpinner® WebTips
Welcome to the New Year!
This is a month of change, and for many, a month of hope. We start the new year in an economically precarious position. However, with all change comes opportunity, and our hope is that opportunity continues to make itself available to all our readers.
In this month's SiteSpinner WebTips under Design we'll talk about some basic website navigation ideas. In How-To, we talk a bit more about Animation in SiteSpinner Pro. In Community Tips, Larry tells us how to disable right-clicking images, and for Site of the Month we savior the tastes of Mexico - in Las Vegas! Lastly, for those of you who may have missed it, we have posted an update to SiteSpinner Pro
In this issue:
Welcome to the New Year!
This is a month of change, and for many, a month of hope. We start the new year in an economically precarious position. However, with all change comes opportunity, and our hope is that opportunity continues to make itself available to all our readers.
In this month's SiteSpinner WebTips under Design we'll talk about some basic website navigation ideas. In How-To, we talk a bit more about Animation in SiteSpinner Pro. In Community Tips, Larry tells us how to disable right-clicking images, and for Site of the Month we savior the tastes of Mexico - in Las Vegas! Lastly, for those of you who may have missed it, we have posted an update to SiteSpinner Pro
In this issue:
- Design - Website Navigation
- How To - Animation with SiteSpinner Pro - Behaviors
- Community Tips - Discouraging Right-Click Save Image
- Site of the Month - Sonrisa Grill
- Special Offers and Announcements - SiteSpinner Pro Update
Design - Website Navigation
_________________________________________________________________
Thinking of a web site as an architectural design is actually a good analogy. It must have a structure expressed as continuity in the layout scheme. It must be functional in the value of the things that it offers the visitor. It should be pleasing in the form of its design and detail. And it should be easy for a first time visitor to find their way around. When finished, your web site can be comparable to a skid-row warehouse or to an architectural jewel such as "Falling Water" by Frank Lloyd Wright.
Discussing navigation is in some ways subjective. The motherhood and apple pie objective is easy, 'make your site navigation simple and intuitive'. What does that really mean? One person's intuitive navigation is another person's spaghetti network.
No matter how good an artist you are, designing a navigation scheme is not an artistic endeavor. It should be cold, functional and so simple and intuitive that your visitors never realize that it is an integral component of your web site. In fact, a good website navigation scheme will probably never elicit a compliment from a visitor ("Hey, I just visited your web site, the navigation was great"). A bad scheme will ("I tried visiting your site but I could not find anything so I left").
You cannot design a decent website without first designing the navigation system that your visitors will use to find their way around. A website's navigation scheme is the 'human' component upon which it will work or fail.
I first became involved in computer graphics and animation as a post-graduate architecture student. I was taught that the first thing an Architect does when designing a new building is to create a balloon design. This is a very rough sketch that shows the relationship between the various functional areas of a building and how people move and relate to those areas. A website design should start in exactly the same way.
Before worrying about the appearance, nifty graphics or promotional text on your site, you should first consider what the most important functional areas are that you wish your visitors to experience. Draw rough balloons on a piece of paper to represent these functions and then draw lines between them to represent how people are going to move between them. Should it be a direct path or do you want them to pass through another functional area first? Move the balloons around until you have each main function sensibly positioned with efficient paths between them.
Another University I am familiar with did not put any paths between the buildings at its new campus when it was first built. Instead, they left grass between them for the first year or two. Then they built the paths wherever the grass was worn out by foot traffic. Although you cannot avoid creating links when you create your site, you should be aware of where your visitors wish to go and ensure that they can quickly and easily be able to do so. Use a good stats analysis program to find out. Once you know where your visitors are going, you can improve your navigation by placing links at appropriate places.
Graphics can add a lot to a web page but text usually generates more links. Whenever you write about any topic, product or service on another web page, include a link within the text. Don't expect the reader to look for it. If your graphic links are not absolutely clear, add text so that your visitors don't need to guess where they go.
Once your visitor has figured out your navigation scheme, don't change it. Repeat the same navigation on each page. Use the same text in the same color at the same location. As I said before, this is really not the place to express your artistic skills.
Finally, a visitor will have a hard time knowing where to go if they don't know where they are. Clearly identify each page in a fashion that your visitor can quickly locate and identify. This can be in the form of a large page title or a small tag. The key is to make it obvious and consistent from page to page.
I am a great believer in artistic expression. The Internet has provided more people with the opportunity to express their artistic skills through Web Page design than anything else I can think of short of designing costumes for a carnival. No matter how elaborate a carnival costume is, it must still be able to stay on the wearer (I think). Other aspects of a web page can be as elaborate as you like but the navigation is the simple component that will make it work.
- Steven White
_________________________________________________________________
Thinking of a web site as an architectural design is actually a good analogy. It must have a structure expressed as continuity in the layout scheme. It must be functional in the value of the things that it offers the visitor. It should be pleasing in the form of its design and detail. And it should be easy for a first time visitor to find their way around. When finished, your web site can be comparable to a skid-row warehouse or to an architectural jewel such as "Falling Water" by Frank Lloyd Wright.
Discussing navigation is in some ways subjective. The motherhood and apple pie objective is easy, 'make your site navigation simple and intuitive'. What does that really mean? One person's intuitive navigation is another person's spaghetti network.
No matter how good an artist you are, designing a navigation scheme is not an artistic endeavor. It should be cold, functional and so simple and intuitive that your visitors never realize that it is an integral component of your web site. In fact, a good website navigation scheme will probably never elicit a compliment from a visitor ("Hey, I just visited your web site, the navigation was great"). A bad scheme will ("I tried visiting your site but I could not find anything so I left").
You cannot design a decent website without first designing the navigation system that your visitors will use to find their way around. A website's navigation scheme is the 'human' component upon which it will work or fail.
I first became involved in computer graphics and animation as a post-graduate architecture student. I was taught that the first thing an Architect does when designing a new building is to create a balloon design. This is a very rough sketch that shows the relationship between the various functional areas of a building and how people move and relate to those areas. A website design should start in exactly the same way.
Before worrying about the appearance, nifty graphics or promotional text on your site, you should first consider what the most important functional areas are that you wish your visitors to experience. Draw rough balloons on a piece of paper to represent these functions and then draw lines between them to represent how people are going to move between them. Should it be a direct path or do you want them to pass through another functional area first? Move the balloons around until you have each main function sensibly positioned with efficient paths between them.
Another University I am familiar with did not put any paths between the buildings at its new campus when it was first built. Instead, they left grass between them for the first year or two. Then they built the paths wherever the grass was worn out by foot traffic. Although you cannot avoid creating links when you create your site, you should be aware of where your visitors wish to go and ensure that they can quickly and easily be able to do so. Use a good stats analysis program to find out. Once you know where your visitors are going, you can improve your navigation by placing links at appropriate places.
Graphics can add a lot to a web page but text usually generates more links. Whenever you write about any topic, product or service on another web page, include a link within the text. Don't expect the reader to look for it. If your graphic links are not absolutely clear, add text so that your visitors don't need to guess where they go.
Once your visitor has figured out your navigation scheme, don't change it. Repeat the same navigation on each page. Use the same text in the same color at the same location. As I said before, this is really not the place to express your artistic skills.
Finally, a visitor will have a hard time knowing where to go if they don't know where they are. Clearly identify each page in a fashion that your visitor can quickly locate and identify. This can be in the form of a large page title or a small tag. The key is to make it obvious and consistent from page to page.
I am a great believer in artistic expression. The Internet has provided more people with the opportunity to express their artistic skills through Web Page design than anything else I can think of short of designing costumes for a carnival. No matter how elaborate a carnival costume is, it must still be able to stay on the wearer (I think). Other aspects of a web page can be as elaborate as you like but the navigation is the simple component that will make it work.
- Steven White
How To - Animation with SiteSpinner Pro - Behaviors
_________________________________________________________________
Both SiteSpinner and SiteSpinner Pro include two simple behaviors that can be assigned to your Objects. These behaviors can set an Object's visibility while the page is first loading, after it has loaded, or on a mouse-over or mouse-leave event. These Behaviors are a useful way to create several special-effects that toggle an Object's visibility.
SiteSpinner Pro includes the ability to create far more complex behaviors based on many different interrelated events. The effective use of these Behaviors is probably the most complex aspect of learning to use the advanced features in SiteSpinner Pro. Mastering the use of the Behavior functions will give you the ability to create complex interactive web pages.
A Behavior works by switching between an 'Active' and a 'Not Active' state. Don't be misled by the terms. There is nothing intrinsically different between the two states other than what you decide to assign to them. In other words, an Object could just as easily be invisible when 'Active' as when 'Not Active'.
The Behavior is composed of two components. The first is an Event that triggers a Behavior 'Active' or 'Not Active'. The second is an Action that will be performed when the Behavior enters either of these two states. The user defines a Behavior by deciding what the trigger mechanisms are and what actions will be performed as the Behavior switches between the two states.
As an example, we can use a simple Mouse Over Behavior to make an Object Visible and Invisible.
Example 1
The trigger events in this example are the mouse moving over and off the Object. By default, the Object starts in a 'Not Active' state. As the cursor is moved over the Object, it triggers the Object into its 'Active' state. As the cursor moves off the Object it triggers its 'Not Active' state. The Behavior's 'Actions' are to make the Object 'Visible' when it is triggered into its 'Active' state and 'Invisible' when triggered into its 'Not Active' state.
As I mentioned previously, there is no intrinsic difference between an Object's 'Active' and 'Not Active' state. The the link above illustrates this with two examples. Example 1 will make an Object Visible as the mouse moves over it. Example 2 does the reverse.
This example is of course very simple and can be more efficiently done by setting an Objects Visibility in the Object Editor. The principle for more advanced Behaviors remains the same. The difference lies in the types of Events that can trigger a Behavior and the Actions that can be performed by the Behavior.
Figure 1
This page illustrates some of the Behavior dialogs including Triggers and Actions that can be applied to a Behavior. User Triggers include Mouse Over, Mouse Select, or a keyboard character. Dynamic triggers include Time, when two Objects intersect or don't intersect, or when an Object's internal value equates to a simple test. An event can also be triggered by another Object when its Events are triggered.
There are many Actions a Behavior can perform when an Event is triggered. These include setting an Object's visibility, starting or stopping its Action or Sound Component if it has one, or triggering the Event of another Object's Behavior. Actions can also include applying a mathematical formula to any Object or performing a Metamorph operation on an Object. Despite the big word, this simply means changing one or more of an Object's Components. An example would be switching an Objects Action component that traces a rectangle to an Action component that traces an ellipse.
These operations may seem complicated when taken in their entirety. When looked at individually however, they are far easier to understand.
- Steven White
_________________________________________________________________
Both SiteSpinner and SiteSpinner Pro include two simple behaviors that can be assigned to your Objects. These behaviors can set an Object's visibility while the page is first loading, after it has loaded, or on a mouse-over or mouse-leave event. These Behaviors are a useful way to create several special-effects that toggle an Object's visibility.
SiteSpinner Pro includes the ability to create far more complex behaviors based on many different interrelated events. The effective use of these Behaviors is probably the most complex aspect of learning to use the advanced features in SiteSpinner Pro. Mastering the use of the Behavior functions will give you the ability to create complex interactive web pages.
A Behavior works by switching between an 'Active' and a 'Not Active' state. Don't be misled by the terms. There is nothing intrinsically different between the two states other than what you decide to assign to them. In other words, an Object could just as easily be invisible when 'Active' as when 'Not Active'.
The Behavior is composed of two components. The first is an Event that triggers a Behavior 'Active' or 'Not Active'. The second is an Action that will be performed when the Behavior enters either of these two states. The user defines a Behavior by deciding what the trigger mechanisms are and what actions will be performed as the Behavior switches between the two states.
As an example, we can use a simple Mouse Over Behavior to make an Object Visible and Invisible.
Example 1
The trigger events in this example are the mouse moving over and off the Object. By default, the Object starts in a 'Not Active' state. As the cursor is moved over the Object, it triggers the Object into its 'Active' state. As the cursor moves off the Object it triggers its 'Not Active' state. The Behavior's 'Actions' are to make the Object 'Visible' when it is triggered into its 'Active' state and 'Invisible' when triggered into its 'Not Active' state.
As I mentioned previously, there is no intrinsic difference between an Object's 'Active' and 'Not Active' state. The the link above illustrates this with two examples. Example 1 will make an Object Visible as the mouse moves over it. Example 2 does the reverse.
This example is of course very simple and can be more efficiently done by setting an Objects Visibility in the Object Editor. The principle for more advanced Behaviors remains the same. The difference lies in the types of Events that can trigger a Behavior and the Actions that can be performed by the Behavior.
Figure 1
This page illustrates some of the Behavior dialogs including Triggers and Actions that can be applied to a Behavior. User Triggers include Mouse Over, Mouse Select, or a keyboard character. Dynamic triggers include Time, when two Objects intersect or don't intersect, or when an Object's internal value equates to a simple test. An event can also be triggered by another Object when its Events are triggered.
There are many Actions a Behavior can perform when an Event is triggered. These include setting an Object's visibility, starting or stopping its Action or Sound Component if it has one, or triggering the Event of another Object's Behavior. Actions can also include applying a mathematical formula to any Object or performing a Metamorph operation on an Object. Despite the big word, this simply means changing one or more of an Object's Components. An example would be switching an Objects Action component that traces a rectangle to an Action component that traces an ellipse.
These operations may seem complicated when taken in their entirety. When looked at individually however, they are far easier to understand.
- Steven White
Community Tips - "Discouraging Right-Click Save Image"
_________________________________________________________________
These Tips are created by readers and SiteSpinner users and posted to the Virtual Mechanics Community Forums
larryd writes "...how to prevent a visitor from using the right mouse button and thus disabling the right-click menu." continue reading...
_________________________________________________________________
These Tips are created by readers and SiteSpinner users and posted to the Virtual Mechanics Community Forums
larryd writes "...how to prevent a visitor from using the right mouse button and thus disabling the right-click menu." continue reading...
SiteSpinner users seem to really like their food, in this case, Mexican. The restaurant looks great, as does the website that was built to promote it. Too bad our offices are too far for delivery...
Site Title: Sonrisa Grill
Site Author: Janae Hester
Site Link: www.sonrisagrill.com
Site Description: This site was created for a new Mexican restaurant in beautiful Lake Las Vegas. I tried to keep it very colorful and exciting to suit the menu, but still professional and relaxing as well.
Site Author: Janae Hester
Site Link: www.sonrisagrill.com
Site Description: This site was created for a new Mexican restaurant in beautiful Lake Las Vegas. I tried to keep it very colorful and exciting to suit the menu, but still professional and relaxing as well.
Built With: SiteSpinner Pro
Review: I love SiteSpinner Pro! I would never use anything else, it is phenomenal!
Review: I love SiteSpinner Pro! I would never use anything else, it is phenomenal!
If you haven't already heard the news, we have a new release of SiteSpinner Pro. As well as a number of new features, this release enables you to choose from 3 types of layouts for your projects - Web, Web+Mobile, or Mobile.
Registered SiteSpinner and Print Shop Web Designer Customers:
For a limited time Registered users of SiteSpinner and The Print Shop Web Designer can upgrade to SiteSpinner Pro for 50% Off (49.50 US). Simply reply to this email and include your Serial Number (available in the software under Help > About).
Registered SiteSpinner and Print Shop Web Designer Customers:
For a limited time Registered users of SiteSpinner and The Print Shop Web Designer can upgrade to SiteSpinner Pro for 50% Off (49.50 US). Simply reply to this email and include your Serial Number (available in the software under Help > About).
Registered SiteSpinner Pro and WebEngine Customers: For Registered users of Virtual Mechanics SiteSpinner Pro and WebEngine this is a Free Upgrade - see the Information on updating your software.
Download: Download the free trial of SiteSpinner Pro.
Download: Download the free trial of SiteSpinner Pro.
_________________________________________________________________
Don't Forget to Forward This Newsletter To Your Friends!
J. Peter WhiteDon't Forget to Forward This Newsletter To Your Friends!
President,
Virtual Mechanics Inc.
< Celebrating 10 years in business - 1998 - 2008! >
Virtual Mechanics Home | On-line Store | Products | Privacy Policy
ISSN 1488-7088. TM ® & © 1998 - 2009 Virtual Mechanics Inc. All rights reserved.
ISSN 1488-7088. TM ® & © 1998 - 2009 Virtual Mechanics Inc. All rights reserved.