Visual Appeal In Website Design
Copyright © 2003 J. Walker of GNC Web Creations
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.
-
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)
-
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.
-
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!
-
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.
-
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!
Visual Appeal In Website Design
Copyright © 2003 J. Walker of GNC Web Creations
This article was originally published in the July 2003 issue
of
AnyFrontPage Bytes. It's an informative tutorial,
written to assist new FP2002 users with the use of graphics
and visual appeal in website design.
AnyFrontPage Bytes issue published in:
http://www.anyfrontpage.com/bytes/archives/v2/issue10v2.htm
We welcome your comments and suggestions!
Comments and Suggestions
Sometimes a program is so incredible that we
have to share it with others! We are extremely impressed with this
all new version of
Xara Webstyle 4 and are currently using it as a tool in
designing our sites! This is a "must have" tool for web designers!
Take a look at our complete
Xara Webstyle 4 Review today!
Try Xara Webstyle 4 FREE Today!
GNC Web Creations - 133 Depot Street - Post Office Box 8 - Water Valley, MS 38965 - (662) 473-0063
Copyright © 2003 - 2008 J. Walker of GNC Web Creations All Rights Reserved
|
