FrontPage Web Design

FrontPage Universe Web Design Tips & Idea's

 
VISUAL APPEAL IN WEBSITE DESIGN
by Larry McCann

Actual site "content" continues to be essential
to the success of a website. More often than not
though, visual appeal is the determining factor
as to whether or not a client or customer will
remain on a site long enough to actually see
the product or service the business is providing.

Research continues to show that consumers will
purchase what they "want" far more rapidly than
what they "need". Most of us will admit to
having, at some point, delayed purchasing
something that we needed, so that we could buy
something that we "wanted" today. Visual
appeal can, and does, play a significant role in
creating a desire to purchase a product or
service today.

For many years, it seemed that designers on
the net were either expert at creating websites
or expert at designing graphics. Rarely did you
see an individual that was competent in both
skills. Microsoft's FrontPage has truly leveled
the playing field.

More and more graphic designers are turning to
FP to display and market their services because
of the ease of creating professional sites without
being expert at coding. Webmasters are
becoming more inclined to add invaluable
graphics because of the built-in features that
make even an amateur look like a pro! FP does
an excellent job displaying graphics quickly and
easily. Graphic designers are notorious for slow
loading pages due to graphic intense sites, and
are often terrible at optimizing their sites, but
FrontPage has changed all that.

a.. Automatic Thumbnails - These are available
at the click of a button without special coding
knowledge. They allow the designer to display
large images without significantly reducing page
load time. Simply right click on any image and
choose "auto thumbnail". The link to the larger
graphic is created automatically. Fine-tuning
preferences for thumbnails is done by going to
page properties > auto thumbnails. You can
also choose to have the graphic open in a new
window by adjusting the hyperlink properties.
(choose target new window)

b.. Optimization Of Graphics - No matter how
great your graphics are, if they don't load
rapidly, people won't stick around long enough
to see them on your site. With FP this process
can be accomplished, without purchasing
separate programs, simply by changing the
picture options. When a page is saved, a
window called "Saved Embedded Files" opens
up, provided any images have been added to the
page since the last time it was saved. When
this window opens, click on "Picture Options".
First you will need to choose JPEG or GIF.
JPEG is almost always best for photos while
GIF is designed for computer generated
graphics or transparent images. JPEG options
are set for quality of the photo and the number of
progressive passes that are made before the
completed photo shows on the page. This
allows your page to show a low quality photo
quickly while gradually increasing the quality.
Most graphics can be reduced to 70% quality
without any noticeable difference in appearance,
yet a tremendous difference is seen in load
time. The only time these options are available
are while the picture is being saved. If for some
reason you decide to change picture options at
a later time, simply make a minor change to the
graphic. This will cause it to be re-saved so that
you can choose to make additional changes.

c.. Picture Properties & Alt Tags - Alt tags are
vital for accessibility issues and have become
popular with search engine optimizing. This can
be a time consuming process to code by hand,
but even without special coding skills this can
be done quickly and easily with FrontPage
simply by making adjustments to the picture
properties. Right click on a graphic and choose
"Picture Properties". Start with the
"Appearance" tab. Choose the wrapping style
desired for the graphic. This allows your
preference for the text to "wrap" around the
picture or to keep the graphic in it's own space.
Under layout, choose the alignment desired for
the exact location of the photo on the page.
Then adjust vertical and horizontal spacing as
desired. Borders are usually best accomplished
with an outside graphics editor but a basic
border can be added by adjusting border
thickness. If an unwanted border is showing on
your graphic, verify that border thickness is set
to -0-. Next, insert a checkmark in "Specify
Size". FrontPage will choose the correct size for
you. (Make sure to specify pixels or
percentages, and verify that "keep aspect ratio"
has a checkmark in it also.) This process will
keep your graphic from "jerking" on the page
while it's deciding where it needs to be.

Next, choose the general tab for preferences and
skip down to where it says "text". Type in a
simple descriptive statement of what the graphic
is. This process will automatically create an alt
tag in your coding that will address accessibility
issues on your site. In many browsers, this
also has the added advantage of showing as a
visual title tag on your site when the mouse
slides over the area. Also, in many browsers,
this will show as alternative text in the space if,
for any reason, the graphic fails to load.
Another added benefit to this, is that search
engines "see" this text, so it can be an
invaluable way to include a few keywords, by
choosing the descriptive text wisely. Finally, you
can save a bit of time here if you plan on
hyperlinking the picture because it can all be
completed from the picture properties box.
Although this may sound like a long drawn-out
process, it won't be long at all before you are
able to do the entire process in seconds!

d.. Photo Editing - available at the click of a
button for those last minute finishing touches.
Although generally speaking, you will want to
use a different photo editor for creating quality
graphics, this feature is great for minor detailing
at the final stage. First of all, you need to locate
the picture toolbar. Click on toolbars on the
View menu, and then click Pictures. The picture
toolbar will be added to the top of your work
areas along with your other toolbars. Hold your
mouse over each button to determine the
functions of each. Most features such as
contrast are very basic and a matter of trial and
error. The most valuable of features on this
toolbar though, is the resampling button,
because of the time it can save. Perhaps you
have already inserted a graphic and then realize
it's not quite the right size. With this feature it's
not necessary to go back to the drawing board.
First change the size of the graphic by returning
to the picture properties box and clicking on the
appearance tab. In the area that says "specify
size" simply change the size by adjusting either
the pixel or percents measurements and click
OK. Now, on the picture toolbar, simply click on
the resample icon. (It's the button that looks
like a miniature "insert picture from file" icon
with a small arrow pointing at each corner.)
FrontPage will now automatically change the
graphics pixel size to match its current display
size.

e.. Photo Gallery - When a large number of
pictures need to be added to a site with as
much ease as possible, the photo gallery can't
be beat. Choose insert > picture > new photo
gallery, and in a matter of minutes you can
create a professional gallery of your photos
including titles, captions, and many other
personal preferences. This is also a tremendous
benefit to beginners who may not yet
understand creating tables. Everything is done
automatically. When this feature is
implemented, an additional page is saved, which
is named real.htm. As you become more
comfortable with the program you may want to
edit your real.htm pages to "tweak" the
appearance of the gallery. Please note though,
that once edited, these pages can't be edited
again at a later time.

All in all, even a beginner can create
professional sites, designed to visually appeal to
the public, by spending a minimal amount of
time experimenting with the graphics features
available in this program.

One of the greatest features of FrontPage is the
help files. Click your F1 key and you will find
clear and precise help at the press of a button!