Master-Title

by Paul Rego

Written 11/30/10

This page is a part of the M.A.C.S. (Macintosh Asheville Computer Society) website. If you linked directly to this page, click here to visit our home page and to access our menu.

Click here to read our review of "Freeway 5.5 Pro"

 

I am writing this article because I’d like more people to realize that “Frames”, in my opinion, provide a better users experience than web pages without Frames.

First, I should explains “Frames”

When using a web-page-design program, such as Freeway, you can activate the Frames function and divide your page into two or more areas. Each area is a separate Frame and can be set to allow the site Visitor to scroll or not scroll that Frame as needed. The real power of Frames is that you can automatically have new information added to any Frame when the Visitor clicks on various page links. Since the M.A.C.S. website uses Frames, let’s take a look at one of those pages…

WebsiteDesign1

There are two Frames throughout the M.A.C.S. website. The green Navigator (or “menu”) on the left and the rest of the information on the right. Notice that when this “page” is scrolled, the Navigator Frame does not move. This is because I instructed Freeway to not allow scrolling within that Frame.

Any time a Visitor clicks a link, which should display another M.A.C.S. web page, I instruct Freeway to make sure the new information is loaded into the right Frame -- replacing whatever current information may already be there.

The reason I think Frames, used in this way, provide a better user experience is because the Navigator is ALWAYS available without scrolling. By contrast, most sites, even Apple’s site, place their site menu across the top of each page. As you scroll down the page to read the content, if you want to jump to one of those menu-offered choices, you must scroll to the top of the page first!

The Downside To Using Frames

One problem with Framed pages is that you cannot direct a potential Visitor to a specific page. Look at the top of your Browser's window. Notice that the URL (Uniform Resource Locator or "web address") is:

http://web.me.com/macsnc/

That's the address of the Framed page -- not a specific "page". Remember, a Framed pages is really just a placeholder for other pages. As you navigate to other M.A.C.S. pages, the web address will remain the same. It never changes while you're on the M.A.C.S. site because every page you "go to" is merely displayed in the right Frame of that Framed page.

For some pages, such as those containing a product review, I have to allow all Visitors to jump directly to the page holding the review. One such example is my review of Freeway. Here's the direct link to that review page:

http://web.me.com/macsnc/freeway55review.html

Clicking that link will not only take you to the review page but that page will not be a part of the normal M.A.C.S. Framed page system -- it will be its own, stand-alone page. If I didn't create this work-around, I would have to instruct each company we write reviews of to Visit the M.A.C.S. site, click this link, then click another link, etc. This would be way too cumbersome.

By allowing site Visitors to jump to specific pages, I still wanted them to know about the other pages the M.A.C.S. site has to offer. To do this, I added the text at the top of those stand-alone pages.

This page is a part of the M.A.C.S. (Macintosh Asheville Computer Society) website. If you linked directly to this page, click here to visit our home page and to access our menu.

item9

The gray box at the right is Freeway's Frames Inspector. It allows you to indicate how many Frames you want and the size of each. You can also designate whether each Frame is horizontal or vertical.

The window at the right is how the Frames relate to the M.A.C.S. web pages.

WebsiteDesign3

Screen Real Estate

Yes, it’s possible to place a Frame horizontally across the top or bottom of a web page. I don’t do this because of what I call “screen real estate”.

WebsiteDesign2

Take a look a your Mac’s screen proportions. From the MacBook to the iMac, the screen on each model is wider than it is tall. Since we have a lot more room “left-and-right”, why crowd the limited vertical space with a web page menu? (I don’t even think Apple should place the Dock on the bottom, because of this fact. I always keep mine on the left side… the right side is where new files appear when they’re added to the Desktop. So why cover it with the Dock?)

By placing a web-page-menu in a Frame and on the left side of each page, Visitors to that site will always have access to those menu items AND they won’t lose any screen real estate in the process.

Submenus

Sometimes pages require more menu choices than you can place within a Framed area. Remember, for a Framed menu to be

WebsiteDesign4

as simple to use as possible, it shouldn’t be allowed to scroll. Because of this, you should design your menu so it can be viewed on the “lowest common denominator”... the “MacBook”. (Of course, if you will be designing your website for Apple’s mobile devices (iPhone, iPod Touch and iPad), you should take those limitations into consideration before creating your first page. Since the M.A.C.S. website was initially aimed a “Macintosh” computers, I have to be sure they can be viewed through a MacBook. This is why the green Navigator never got longer and why its real menu options stop just above the Apple logo.

Let’s take a closer look at two M.A.C.S. website sections which require more menu choices: the “Reference” and “WebLinks” pages. Actually, if you scroll to the bottom of either of those pages, you’ll discover that all of the information is not there.

Although web pages can be almost any length, I’ve found that Freeway really slows down if any page approaches 17,000 pixels in length. So, in order to create a “page” which contains all the information I need it to, I simply use multiple pages of

WebsiteDesign5

the same name. Currently, there are three “Reference” pages and two “WebLinks” pages.

In order to give site Visitors easy access to all the features on those pages, I use the green Navigator as the “master”, or “main categories”. Then, if I need a “page” to offer more choices, I create a customize submenu for that page. On the “Reference” page, the submenu can be found on the picture of the book, located in the upper-right corner of that page.

The extra menu on the “WebLinks” page can be found at the top on the corkboard.

When someone clicks one of these menu items, they are taken to that particular article, even if it’s on a different page. To do this, I use a “hyperlink” or “hypertext” (that’s the blue, underlined text) to bring them to the page they need. I also use something called an “Anchor”.

HTML (Hyper Text Markup Language) is the underlying program language of most web pages. Anchors are a sort of “bookmark” somewhere on a web page. They can be attached to text or a graphic box. You give each a name, so you know which is which, when you’re ready to create a hyperlink to one of them. This is how my submenus work.

All of the main category items in the green Navigator simply take the Visitor to the top of the page they are requesting. If they visit a Reference or WebLinks page, all of those submenu items are directly connected to an Anchor -- even if it’s on another M.A.C.S. page.

Give ‘Em Feedback

While we’re on the subject of making things easy for your site Visitors, we need to talk about “feedback”. Whenever a Visitor to your site moves the Pointer over a clickable button, you should always provide some sort of feedback.

Let’s use the green Navigator as an example… Move your Pointer so it’s over the menu choices on the green Navigator. Notice that the main category choices change a bit. This tells the site Visitor “yes, these are clickable choices” and “you are about to click this one”.

In trying to do something different, I designed the “Reference” and “WebLinks” submenus to look and respond differently than the green Navigator. I simply wanted the M.A.C.S. site to look casual and feel fun to explore. By making the menus and submenus different, it helps keep things a bit more interesting.

Colors

When designing your website, be sure to consider your color-scheme. Early-on, I knew the right colors were important but I knew nothing about how to apply them. So I experimented for a while. At one point, I even created a large, 3D, “red” Navigator! By itself, it looked great but the colors and they style of the Navigator did not reflect the M.A.C.S. environment. After a few more experiments, and with Sylvia’s helpful color-coordinated eye, I settled on the light yellow and medium green you see through the M.A.C.S. site today.

According to experts in the field of reading, “contrasting color” is easier on the eyes. According to color experts, black text on a yellow background is the easiest to read. I didn’t want to pump up the yellow to their suggested “best readability” level, so I went with a subdued yellow.

I feel that the yellow background also gives the M.A.C.S. site a bit more character. To me, it keeps it from feeling like I’m reading a generic newspaper from the 1950’s.

If you want to learn more about color, there are books and websites which explain the science of which color-tones go with other color-tones and how different colors can make your site Visitors feel happy or sad, interested or not.

This page was updated on 11/30/10