my new website / web design (long)

updated tue 13 mar 01

Mary Ella Yamashita on mon 12 mar 01

Hey, everybody. Bill Amsterlaw took the time to look at my website and
make several useful suggestions. He copied the message to clayart, as well
as me, but the message seems to have gotten lost in computerland. Some of
you working on your own pages might find it helpful, so here it is:

>From: "Bill Amsterlaw"
>Date: Thu, 8 Mar 2001 21:13:30 -0500

>>Hi Mary Ella Yamashita:
>
>I looked at your web site at http://www.cadit.com/mey/calloo.htm
>
>I like the overall design. I have several suggestions - but just talking
>about a single problem on the home page is going to make for a
>loooong post.
>
>(I think this is a topic of general interest ... but any Clayart family
>members who have no interest in web design should delete now.)
>
>On the home page, I think you intended to center the first 3 large-
>font lines in the space to the right of the image. These lines were
>probably centered perfectly on your computer - but here is what I
>saw:
>
>* "Calloo Callay" is centered.
>
>* "COOKIE STAMPS AND FINE POTTERY BY" is pushed way to the
>right of center.
>
>* Your name is split up so that "MARY ELLA" starts at the center of
>one line while your last name "YAMASHITA" word-wraps to the far left
>margin of the following line.
>
>This is a good example of differences in the way a web page can look
>on different computers. There are better ways to control the page
>layout than the method you used.
>
>First, a quick overview of what is causing the problem: You aligned
>your text by using non-breaking spaces to offset each line of text
>from the left margin until it looked centered on your computer. The
>problem is that you have no way to know, in the visitor's computer,
>the size of the text area, the width of the line of text, or the width
>of the offset caused any given series of spaces.
>
>There are many factors at play here including the fact that you don't
>know whether the user's computer has the font(s) you specified, what
>the absolute size of the font in screen pixels will be, the browser's
>rendering of whatever font is being used, what screen resolution is
>being used, etc.
>
>Fortunately, you don't have to worry about these details just to
>center some text. The simplest way is to put the text within

>tags with the align attribute set to "center", like this:
>
>

> MARY ELLEN YAMASHITA
>

>
>But if you want to have complete layout control, put your text and
>images within the cells of a table. You can think of a table as a grid
>that lays over the page. The borders can be visible or invisible. You
>position your material by placing it within the cells of the grid. You
>have control over the dimensions of the table, its alignment on the
>page, the number and dimensions of cells, their content, and the
>alignment of the content within each cell.
>
>In order to give you a clear idea of how this works, I revised your
>home page and put it online at
>http://amsterlaw.com/design/calloo/calloo.htm
>I firmed up the layout with invisible tables. Use your back button
>to go back and forth between this page and your own page to
>compare the two. Try it on the computer of a friend using software
>different from your own.
>
>This code will give identical results in both Internet Explorer 4.0 and
>Netscape 4.6 (I checked.) It should work with newer and older
>browsers as well and should work pretty well whether or not the
>specified fonts are available.
>
>The cookie stamps image is now in a table cell and your 3 large-font
>lines are centered in a table cell to the right of the image. Because of
>the size of the image and the size of the fonts, some of the words
>stack vertically. (If you want to have the text arranged horizontally,
>reduce the font size and/or image size and the text will rearrange
>itself - still centered.)
>
>Your row of navigational icons are now spaced evenly because each
>one is placed within its own 85-pixel table cell.
>
>Other touches:
>
>1. I converted your navigation icons into transparent GIF files which
>is why they now blend seamlessly into background.
>
>2. I added some thin horizontal bars around the navigation bar
>to help set it apart visually on the page.
>
>3. I brightened up your "cookie stamps" image and made it an
>active link to your cookie stamps page.
>
>4. All the links now generate mouseover messages on the status
>bar.
>
>Feel free to use/edit the code I wrote and any of the revised
>images. If you use the code, be aware that I changed the image
>references to point to the new GIF files that I created. Either use
>those GIF files or change the source code references back to the
>JPG files you are now using.
>
>Bill Amsterlaw
>Keene, NY, USA
>http://amsterlaw.com
>wamster@amsterlaw.com
>
>
>
>
>