Best web design, graphics and images
Graphics are used in web pages for navigation or as design
elements—for logos, illustrations, and decoration. When
using graphics, follow these guidelines:
-
Keep file sizes small. Commercial software is available
to "optimise" or reduce file sizes.
-
Provide useful ALT attributes. ALT is an attribute in
an HTML image tag that provides a meaningful text alternative
when images are not loaded.
-
Provide an alternate means of navigation that does not
require images
-
Remember that most search engines cannot read or index
images.
-
Never use images from other sites without permission.
-
Specify WIDTH and HEIGHT attributes so the browser can
render the document quickly.
Best Web Design: Graphic File Formats
Several types of graphic file formats are used for the web.
Choose a file format based on a specific use. JPEG (Joint
Photographic Experts Group) files work well for photographic
images. GIF (Graphic Interchange Format) files work well with
line drawings and text images. Older browsers may not support
other file formats, such as PNG. When in doubt, test the images
on various browsers and platforms.
Best Web Design: Icons
Icons used as navigational elements give a site a unique
and consistent look. Icons can be used to illustrate as well
as link to the major sections of the site. To avoid confusion,
use the same icon for the same function.
It is difficult to create icons whose meaning is obvious
to all users. A small picture cannot always convey an abstract
topic (e.g., consider inventing an icon for the topic "alkalinity").
However, libraries of icons exist that can be downloaded and
used. These are simple to acquire, but may not make a site
unique. Consider hiring an artist to design appropriate icons.
Best Web Design: Logos
A discreet logo on each page helps unify a site and is a
good way to identify a site and its sponsors. The logo should
load quickly and unobtrusively, as visitors are more interested
in content than in a logo. Choose an alternative text (ALT
tag) that describes or replaces the logo (i.e., ""
rather than just "logo"). Always make icons small
(both in pixel size and bytes) so they load quickly and do
not overwhelm the page content.
Best Web Design: Illustrations
Choose and produce illustrations with care. Images and graphs
are essential for illustrating conceptual ideas and research
data. However do not overload a web page with large color
graphics. Carefully select images for their aesthetics and
use them sparingly to create a clean, uncluttered look.
Keep image file size as small as practical by using these
techniques:
-
crop or shrink the image
-
reduce the number of colors
-
consider using Joint Photographic Experts Group (JPEG)
instead of Graphics Interchange Format (GIF) for continuous
tone imagery.
-
use a thumbnail images as a link to the full-size image
when displaying scientific data; the document will load
more quickly and readers can select only the images they
care about
-
provide alternative text that describes the image and
allows the reader to choose whether to load it.
-
Avoid decorative images. Carefully selected images can
be used as logos or banners to help create a unified look
for a site. However minimize the number of purely decorative
images, which add to page download time, and avoid the
gratuitous use of images that serve no purpose at all.
Best Web Design: Image Layout
HTML provides limited capabilities for page layout, when
compared to desktop publishing software or word processors.
This is deliberate; HTML is designed to be viewed on a variety
of devices, ranging from the tiny monochrome screen of a palmtop
to a high-resolution true-color monitor. HTML may also be
"viewed" by a text-to-speech reader or by an autonomous
search engine. Attempting to control every aspect of the on-screen
presentation or layout may interfere with device and platform
compatibility.
Do not create a page using one large image.
Avoid creating an entire page as an image. It may look just
right on the screen, but the slow download time will deter
most visitors. In addition, an image cannot be indexed by
most search engines and therefore will not be searchable.
To create the illusion of a single graphic, divide the image
into several small graphics that are held in place by tables.
Smaller graphics can be coded easily as image links and appropriate
"ALT tags" can be added. Many current HTML editors
and image processors offer this image slicing capability.
Keep in mind that although the screen will load quicker with
several small images than with a single image, it does take
time to download several images. Be cautious with invisible
spacers and other layout tricks.
Some designers use invisible images (transparent images in
GIF89a format, or images the same color as the background)
to place page elements into the desired location. This trick
is harmless if done properly. It is crucial to use only small
images, supply alternative text attributes (ALT="spacer"),
and view the result in a variety of browsers, with image loading
disabled, and at several screen sizes. The presentation may
differ on various browsers or platforms and may be not worth
the effort required to produce it.
Focus on the information conveyed by your page rather than
its appearance.
Useful content is timeless; nice appearance depends on current
fashion.
As previously mentioned, you can create sophisticated layouts
by dividing a larger image and putting the pieces into separate
cells of a table. When doing this, follow the same rules as
mentioned in the discussion about invisible spacer GIFs.
Best Web Design: Image Maps
Use image maps when necessary, and provide an alternate
means of navigation.
Image maps allow different parts of a single image to be
linked to different documents on a server. Image maps are
useful, even essential, in many applications. For example,
clicking on a geographic map to select a country is a reasonable
user interface style. An image map might also be used for
a row of navigation icons.
Don’t use an image map that takes up the entire page.
Image maps, however, can easily be overused, such as when
the image is simply a picture of text and various phrases
are links to different documents. The same result can be achieved
using HTML, unless a specific style of text is desired to
maintain consistency. Furthermore, image maps cannot be read
by the blind and cannot be indexed by search engines.
When an image map is appropriate, construct it following
the previous recommendations on how to use graphics (small
file size, useful ALT text, etc.). In addition, provide an
alternative means of accessing the links in the image map.
A typical alternative is a list or menu of text links immediately
below the map, or use text (or clear text) at the end of the
page for indexing and for blind users.
If a search engine can’t follow links from your image
map, it won’t be able to index your site.
|
